Ajax 不向 php 文件发送参数答案

【问题标题】：Ajax doesn't send parameter to php fileAjax 不向 php 文件发送参数
【发布时间】：2020-05-12 18:41:36
【问题描述】：

我陷入了一些简单的 javascript 代码中。基本上我想使用 AJAX 将数据从我的 javascript 文件发送到 php 文件。当我单击按钮时，我总是收到消息：没有发送任何内容。可能有一个愚蠢的错误，我必须说这是我的第一个 javascript 项目。虽然我在第一个 ajax 请求中成功地从 index.php 获取数据到 javascript 代码。

这是我的 javascript 代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
  var ajax = new XMLHttpRequest();
  ajax.open("GET", "index.php", true);
  ajax.send();
  ajax.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var data = JSON.parse(this.responseText);
      console.log(data);

      //Create the table element
      var table = document.createElement("table");
      table.setAttribute("border", 1);

    for (var a = 0; a < data.length; a++) {
        var nr_comanda = data[a].nr_comanda;
        var nr_masa = data[a].nr_masa;
        var descriere = data[a].descriere;
        var observatii = data[a].observatii;
        var total_plata = data[a].total_plata;
        var btnId = nr_comanda;
        var button = document.createElement("button");
        button.id = btnId;
        button.onclick = orderIsReady;
        //Create the row element
        var row = document.createElement("tr");
        //Create the 2 columns
        var col1 = document.createElement("td");
        var col2 = document.createElement("td");
        var col3 = document.createElement("td");
        var col4 = document.createElement("td");
        var col5 = document.createElement("td");
        var col6 = document.createElement("td");

        //Add the checkbox to the column
        col6.appendChild(button);

        //Set the text of second column
        col1.textContent = nr_comanda;
        col2.textContent = nr_masa;
        col3.textContent = descriere;
        col4.textContent = observatii;
        col5.textContent = total_plata;

        //Add columns to the row
        row.appendChild(col1);
        row.appendChild(col2);
        row.appendChild(col3);
        row.appendChild(col4);
        row.appendChild(col5);
        row.appendChild(col6);

        //Add the row to the table
        table.appendChild(row);
      }
      document.body.appendChild(table);
    }
  };

  function orderIsReady(btn_id) {
    var xhr = new XMLHttpRequest();

    xhr.onload = function() {
      if (this.response == "OK") {
        alert("OK!");
      } else {
        alert(this.response);
      }
    };
    xhr.open("POST", "Delete.php");
    xhr.send("nr_comanda=44");
  }
</script>

这是我的 php 文件：

<?php

if (isset($_POST["nr_comanda"]))
{
    $nr_comanda=$_POST["nr_comanda"];
    echo $nr_comanda;
} 
else 
{
  echo "nothing was sent";
}

?>

【问题讨论】：

你确定你的文件名是正确的吗？你能用 localhost/yourproject/delete.php 访问你的文件吗？
是的，它说同样的信息：没有发送任何东西

标签： javascript php ajax xmlhttprequest

【解决方案1】：

如果您执行 POST 请求，则必须设置内容类型标头

xhr.open("POST", "Delete.php");
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("nr_comanda="+encodeURIComponent(this.id));

【讨论】：

现在我想将按钮 ID 发送到 php 文件。当我尝试这样做时，它甚至无需按下按钮即可发送 ID。

【解决方案2】：

我看到你使用for循环来创建和附加动作onclick，如何将它分开？

let buttons = []
for (let i = 0; i < 10; i++) {
  // create your tr td and button here, but create some temporary button storage
  const button = document.createElement("button")
  buttons.push(buttonElement)
}

// append the listener after all button rendered
buttons.forEach(function(element) {
  element.onclick = doSomethingFunction
})


// send the xhr, I hope it help
function doSomethingFunction() {
    let xhr = new XMLHttpRequest();
    let formData = new FormData("nr_comanda=44");

    xhr.onload = function() {
      if (this.response == "OK") {
        alert("OK!");
      } else {
        alert(this.response);
      }
    };

    xhr.open("POST", "Delete.php");
    xhr.send(formData);
}

【讨论】：