기본 XMLHttpRequest 객체를 사용하여 양식을 제출하는 방법은 무엇입니까?

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>

자바스크립트:

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

내가 얻고자 하는 코드는 폼에 액션과 메소드 속성을 추가하는 것과 같습니다. 제출 후 자동으로 form.pp로 점프할 수 있습니다.
하지만 제출 시 응답이 없습니다. 이렇게 검색했는데 jquery에 관한 내용이군요. 아직 ajax를 사용하여 양식을 제출하는 형식을 모르겠습니다.

답글 내용:

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>

자바스크립트:

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

내가 얻고자 하는 코드는 폼에 액션과 메소드 속성을 추가하는 것과 같습니다. 제출 후 자동으로 form.pp로 점프할 수 있습니다.
하지만 제출 시 응답이 없습니다. 이렇게 검색했는데 jquery에 관한 내용이군요. 아직 ajax를 사용하여 양식을 제출하는 형식을 모르겠습니다.

xhr.send(serialize(form))을

로 변경해 보세요.

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

formData는 양식을 비동기식으로 제출하는 데 사용되는 HTML5이며 원본 포스터의 요구 사항을 충족해야 합니다.

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