为什么数据没有从ajax传递到php

Question

我正在使用以下表格

<form id="dataForm" method="post">
  <h2 id="formheader"> Update Description</h2>
    <div>
      <label>Product Name:</label>
      <input class="inputForm" id="orginalName" type="text" name="Name">
    </div>
    <div>
      <label>New Description:</label>
      <input class="inputForm" id="newDescription" type="text" name="description">
    </div>
    <div id="theSubmit">
      <button id="editDesButton">Submit</button>
    </div>
  </form>
</section>

以及以下javascript函数

function editDescription(){
    xmlhttp = new XMLHttpRequest();
    var name = document.getElementById("orginalName");
    var Description = document.getElementById("newDescription");

    var data_seen = false;
        // this is a flag to record whether any data has been seen. Used in the guard ofthe alert statement.
    if (name.value !="" && Description.value !=""){
        data_seen = true;
        xmlhttp.open("POST","editDescription.PHP",true);
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send("Name=" + name.value + "&Description=" + Description.value);
    }
    if (!data_seen) {
        alert("please enter some data");
    }
   }

submitButton = document.getElementById("editDesButton");
submitButton.addEventListener("click", editDescription);

和PHP的一点点

$Name = $_POST['Name'];
     $Description = $_POST['description'];

     if($Name !="" && $Description !=""){
     $sql = "UPDATE PRODUCTS SET P_Description = '$Description' WHERE P_NAME = '$Name'";
     $conn->exec($sql); 

如果我运行表单并使用action="editDescription.php则将运行sql并将表更新为我想要的方式，但是当我在单击按钮时对事件运行javascript时，不会传递值我不明白为什么，有人能指点吗？

Answer 1

当您使用提交功能时，浏览器会自己（正确）对字段进行编码。 在您的js代码中，您不是urlencoding。 在大多数情况下，如果您在字段或其他需要编码的角色中输入空格，则会失败。 第二件事，在下面的行中，您必须在“说明”字段中使用小写的“ d”。 PHP是区分大小写的。 （我建议您始终使用小写的字段名以避免错误）

尝试：

 xmlhttp.send(encodeURI("Name=" + name.value + "&description=" + Description.value));

也许还有更多问题。 就像Pierre Emmanuel所说的那样，请使用javascript控制台，尤其是使用“网络”标签来监视您通过网络发送的内容。 您还可以通过var_dump($_POST);查看PHP接收到的内容var_dump($_POST); 例如。 （或var_dump(file_get_contents("php://input"));如果第一个命令失败。）

Answer 2

将您的JavaScript代码更改为jQuery：

function editDescription(){
var name = $('#orginalName').val();  //getting input field value
var description= $('#newDescription').val(); //getting input field value
$.ajax({//create an ajax request to Your.php
type: "POST",
url: "Your.php",   //your php file name
data:{"name ":name,"description":description},
success: function(data) {
    if (data) {

       alert(data);
    }
    else {
        alert('Successfully not posted.');
    }
}
});
}
submitButton = document.getElementById("editDesButton");
submitButton.addEventListener("click", editDescription);

Your.php

 $Name = $_POST['name'];
 $Description = $_POST['description'];

 if($Name !="" && $Description !=""){
 $sql = "UPDATE PRODUCTS SET P_Description = '$Description' WHERE P_NAME = '$Name'";
 $conn->exec($sql);