Wie sende ich ein Formular mit dem nativen XMLHttpRequest-Objekt?

HTML:

<code><form id="info">
    <label for="id">ID: </label>
    <input type="text" name="id">
    <br>
    <label for="user">User: </label>
    <input type="text" name="user" id="user">
    <br>
    <input type="submit" name="submit" id="submit">
</form></code>

JavaScript:

<code>var submit = document.getElementById("submit");
        submit.onclick = function() {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function(){
                if(xhr.state == 4) {
                    if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
                        console.log(xhr.responseText);
                    } else {
                        alert("HttpRequest was unsccessful: " + xhr.status);
                    }
                }
            }
            xhr.open("post", "form.php", true);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            var form = document.getElementById("info");
            xhr.send(serialize(form));
    }</code>

form.php

<code><?php 
$id = $_POST['id'];
$user = $_POST['user'];
echo $id . $user;
?></code>

Der Code ist wie oben. Der Effekt, den ich erzielen möchte, ist derselbe wie beim Hinzufügen von Aktions- und Methodenattributen zum Formular. Nach dem Absenden kann automatisch zu form.pp gesprungen werden. Beim Absenden erfolgt jedoch keine Antwort So. Ich habe gesucht, es dreht sich alles um JQuery. Ich kenne immer noch nicht das Format zum Senden eines Formulars mit Ajax.

Antwortinhalt:

HTML:

<code><form id="info">
    <label for="id">ID: </label>
    <input type="text" name="id">
    <br>
    <label for="user">User: </label>
    <input type="text" name="user" id="user">
    <br>
    <input type="submit" name="submit" id="submit">
</form></code>

JavaScript:

<code>var submit = document.getElementById("submit");
        submit.onclick = function() {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function(){
                if(xhr.state == 4) {
                    if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
                        console.log(xhr.responseText);
                    } else {
                        alert("HttpRequest was unsccessful: " + xhr.status);
                    }
                }
            }
            xhr.open("post", "form.php", true);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            var form = document.getElementById("info");
            xhr.send(serialize(form));
    }</code>

form.php

<code><?php 
$id = $_POST['id'];
$user = $_POST['user'];
echo $id . $user;
?></code>

Der Code ist wie oben. Der Effekt, den ich erzielen möchte, ist derselbe wie beim Hinzufügen von Aktions- und Methodenattributen zum Formular. Nach dem Absenden kann automatisch zu form.pp gesprungen werden. Beim Absenden erfolgt jedoch keine Antwort So. Ich habe gesucht, es dreht sich alles um JQuery. Ich kenne immer noch nicht das Format zum Senden eines Formulars mit Ajax.

Versuchen Sie,

in

zu ändern xhr.send(serialize(form))

formData ist HTML5, das zur asynchronen Übermittlung von Formularen verwendet wird und die Anforderungen des ursprünglichen Posters erfüllen sollte.

<code>var formData = new FormData(form);
xhr.send(formData);</code>

Referenz http://www.cnblogs.com/lhb25/...