在web開發(fā)中，提交表單是非常常見的操作，而常用的方式之一就是通過按鈕觸發(fā)提交事件。而json作為一種數(shù)據(jù)格式，也常用于表單提交。下面我們就來介紹一下如何通過button json提交表單。

<form id="form">
<input type="text" name="username" placeholder="請輸入用戶名">
<input type="password" name="password" placeholder="請輸入密碼">
<button id="submit-btn">提交</button>
</form>
<script>
const form = document.getElementById('form');
const btn = document.getElementById('submit-btn');
btn.addEventListener('click', onSubmit);
function onSubmit(event) {
event.preventDefault();
const data = {
username: form.username.value,
password: form.password.value
};
fetch('/api/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
.then(response => response.json())
.then(data => {
console.log(data);
// 處理返回結(jié)果
})
.catch(error => {
console.error(error);
// 處理錯誤
});
}
</script>

上述代碼展示了通過一個按鈕來提交表單并且以json的格式提交數(shù)據(jù)。首先我們獲取了form元素以及button元素，并為button添加了一個點擊事件。點擊事件被觸發(fā)后，我們首先使用preventDefault()方法阻止了表單的默認提交行為，然后構(gòu)建了一個數(shù)據(jù)對象，包括了用戶名和密碼。接下來，我們使用fetch函數(shù)向服務(wù)器發(fā)送一個POST請求，請求路徑為"/api/login"，并設(shè)置請求頭的Content-Type為application/json，以便服務(wù)器知道這是一個json格式的數(shù)據(jù)。body部分則使用JSON.stringify()將數(shù)據(jù)對象轉(zhuǎn)換成了json字符串。最后，我們在fetch函數(shù)返回的Promise對象中處理了服務(wù)器的返回值，以及可能出現(xiàn)的錯誤。

總結(jié)來說，通過button json提交表單是一種方便實用的方式，適用于前后端分離的項目，操作簡單又易于理解。但需要注意的是，在使用這種方式時，需要確保后端接口支持接收json格式的請求，否則會導致提交失敗。