JSON(JavaScript Object Notation)是一種輕量級(jí)的數(shù)據(jù)交換格式,與XML類(lèi)似但更易于閱讀和編寫(xiě)。在Web中,我們常常使用JSON來(lái)從服務(wù)器獲得數(shù)據(jù)或向服務(wù)器提交數(shù)據(jù)。除了 GET 和 POST 方法外,我們還可以使用 AJAX 和 jQuery 的 API 來(lái)提交表單。下面我們將介紹如何使用JSON來(lái)提交表單。
$('form').submit(function(e) {
e.preventDefault(); // 阻止默認(rèn)的提交動(dòng)作
var formData = $(this).serializeArray();
var jsonObj = {};
$.each(formData, function() {
jsonObj[this.name] = this.value;
});
$.ajax({
url: $(this).attr('action'),
type: 'POST',
dataType: 'json',
data: JSON.stringify(jsonObj), // 將表單數(shù)據(jù)轉(zhuǎn)換為JSON格式
success: function(data) {
console.log(data); // 成功時(shí)的回調(diào)函數(shù)
},
error: function(xhr, textStatus, errorThrown) {
console.log('Error:', errorThrown); // 失敗時(shí)的回調(diào)函數(shù)
}
});
});
上述代碼首先使用 jQuery 提供的 serializeArray() 函數(shù)將表單數(shù)據(jù)序列化為一個(gè)數(shù)組。然后逐個(gè)遍歷數(shù)組的每個(gè)元素,將其轉(zhuǎn)換為一個(gè) JSON 對(duì)象。接著使用 jQuery 的 AJAX 函數(shù)向服務(wù)器提交數(shù)據(jù),content-type 設(shè)置為 application/json,將數(shù)據(jù)作為字符串傳遞到服務(wù)器端,以便服務(wù)器通過(guò) JSON.parse() 函數(shù)將其轉(zhuǎn)換回原始的 JavaScript 對(duì)象。