Dane POST w formacie JSON

Mam pewne dane, które muszę przekonwertować na format JSON, a następnie POST to z funkcją JavaScript.Dane POST w formacie JSON

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

Tak właśnie wygląda post. Potrzebuję go przesłać wartości w formacie JSON i wykonaj POST z JavaScript.

Źródło

2009-08-10 Anonymous

Jaką strukturę powinny mieć dane JSON? Po prostu '{" firstName ":" harry "," lastName ":" tester "," toEmail ":" [email protected] "}'? – Gumbo

Tak, dane byłyby w formacie, który opisałeś! dzięki za odpowiedzi! –

Oto przykład przy użyciu 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>

Funkcja jQuery serializeArray tworzy obiekt JavaScript z wartościami formularza. Następnie możesz użyć JSON.stringify, aby przekształcić to w ciąg znaków, jeśli to konieczne. I możesz także usunąć obciążenie twojego ciała.

Źródło

2009-08-10 16:58:09

To nie będzie przesyłanie danych w formacie JSON. –

W rzeczywistości funkcja serialize konwertuje dane formularza na obiekt JSON. –

Josh, przykład na jQuery pokazuje inaczej: Wygląda bardziej jak standardowy łańcuch zapytań niż jak JSON. – Sampson

125

Nie jestem pewien, czy chcesz 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 
    }; 
};

Źródło

2012-10-23 19:55:58

+43

Myślę, że jest to dobry, czysty i zwięzły przykład, jak wykonać zadanie w 20 liniach kodu, bez 100K ram. – spidee

@IanKuca Dzięki :) Zastanawiam się, czy możemy wysłać dane json bez urlencode danych? Chodzi mi o to, że chcę wysłać dane takie jak "cmd": "" 'nie'% 3Cimg + src% 3D0 + onerror% 3Dalert% 281% 29% 3E' – liweijian

@liweijian Powinieneś pójść z czymkolwiek 'JSON.stringify' zwraca . –

Innym przykładem jest dostępny tutaj:

Sending a JSON to server and retrieving a JSON in return, without JQuery

który jest taki sam jak Jans odpowiedzieć, ale także sprawdza odpowiedź serwerów poprzez ustawienie zwrotnego onreadystatechange od XMLHttpRequest.

Źródło

2016-12-10 14:47:34

Dzięki nowej FormData obiektu (i niektóre inne rzeczy ES6), można to zrobić, aby obrócić całą swoją formę w json:

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

a potem po prostu xhr.send(JSON.stringify(data)); jak w oryginalnym odpowiedź Jana.

Źródło

2017-02-22 19:13:45 Felk

Odpowiedz

Powiązane problemy