Qyouu
2019-08-12 14:36:09
如何使用html表單數據發送JSON對象所以我有這個HTML表單:<html><head><title>test</title></head><body>
<form action="myurl" method="POST" name="myForm">
<p><label for="first_name">First Name:</label>
<input type="text" name="first_name" id="fname"></p>
<p><label for="last_name">Last Name:</label>
<input type="text" name="last_name" id="lname"></p>
<input value="Submit" type="submit" onclick="submitform()">
</form></body></html>當用戶點擊提交時,這是將此表單的數據作為JSON對象發送到我的服務器的最簡單方法?更新:我已經走了這么遠,但它似乎不起作用:<script type="text/javascript">
function submitform(){
alert("Sending Json");
var xhr = new XMLHttpRequest();
xhr.open(form.method, form.action, true);
xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
var j = {
"first_name":"binchen",
"last_name":"heris",
};
xhr.send(JSON.stringify(j));我究竟做錯了什么?
3 回答
holdtom
TA貢獻1805條經驗 獲得超10個贊
獲取完整的表單數據作為數組和json字符串化它。
var formData = JSON.stringify($("#myForm").serializeArray());您可以稍后在ajax中使用它?;蛘呷绻銢]有使用ajax; 把它放在隱藏的textarea中并傳遞給服務器。如果此數據通過普通表單數據作為json字符串傳遞,則必須使用json_decode對其進行解碼 。然后,您將獲得數組中的所有數據。
$.ajax({
type: "POST",
url: "serverUrl",
data: formData,
success: function(){},
dataType: "json",
contentType : "application/json"});
墨色風雨
TA貢獻1853條經驗 獲得超6個贊
HTML無法從表單數據生成JSON。
如果你真的想從客戶端處理它,那么你將不得不求助于使用JavaScript:
通過DOM從表單中收集數據
將它組織在一個對象或數組中
使用JSON.stringify生成JSON
你可能最好不要堅持application/x-www-form-urlencoded使用服務器而不是JSON處理數據和處理數據。您的表單沒有任何可以從JSON數據結構中受益的復雜層次結構。
更新以回應重大改寫的問題......
你的JS沒有
readystatechange處理程序,因此你對響應沒有任何作用單擊提交按鈕時觸發JS而不取消默認行為。一旦JS功能完成,瀏覽器將以常規方式提交表單。
繁花如伊
TA貢獻2012條經驗 獲得超12個贊
您的代碼很好但從未執行過,提交按鈕的原因[type =“submit”]只需用type = button替換它
<input value="Submit" type="button" onclick="submitform()">
在你的腳本里面; 表單未聲明。
let form = document.forms[0];xhr.open(form.method, form.action, true);
添加回答
舉報
0/150
提交
取消
