반응형
JSON 형식의 POST 데이터
JSON 포맷으로 변환한 후 JavaScript 기능으로 POST해야 하는 데이터가 있습니다.
<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 형식으로 값을 제출하고 JavaScript로 POST를 해야 합니다.
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
};
};
다음은 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가 시리얼화됩니다.배열 함수는 폼 값을 가진 Javascript 객체를 만듭니다.그런 다음 필요에 따라 JSON.stringify를 사용하여 문자열로 변환할 수 있습니다.그리고 부하가 걸리면 몸을 뺄 수도 있어요.
새 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));잰의 원래 대답처럼요
언급URL : https://stackoverflow.com/questions/1255948/post-data-in-json-format
반응형
'programing' 카테고리의 다른 글
| $location을 사용한 AngularJS 페이징경로는 ngView 새로고침 없음 (0) | 2023.03.15 |
|---|---|
| AngularJS: 디자인 패턴의 이해 (0) | 2023.03.15 |
| Woocommerce에서 카트에 추가됨 메시지 숨기기 (0) | 2023.03.15 |
| 문자열로 스위프티JSON 오브젝트 되돌리기 (0) | 2023.03.15 |
| WordPress 테마에 jQuery를 포함하려면 어떻게 해야 합니까? (0) | 2023.03.15 |