<form id="myForm">
<input type="text" name="username">
<input type="password" name="password">
<input type="submit" value="Submit">
</form>

然后，我們需要?jiǎng)?chuàng)建一個(gè)JavaScript函數(shù)，用于將表單數(shù)據(jù)轉(zhuǎn)換為JSON格式。例如：

function formToJson(form){
var formData = new FormData(form);
var jsonObj={};
for (var key of formData.keys()){
jsonObj[key] = formData.get(key);
}
return JSON.stringify(jsonObj);
}

在該函數(shù)中，我們首先使用FormData對(duì)象來(lái)獲取表單數(shù)據(jù)。然后，我們創(chuàng)建一個(gè)空的JavaScript對(duì)象來(lái)保存這些數(shù)據(jù)，并使用for…of循環(huán)遍歷FormData對(duì)象中的鍵和值。最后，我們將JavaScript對(duì)象轉(zhuǎn)換為JSON字符串，并返回結(jié)果。

最后，我們可以在表單的“submit”事件處理程序中使用該函數(shù)，將JSON數(shù)據(jù)發(fā)送到服務(wù)器。例如：

document.getElementById("myForm").addEventListener("submit", function(e){
e.preventDefault();
var json = formToJson(e.target);
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://example.com/api");
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.send(json);
};

在該事件處理程序中，我們首先使用“preventDefault()”方法阻止表單的默認(rèn)提交行為。然后，我們調(diào)用上面定義的函數(shù)，將表單數(shù)據(jù)轉(zhuǎn)換為JSON格式。接下來(lái)，我們創(chuàng)建一個(gè)新的XMLHttpRequest對(duì)象，將HTTP方法設(shè)置為POST，并設(shè)置服務(wù)器的URL。我們還設(shè)置了“Content-Type”請(qǐng)求頭，以確保向服務(wù)器發(fā)送的數(shù)據(jù)是JSON格式。最后，我們使用“send()”方法將JSON數(shù)據(jù)發(fā)送到服務(wù)器。

總結(jié)：

使用form表單發(fā)送JSON數(shù)據(jù)可以更方便地進(jìn)行數(shù)據(jù)交換和處理，我們可以通過(guò)HTML5中的FormData對(duì)象和JavaScript來(lái)將表單數(shù)據(jù)轉(zhuǎn)換為JSON格式，并通過(guò)XMLHttpRequest對(duì)象將這些JSON數(shù)據(jù)發(fā)送到服務(wù)器。