带ajax的发布方法

Question

我想使用javascript将数据发送到另一个php页面，但它没有像预期的那样工作。

<form id="myForm">
        <label for="name">Username</label>
        <input type="text" name="name" id="name">
        <label for="pass">Password</label>
        <input type="password" name="pass" id="pass">
        <button id="submit" type="submit" >OK</button>
</form>

和脚本。

   const myForm = document.getElementById('submit');

myForm.addEventListener('submit', function(e){
    e.preventDefault();

    const data = new FormData(this);

var xhr = new XMLHttpRequest();
xhr.open('POST', 'getData.php', true);
xhr.onload = function () {
    // do something to response
    console.log(this.responseText);
};
xhr.send(data);
});

该php文件目前无法接收数据。如何用ajax或其他类似的代码来解决？

Answer 1

更改按钮

<button id="submit" type="button" onclick="sendData()" >OK</button>

然后添加javascript功能。

<script>
  function sendData(){

    var name = document.getElementById("name");
    var password = document.getElementById("pass");

     if (name) {
         $.ajax({  
             type:"POST",  
             url:"path-to-php-file.php",  
             data:'name='+name+'&pass='+password,
             success:function(data){  
                alert(data);                            
             }  
      });   
  }
</script>

然后创建php文件，你将得到data.path-to-php-file.php。

<?php 
  $name = $_POST['name'];
  $password = $_POST['pass'];

  echo $name .'--'.$password; 
?>

Answer 2

如果不看你的php代码，我无法判断到底是什么问题，可能是你的代码有问题。Content-Type 头部。

document.getElementById('submit').addEventListener('submit', (e) => {
    e.preventDefault();

    const data = new FormData(this); // Here 'this' will not work, you gotta loop through the inputs and append them to the FormData object.

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
    // do something
}
xhr.open('POST', 'getData.php', true);
// the default content type is application/x-www-form-urlencoded
xhr.setRequestHeader("Content-Type", "<content type here>")
xhr.send(data);
});

额外的

我的建议是，在你的情况下，你并不真正需要表单元素，你可以把按钮做成一个普通的按钮，然后把表单做成一个div(没有特别的好处，只是代码简洁)。你可以把按钮做成一个普通的按钮，而把表单做成一个div(没有什么特别的好处，只是为了代码简洁)。给表单分配一个函数 onclick 事件，然后循环输入并将其追加到表单数据中（如果内容类型是 application/x-www-form-urlencoded)对象，并将其发送到服务器上。如果你有一个复杂的表单，比如像谷歌或微软的交互式表单，请使用这个方法。

如果你按照我的方法，你也不想使用 preventDefault() 方法。

这是大多数专业人士会做的。