ฉันมีข้อมูลบางอย่างที่ต้องแปลงเป็นรูปแบบ JSON จากนั้นโพสต์ด้วยฟังก์ชัน JavaScript
<body onload="javascript:document.myform.submit()">
<form action="https://www.test.net/Services/RegistrationService.svc/InviteNewContact" method="post" name="myform">
<input name="firstName" value="harry" />
<input name="lastName" value="tester" />
<input name="toEmail" value="testtest@test.com" />
</form>
</body>
นี่คือลักษณะของโพสต์ในขณะนี้ ฉันต้องการให้ส่งค่าในรูปแบบ JSON และทำ POST ด้วย JavaScript
คำตอบ:
ไม่แน่ใจว่าคุณต้องการ jQuery
var form;
form.onsubmit = function (e) {
// stop the regular form submission
e.preventDefault();
// collect the form data while iterating over the inputs
var data = {};
for (var i = 0, ii = form.length; i < ii; ++i) {
var input = form[i];
if (input.name) {
data[input.name] = input.value;
}
}
// construct an HTTP request
var xhr = new XMLHttpRequest();
xhr.open(form.method, form.action, true);
xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
// send the collected data as JSON
xhr.send(JSON.stringify(data));
xhr.onloadend = function () {
// done
};
};
"cmd":"<img src=0 onerror=alert(1)>"not%3Cimg+src%3D0+onerror%3Dalert%281%29%3E
JSON.stringifyรับผลตอบแทนอะไรก็ตาม
html form JSON.stringify
นี่คือตัวอย่างการใช้jQuery ...
<head>
<title>Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.json.org/json2.js"></script>
<script type="text/javascript">
$(function() {
var frm = $(document.myform);
var dat = JSON.stringify(frm.serializeArray());
alert("I am about to POST this:\n\n" + dat);
$.post(
frm.attr("action"),
dat,
function(data) {
alert("Response: " + data);
}
);
});
</script>
</head>
ฟังก์ชันjQuery serializeArrayสร้างวัตถุ Javascript ด้วยค่าฟอร์ม จากนั้นคุณสามารถใช้JSON.stringifyเพื่อแปลงเป็นสตริงได้หากจำเป็น และคุณสามารถลบการโหลดร่างกายของคุณได้ด้วย
อีกตัวอย่างมีอยู่ที่นี่:
ส่ง JSON ไปยังเซิร์ฟเวอร์และดึง JSON กลับมาโดยไม่ต้องใช้ JQuery
ซึ่งเหมือนกับ jans answer แต่ยังตรวจสอบการตอบสนองของเซิร์ฟเวอร์ด้วยการตั้งค่าการเรียกกลับ onreadystatechange บน XMLHttpRequest
การใช้ออบเจ็กต์FormDataใหม่(และสิ่งอื่น ๆ ของ ES6) คุณสามารถทำได้เพื่อเปลี่ยนแบบฟอร์มทั้งหมดของคุณเป็น JSON:
let data = {};
let formdata = new FormData(theform);
for (let tuple of formdata.entries()) data[tuple[0]] = tuple[1];
แล้วก็xhr.send(JSON.stringify(data));เหมือนกับคำตอบเดิมของแจน
{"firstName":"harry", "lastName":"tester", "toEmail":"testtest@test.com"}?