如何在 html 表單中使用 PATCH 方法將資料發送到服務器？
我已經完成了這個
Html
<form class="type-title" method="POST" id="alter">
<input type="hidden" name="_method" value="PATCH"/>
<input id="alter" type="text" name="alter"/>
<button onclick="alter_name();">update</button>
</form>
JS
function alter_name(){
fetch("http://127.0.0.1:3000/api/member", {
method: 'PATCH',
headers: {
'Content-type' :'application/json'
},
body: {
"name":alter_name.value.toString()
}
}),then((response) =>{
return response.json();
}).then((data) =>{
console.log(data);
})
}
但它仍然不起作用
uj5u.com熱心網友回復：
主要問題是您如何處理輸入值。您的表單的 id:id="alter"與無效的輸入名稱相同，但是在您的腳本中您根本沒有正確參考此欄位，讓我們修復所有這些...
首先使用 HTML 表單，不要回帖，因為這可能會影響表單上的其他作業流程。我們通過強制按鈕充當簡單的獨立 HTML 按鈕而不是表單的提交按鈕來做到這一點。通過將type按鈕的屬性設定為"button"：
_我還將表單的 ID 更改為唯一并洗掉_method隱藏的輸入。
<form class="type-title" id="alter_form">
<input id="alter" type="text" name="alter"/>
<button onclick="alter_name();" type="button">update</button>
</form>
- 您在使用 javascript 并發送資料方面走在了正確的軌道上，因為如果您使用標準表單提交的方法
fetch()，您的 API 不太可能設定為接受表單資料。PATCH
另一個修復是在腳本本身，我們需要故意將我們在正文中發送的物件有效負載字串化，這樣我們可以控制或強制序列化而不是依賴于 javascript，我們也可以更容易地檢查內容何時或如果它出錯了。
- 請注意如何使用路徑參考該欄位
formId.fieldId.value
您遇到的另一個問題是您的 JSON 物件的格式不正確，屬性名稱周圍有引號，這會導致引號被轉義并編碼為我們不想要的 JSON 字串值。
最后，我在 中指定了編碼，Content-Type因為我的系統需要它來決議服務器端的內容。
function alter_name(){
let content = {
Details: alter_form.alter.value.toString()
};
fetch("http://127.0.0.1:3000/api/member", {
method: 'PATCH',
headers: {
'Content-type': 'application/json; charset=UTF-8',
'Accept': 'application/json'
},
body: JSON.stringify(content)
}).then((response) => {
console.log('PATCH Response.status: ', response.status);
if(response.status !== 204)
return response.json();
else
return response.statusText;
}).then((data) => {
alert(data);
});
}
對于一些獎勵積分，我添加了一些處理204: No Content來自服務器的回應。除非您使用HTML Header顯式請求它，否則許多PATCH實作不會回傳內容。Prefer
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/525230.html
標籤：html形式
上一篇：我無法捕捉復選框輸入的值