AJAX適用於jQuery，但不適用於香草JS

Question

我有一個小表單，當用戶名字段模糊或焦點不清時，AJAX會檢查輸入的用戶名是否已經記錄在數據庫中。問題在於jQuery中的AJAX有效，但不是在vanilla JS中。我需要知道我的代碼的哪一行或哪一部分出錯。

HTML

<form action="process.php" method="post"> 
    <input class="username" type="text" name="username" placeholder="Enter username" autocomplete="off"> 
    <span class="uname_notice"></span><br> 
    <input type="submit" value="Submit"> 
</form> 

jQuery的

$('.username').blur(function() { 
    var username = $(this).val(); 

    $.ajax({ 
     url: 'process.php', 
     type: 'post', 
     data: {username: username}, 
     success: function(responseText) { 
      $('.uname_notice').text(responseText); 
     } 
    }) 
}); 

香草JS

document.querySelector('.username').onblur = function() { 
    var xhr = new XMLHttpRequest(); 

    xhr.open("POST", "process.php", true); 
    xhr.onreadystatechange = function() { 
     if(xhr.readyState == 4 && xhr.status == 200) { 
      document.querySelector('.uname_notice').textContent = xhr.responseText; 
     } 
    } 
    xhr.send(); 
} 

Answer 1

與HTTP請求一起發送的數據。

document.querySelector('.username').onblur = function() { 
    var xhr = new XMLHttpRequest(); 

    var data = new FormData(); 
    var username = document.getElementsByClassName('username')[0].value; 
    data.append('username', username); 
    xhr.open("POST", "process.php", true); 
    xhr.onreadystatechange = function() { 
     if(xhr.readyState == 4 && xhr.status == 200) { 
      document.querySelector('.uname_notice').textContent = xhr.responseText; 
     } 
    } 
    xhr.send(data); 
} 

Answer 2

您忘記指定後期值。嘗試使用此：

document.querySelector('.username').onblur = function() { 

    var params = 'username='+this.value; 

    var xhr = new XMLHttpRequest(); 

    xhr.open("POST", "process.php", true); 
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;"); 
    xhr.setRequestHeader("Content-length", params.length); 
    xhr.setRequestHeader("Connection", "close"); 
    xhr.onreadystatechange = function() { 
     if(xhr.readyState == 4 && xhr.status == 200) { 
      document.querySelector('.uname_notice').textContent = xhr.responseText; 
     } 
    }; 
    xhr.send(params); 
};