JSON 형식의 POST 데이터


86

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 형식으로 값을 제출하고 JavaScript로 POST를 수행해야합니다.


JSON 데이터는 어떤 구조를 가져야합니까? 그냥 {"firstName":"harry", "lastName":"tester", "toEmail":"testtest@test.com"}?
Gumbo

1
예, 데이터는 귀하가 설명한 형식입니다! 응답 해 주셔서 감사합니다!

답변:


172

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
  };
};

62
이것은 100K의 프레임 워크없이 20 줄의 코드로 작업을 완료하는 방법에 대한 훌륭하고 깨끗하며 간결한 예라고 생각합니다.
spidee

1
@IanKuca 감사합니다 :) 데이터를 urlencode하지 않고 json 데이터를 보낼 수 있는지 궁금합니다. 나는 데이터를 보내지 "cmd":"<img src=0 onerror=alert(1)>"않고 싶다는 뜻입니다%3Cimg+src%3D0+onerror%3Dalert%281%29%3E
tli2020

2
@liweijian 당신은 어떤 JSON.stringify반환 이든 가야 합니다.
JK 2013 년

2
@IanKuca 게시물 데이터가 html formnot 로 인코딩 된 것 같습니다 JSON.stringify.
tli2020

그런 경우 @liweijian 먼저 양식 값을 URLDECODE해야 할 것
케빈 Peno에게

28

다음은 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 를 사용 하여 문자열로 변환 할 수 있습니다 . 그리고 당신은 또한 당신의 신체 온로드를 제거 할 수 있습니다.


2
Josh, jQuery의 예제는 그렇지 않은 경우를 보여줍니다. JSON보다 표준 쿼리 문자열처럼 보입니다.
Sampson

4
너희 말이 맞아. 그에 따라 답변을 업데이트했습니다. 감사!
Josh Stodola

7
이것은 좋은 예이지만 제목에 따르면 자바 스크립트 라이브러리 (이 경우 jQuery와 같은)가 아닌 자바 스크립트를 사용하여 수행해야합니다.
Juan Carlos Alpizar Chinchilla

4
물론 어려운 방법으로 할 수 있습니다. 다른 사람들은 모두 jQuery를 사용합니다.
PaulMurrayCbr 2014-06-23

9
질문은 jquery 라이브러리가 아닌 javascript를 사용하여 데이터를 POST하는 방법을 묻습니다 . 이것은 잘못된 질문에 대한 대답입니다.
Blair Anderson


1

새로운 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));Jan의 원래 답변처럼.


작동하지 않습니다. FormData 객체는 JSON으로 유용하게 문자열 화되지 않습니다.
Quentin
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.