Dus ik heb dit HTML formulier:
<html>
<head><title>test</title></head>
<body>
<form action="myurl" method="POST" name="myForm">
<p><label for="first_name">First Name:</label>
<input type="text" name="first_name" id="fname"></p>
<p><label for="last_name">Last Name:</label>
<input type="text" name="last_name" id="lname"></p>
<input value="Submit" type="submit" onclick="submitform()">
</form>
</body>
</html>
Wat zou de gemakkelijkste manier zijn om dit formulier's gegevens als een JSON-object naar mijn server te sturen wanneer een gebruiker op submit klikt?
UPDATE: Ik'ben zo ver gegaan als dit maar het lijkt niet te werken:
<script type="text/javascript">
function submitform(){
alert("Sending Json");
var xhr = new XMLHttpRequest();
xhr.open(form.method, form.action, true);
xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
var j = {
"first_name":"binchen",
"last_name":"heris",
};
xhr.send(JSON.stringify(j));
Wat doe ik verkeerd?
Verkrijg volledige formulier gegevens als array en json stringify het.
var formData = JSON.stringify($("#myForm").serializeArray());
Je kunt het later gebruiken in ajax. Of als je geen ajax gebruikt; zet het in een verborgen tekstveld en geef het door aan de server. Als deze gegevens worden doorgegeven als json string via normale formulier gegevens dan moet je het decoderen met json_decode. Je'll krijgt dan alle gegevens in een array.
$.ajax({
type: "POST",
url: "serverUrl",
data: formData,
success: function(){},
dataType: "json",
contentType : "application/json"
});
HTML biedt geen manier om JSON te genereren uit formuliergegevens.
Als je het echt vanuit de client wilt afhandelen, dan zou je JavaScript moeten gebruiken om:
Je'zou waarschijnlijk beter af zijn om het bij application/x-www-form-urlencoded
data te houden en dat op de server te verwerken in plaats van JSON. Uw formulier heeft geen ingewikkelde hiërarchie die baat zou hebben bij een JSON-datastructuur.
Update naar aanleiding van het herschrijven van de vraag...
readystatechange
handler, dus je doet niets met het antwoordje code is in orde maar wordt nooit uitgevoerd, vanwege de submit knop [type="submit"] vervang het gewoon door type=knop
<input value="Submit" type="button" onclick="submitform()">
in je script; formulier is niet gedeclareerd.
let form = document.forms[0];
xhr.open(form.method, form.action, true);