在web開(kāi)發(fā)中，form表單是非常常見(jiàn)的一種提交方式，而傳統(tǒng)的form表單提交使用的是默認(rèn)的form表單提交方式，而對(duì)于一些需要異步提交的場(chǎng)景，我們可以使用ajax來(lái)實(shí)現(xiàn)異步提交，其中做法之一就是使用json來(lái)提交form表單數(shù)據(jù)。

那么，什么是json呢？JSON(JavaScript Object Notation) 是一種輕量級(jí)的數(shù)據(jù)交換格式。易于人閱讀和編寫(xiě)，同時(shí)也易于機(jī)器解析和生成。在Web應(yīng)用程序中，通過(guò)JavaScript對(duì)象進(jìn)行數(shù)據(jù)交換的格式，可以實(shí)現(xiàn)異步傳輸數(shù)據(jù)的功能。

在以前傳統(tǒng)的form表單提交過(guò)程中，表單中的數(shù)據(jù)會(huì)被序列化為一個(gè)字符串，而這個(gè)字符串是由form表單中的元素和值組成的。在需要提交表單的時(shí)候，這個(gè)字符串將會(huì)被發(fā)送給服務(wù)器，然后服務(wù)器再對(duì)字符串進(jìn)行解析并獲取表單的參數(shù)。而在使用json來(lái)提交form表單數(shù)據(jù)的時(shí)候，表單中的數(shù)據(jù)將會(huì)被序列化為一個(gè)json對(duì)象，并且這個(gè)json對(duì)象是一個(gè)以{key:value}為單位的數(shù)據(jù)結(jié)構(gòu)。

// 使用jquery中的代碼片段
var form = $('#test-form');
var formData = form.serializeArray();
var data = {};
for (var i = 0; i< formData.length; i++) {
data[formData[i].name] = formData[i].value;
}
$.ajax({
type: 'POST',
url: form.attr('action'),
data: JSON.stringify(data),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
if (response.success) {
alert('提交成功！');
window.location.reload();
} else {
alert('提交失敗！');
}
}
});

在使用json來(lái)提交form表單數(shù)據(jù)的時(shí)候，需要注意一下兩點(diǎn)：

1. 需要將form表單中的數(shù)據(jù)進(jìn)行js對(duì)象的序列化。我們可以使用jquery中的serializeArray()方法來(lái)實(shí)現(xiàn)。

2.需要將序列化后的數(shù)據(jù)轉(zhuǎn)換為json對(duì)象，再將這個(gè)對(duì)象轉(zhuǎn)化為json字符串提交到服務(wù)器端。對(duì)于這個(gè)，我們可以使用JSON.stringify()方法。

總體來(lái)說(shuō)，使用json來(lái)提交form表單數(shù)據(jù)是一種非常優(yōu)秀的方式，不僅可以提高提交效率，還可以更方便地獲取到表單參數(shù)。同時(shí)，在前后端分離的開(kāi)發(fā)模式下，這種方式更是必不可少的一環(huán)。