Så jeg har denne HTML-formular:
<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>
Hvilken ville være den nemmeste måde at sende denne form's data som et JSON-objekt til min server, når en bruger klikker på submit?
UPDATE: I've gået så langt som dette, men det doesn't synes at virke:
<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));
Hvad gør jeg forkert?
Hent komplette formulardata som array og stringificer dem med json.
var formData = JSON.stringify($("#myForm").serializeArray());
Du kan bruge det senere i ajax. Eller hvis du ikke bruger ajax; sæt det i skjult tekstområde og send det til serveren. Hvis disse data sendes som json-streng via normale formulardata, skal du afkode dem ved hjælp af json_decode. Du'vil derefter få alle data i et array.
$.ajax({
type: "POST",
url: "serverUrl",
data: formData,
success: function(){},
dataType: "json",
contentType : "application/json"
});
HTML giver ingen mulighed for at generere JSON fra formulardata.
Hvis du virkelig ønsker at håndtere det fra klienten, skal du bruge JavaScript til at håndtere det:
Du'ville nok være bedre stillet ved at holde dig til application/x-www-form-urlencoded
data og behandle det på serveren i stedet for JSON. Din formular har ikke noget kompliceret hierarki, som ville have gavn af en JSON-datastruktur.
Opdatering som svar på større omskrivning af spørgsmålet...
readystatechange
-handler, så du gør intet med svaretdin kode er fin, men den bliver aldrig udført, fordi knappen submit [type="submit"] bare erstatte den med type=button
<input value="Submit" type="button" onclick="submitform()">
inde i dit script; form er ikke deklareret.
let form = document.forms[0];
xhr.open(form.method, form.action, true);