How to submit a form using native XMLHttpRequest object?-PHP Tutorial-php.cn

How to submit a form using native XMLHttpRequest object?

WBOY

Release： 2016-08-18 09:16:21

Original

1117 people have browsed it

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>

Copy after login

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>

Copy after login

form.php

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

Copy after login

The code is as above. The effect I want to achieve is the same as adding action and method attributes to the form. After submission, it can automatically jump to form.pp.
But there is no response when submitting like this. After searching, it is all about jquery. Still don’t know the format of submitting a form using ajax.

Reply content:

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>

Copy after login

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>

Copy after login

form.php

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

Copy after login

Try changing xhr.send(serialize(form)) to

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

Copy after login

formData is HTML5 used to submit forms asynchronously, which should be able to meet the needs of the original poster.

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

<code>var fd = new FormData;
fd.append("username",document.querySelector("#username").value);
fd.append("password",document.querySelector("#password").value);
...
xhr.send(fd);</code>

Copy after login