form 的基本使用

1、什么是表單

表單在網(wǎng)頁(yè)中主要負(fù)責(zé)數(shù)據(jù)采集功能。HTML中的標(biāo)簽，就是用于采集用戶輸入的信息，并通過標(biāo)簽的提交操作，把用戶收集到的信息發(fā)送到 Web 服務(wù)器進(jìn)行處理。

2、表單的組成部分

1. 表單標(biāo)簽

就是我們常說的form表單，就是所謂的表單標(biāo)簽。

2. 表單域

也就是表單標(biāo)簽之間的部分，這里面包含了文本框、密碼框、隱藏域、多行文本框、復(fù)選框、單選框、下拉選擇框、和文件上傳框等.各種用于采集用戶信息的標(biāo)簽。

這里面還可以包含一個(gè)特殊的部分，隱藏域：
隱藏域是用來收集或發(fā)送信息的不可見元素，對(duì)于網(wǎng)頁(yè)的訪問者來說，隱藏域是看不見的。當(dāng)表單被提交時(shí)，隱藏域就會(huì)將信息用你設(shè)置時(shí)定義的名稱和值發(fā)送到服務(wù)器上。
代碼格式：<input type="hidden" name="..." value="...">

3. 表單按鈕

既然采集完用戶對(duì)應(yīng)輸入的信息了，我還還需要將其提交到服務(wù)器，這時(shí)就需要借助提交按鈕了。按鈕的種類很多，如button、submit、reset，各自有各自的特點(diǎn)。

<!-- type=text  鍵值對(duì),方式提交 -->
<!-- type=file  上傳formData這種數(shù)據(jù) -->
<form action="">
	<input type="text" name="username" />
	<input type="password" name="password">
	<input type="file" name="file" onchange="fileChange()" />
	<button type="submit">提交</button>
</form>

3、<form>標(biāo)簽的屬性

<form>標(biāo)簽用來采集數(shù)據(jù)

<form>標(biāo)簽的屬性則是用來規(guī)定如何把采集到的數(shù)據(jù)發(fā)送到服務(wù)器。

form表單上傳數(shù)據(jù)（POST）

注意：
1、文件類型（word、excel、image/png、mp4）等文件都需要使用 formData格式上傳文件至服務(wù)器
2、其他的數(shù)據(jù)內(nèi)容基本是那個(gè)都是按照對(duì)象的形式傳遞的

1、直接傳遞對(duì)應(yīng)的參數(shù)

實(shí)例代碼基于jquery實(shí)現(xiàn)文章來源地址http://www.zghlxwxcb.cn/news/detail-475815.html

$(function() {
	$('button').on('click', function(e) {
	    e.preventDefault();
	    $.ajax({
	        url: 'xxx',
	        type: 'POST',
	        //鍵值對(duì)的方式:
	        data: {
	            username: $('[name="username"]').val(),
	            password: $('[name="password"]').val()
	        },
	        success: (res) => {
	            console.log(res);
	        }
	    })
	})
});

2、formData上傳數(shù)據(jù)(文本、文件、視頻、圖片等)

fileChange(){
	//選中文件后，會(huì)觸發(fā)input=file的change事件，即會(huì)進(jìn)入此函數(shù)
	// 1.先創(chuàng)建formData數(shù)據(jù)格式 傳遞HTML對(duì)象(文件上傳推薦)
	var formData = new FormData()[0]);
	// 2.把傳遞給服務(wù)器數(shù)據(jù),追加到formData對(duì)象里面
	// 第一種寫法：一個(gè)個(gè)append
	formData.append('username', $('[name="username"]').val())
	formData.append('password', $('[name="password"]').val());
	//添加選擇的文件 key值為file
	formData.append('file',$('[name="file"]')[0].files[0]); 
	
	// 第二種寫法：遍歷寫法
	let obj = {
		username: $('[name="username"]').val(),
		password: $('[name="password"]').val(),
		file: $('[name="file"]')[0].files[0]
	}
	$.each(obj,function(key,value) {
	  formData.append(key,value)
	})
	
	//刪除數(shù)據(jù)
	//formData.delete('username');
	//發(fā)送請(qǐng)求
	$.ajax({
	    url: 'xxx',
	    type: 'POST',
	    data: formData,
	    //如果提交數(shù)據(jù)格式為formData類型 必須加下面兩句,不添加就報(bào)錯(cuò)
	    processData: false, //不希望使用   application/x-www-form-urlencoded
	    contentType: false, //不采用默認(rèn)的數(shù)據(jù)類型 
	    //數(shù)據(jù)格式是 application/x-www-form-urlencoded
	    success: (res) => {
	        console.log(res);
	    },
	    error: function(err) {
	        console.log(err);
	    }
	})
}

3、form表單數(shù)據(jù)序列化(serialize將傳遞表單中的數(shù)據(jù)序列化)

//serialize form表單里面具有name屬性的標(biāo)簽進(jìn)行序列化, 序列化字符串
console.log($('form').serialize());
//輸出：
username=admin&password=123123

//serializeArray form表單里面具有name屬性的標(biāo)簽進(jìn)行序列化, 序列化數(shù)組套o(hù)bject
console.log($('form').serializeArray());
//輸出：
[ 
  {name: 'username', value: 'admin'}, 
  {name: 'password', value: '123123'},
]

console.log(serializeObject($('form'));
//輸出：
{username:"admin",password:"123123"}
// 將表單中用戶輸入的內(nèi)容轉(zhuǎn)換為對(duì)象類型
// 封裝一個(gè)方法： serializeObject()  ——返回對(duì)象
function serializeObject(obj) {
	var params = obj.serializeArray();
	// 使用each方法對(duì)params進(jìn)行操作
	var result = {};
	// 循環(huán)數(shù)組，將數(shù)組轉(zhuǎn)為對(duì)象類型
	$.each(params, function(index, value) {
	    result[value.name] = value.value;
	})
	return result;
}

$.ajax({
    url: 'xxx',
    type: 'POST',
    data: JSON.stringify(serializeObject($('form')),
    success: (res) => {
        console.log(res);
    },
    error: function(err) {
        console.log(err);
    }
})
            

到了這里，關(guān)于form表單上傳數(shù)據(jù)的幾種方式的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！