2009-08-10 2 views
73

JSON 형식으로 변환 한 다음 JavaScript 기능을 사용하여 POST하는 데 필요한 일부 데이터가 있습니다.JSON 형식의 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="[email protected]" /> 
</form> 
</body> 

이것은 게시물의 모양입니다. JSON 형식으로 값을 제출하고 JavaScript로 POST를 수행해야합니다.

+0

JSON 데이터에는 어떤 구조가 있어야합니까? '{ "firstName": "harry", "lastName": "tester", "toEmail": "[email protected]"}'? – Gumbo

+1

예, 데이터가 설명 된 형식이됩니다! 응답 주셔서 감사합니다! –

답변

29

여기

<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 함수 형식 값 자바 스크립트 객체를 생성 jQuery ...를 사용하는 예이다. 그런 다음 필요에 따라 JSON.stringify을 사용하여 문자열로 변환 할 수 있습니다. 그리고 당신도 당신의 몸에 하중을 제거 할 수 있습니다.

+8

JSON 형식으로 데이터를 제출하지 않습니다. –

+0

사실 serialize 함수는 양식 데이터를 JSON 객체로 변환합니다. –

+2

Josh, jQuery에 대한 예제는 다음과 같습니다. JSON과 같은 표준 쿼리 문자열과 비슷합니다. – Sampson

125

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

이 코드는 100K 프레임 워크없이 20 줄의 코드에서 작업을 수행하는 방법에 대한 좋은 깨끗하고 간결한 예제라고 생각합니다. – spidee

+1

@IanKuca 감사합니다 :) 우리는 데이터를 urlencode없이 json 데이터를 보낼 수 있는지 궁금 해서요? 나는 "cmd"와 같은 데이터를 보내기를 원한다는 것을 의미한다 : ""'not'% 3Cimg + src % 3D0 + onerror % 3Dalert % 281 % 29 % 3E' – liweijian

+1

@liweijian'JSON.stringify' . –

0

, 당신은 JSON으로 전체 양식을 설정하기 위해이 작업을 수행 할 수 있습니다 단지 xhr.send(JSON.stringify(data)); 다음

let data = {}; 
let formdata = new FormData(theform); 
for (let tuple of formdata.entries()) data[tuple[0]] = tuple[1]; 

과 월의 원래의 대답처럼.