如何使用ajax通过POST向PHP后台发送按钮值

下面是如何使用ajax通过POST向PHP后台发送按钮值的完整攻略。

确定要发送的按钮值

首先，我们需要确定要发送的按钮值。在HTML页面中，我们通常会通过button、input等元素实现按钮，可以通过这些元素的value属性来获取按钮值。

例如，以下是button元素的示例：

<button id="btn1" value="value1">按钮1</button>

我们可以通过JavaScript获取按钮的值，然后使用ajax将其发送到PHP后台。

使用ajax发送POST请求

在JavaScript中，我们可以使用XMLHttpRequest对象（即ajax）发送POST请求。以下是ajax发送POST请求的基本代码：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    // 请求完成，进行处理
  }
};
xhr.open("POST", "http://example.com/example.php");
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("btn_value=" + btnValue);

其中：

• readyState属性表示请求的状态，4表示请求已完成。
• status属性表示服务器返回的状态码，200表示请求成功。
• open方法用于设置请求的方法（POST），以及请求的URL。
• setRequestHeader方法用于设置请求头。
• send方法用于向服务器发送POST请求体，这里我们将按钮值通过请求体发送。需要注意的是，请求体需要按照一定的格式编码，这里使用的是x-www-form-urlencoded格式。

在PHP后台接收POST请求

在PHP后台，我们可以通过$_POST数组获取前端发送的POST请求。例如，以下代码可以获取名为btn_value的POST请求参数的值：

$btn_value = $_POST["btn_value"];

需要注意的是，为了安全起见，我们应该对接收到的数据进行过滤、验证等操作，避免恶意数据攻击。

示例1：使用jQuery发送ajax请求

以下是使用jQuery发送POST请求的示例代码：

$("#btn1").click(function() {
  var btnValue = $(this).val();
  $.post("http://example.com/example.php",
    { btn_value: btnValue },
    function(data, status) {
      // 请求完成，进行处理
    });
});

其中：

• $方法用于选中DOM元素。
• val方法用于获取元素的value属性。
• post方法用于发送POST请求，第一个参数是请求的URL，第二个参数是请求参数，第三个参数是回调函数。

示例2：使用Fetch API发送ajax请求

以下是使用Fetch API发送POST请求的示例代码：

document.getElementById("btn1").addEventListener("click", function() {
  var btnValue = this.value;
  fetch("http://example.com/example.php", {
    method: "POST",
    headers: { "Content-type": "application/x-www-form-urlencoded" },
    body: "btn_value=" + btnValue
  }).then(function(response) {
    // 请求完成，进行处理
  });
});

其中：

• addEventListener方法用于为DOM元素添加事件监听。
• fetch方法用于发送POST请求，第一个参数是请求的URL，第二个参数是请求参数，包括方法、请求头和请求体，第三个参数是回调函数（Promise）。

希望这些示例代码能够帮助你理解如何使用ajax通过POST向PHP后台发送按钮值。