如何使用ajax将按钮值发送到PHP后端(POST)

要使用AJAX将按钮值发送到PHP后端，你需要遵循以下步骤：

基础概念

AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过JavaScript的XMLHttpRequest对象与服务器交换数据并更新部分网页内容。

类型

GET：请求数据附加在URL后面。
POST：请求数据放在HTTP请求的消息体中。

应用场景

适用于需要在不刷新页面的情况下与服务器进行数据交互的场景，如表单提交、实时搜索建议等。

实现步骤

HTML部分

首先，创建一个简单的HTML页面，包含一个按钮和一个用于显示结果的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX POST Example</title>
</head>
<body>
    <button id="myButton" value="Hello PHP">Send to PHP</button>
    <div id="result"></div>

    <script src="script.js"></script>
</body>
</html>

JavaScript部分

接下来，编写JavaScript代码来处理按钮点击事件，并使用AJAX发送POST请求。

document.getElementById('myButton').addEventListener('click', function() {
    var xhr = new XMLHttpRequest();
    var buttonValue = this.value;

    xhr.open('POST', 'backend.php', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            document.getElementById('result').innerHTML = xhr.responseText;
        }
    };

    xhr.send('buttonValue=' + encodeURIComponent(buttonValue));
});

PHP部分

最后，编写PHP代码来接收并处理POST请求。

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (isset($_POST['buttonValue'])) {
        $buttonValue = $_POST['buttonValue'];
        echo "Received value: " . htmlspecialchars($buttonValue);
    } else {
        echo "No value received.";
    }
}
?>

可能遇到的问题及解决方法

跨域问题：如果前端和后端不在同一个域名下，可能会遇到跨域资源共享（CORS）问题。可以在PHP文件中添加以下代码来解决：
跨域问题：如果前端和后端不在同一个域名下，可能会遇到跨域资源共享（CORS）问题。可以在PHP文件中添加以下代码来解决：
数据格式问题：确保发送的数据格式与后端期望的格式一致。例如，如果后端期望JSON格式的数据，需要在JavaScript中设置Content-Type为application/json，并相应地调整发送的数据格式。
服务器配置问题：确保服务器配置允许执行PHP脚本，并且PHP环境已正确安装和配置。

参考链接

通过以上步骤，你可以成功使用AJAX将按钮值发送到PHP后端。

如何使用ajax将按钮值发送到PHP后端(POST)

、、、、

我需要使用这个按钮值： <button type="button" class="btn btn-outline-primary view_data2" id=" <?php echo $row['idFuncionarios']; ?>" value = "<?php echo $row['dia']; ?>" name = "envio&quo

浏览 23提问于2020-11-11得票数 0

回答已采纳

1回答

我如何在财富轮上节省用户的点数？

、、

html,js,output，我想在我的项目中使用它。

浏览 15提问于2020-03-28得票数 0

2回答

ajax调用后不返回任何内容

、、

下面是我的Php文件，在提交按钮后，我使用ajax调用另一个php文件来获取一些数据： <head>

浏览 0提问于2016-01-17得票数 0

1回答

AJAX -获取单选按钮的值并将其发送给PHP

、、

我一直在阅读如何使用AJAX将数据发送到PHP文件。我希望使用这些单选按钮的值，并使用<

浏览 3提问于2015-02-21得票数 0

1回答

获取所选文本

、、、

我需要得到一个文本，用户有选择与指针，并把它放到一些变量在PHP中。因此，用户应该在一个div中选择一些文本，然后单击submit按钮(在另一个div中)，然后我需要将这部分文本存储到某个变量中。

浏览 7提问于2019-05-12得票数 0

2回答

在使用cron运行ajax时，它不会执行我需要保存数据的PHP文件

、、、、

我正在尝试通过ajax使用文件add.php将数据保存到MySQL中。我正在通过cron.php获取数据。当我在浏览器中运行cron.php文件时，数据被保存，但当我通过cron作业运行时，数据不被保存。下面是我的代码： $.ajax({ url: 'add.php

浏览 0提问于2018-01-25得票数 0

3回答

当选择单选按钮时，我需要提交一份表单。单选按钮表示一些数字，我需要使用服务器端，因为我需要用这个值更新数据库等。之后，我需要的是将更新的数据库值返回给jsp并显示这个数字。所有的后端东西都不是真正的问题。我所需要的只是能够将表单数据发送到servlet，并在不重新加载页面的情况下获得更新的值。如果可能的话，我还想使用post form操作来实现这一点，但这并不重要。跳到编辑3 如果没有大约200行J

浏览 0提问于2012-02-25得票数 0

回答已采纳

1回答

如何将值从html页传递到简单的java类。

为了将值从前端页面(以html格式)传递给web服务，我被要求使用Ajax。有许多相同的教程，但我找不到一个与我的应用程序相匹配的。请告诉我该如何继续。提前感谢(我也不打算使用servlet)

浏览 4提问于2018-08-17得票数 0

1回答

使用用户界面更新mySQL表

、、、

我的问题是:我如何将任何编辑/添加/删除传递到服务器端？我将为我的添加一个链接。下面的代码将显示我当前是如何使用该表的。 $servername = "localhost"; $password = "lalalal"; $link = mysqli_connect

浏览 1提问于2020-11-05得票数 1

1回答

息票编码方法

、、、、

<form id="apply" name="apply" method="post" action="<?php echo $editFormAction; ?>">在我的代码中，我重复了数据库中的折扣值，这个值将用于数学。我也重复优惠券代码本身和总额将减少。({ ty

浏览 3提问于2015-06-10得票数 1

1回答

MYSQLI从html表格插入数据

、

我正在使用JS，它根据已经拉取的数据进行一些计算和日期预测，并将计算结果显示到HTML表中。那么，我如何使用php和mysqli从超文本标记语言复制数据并将其插入到数据库中的表中 function forecastClient() { const bankHolidays = new

浏览 22提问于2019-03-23得票数 0

1回答

PHP捕获数据并连接在一起

、

uid=582063bd-1973-42e4-8235-b28f5addf8bf如有可能，我将非常感谢您的帮助:) 我对PHP完全陌生

浏览 0提问于2017-03-01得票数 0

3回答

如何通过$.ajax传递一个变量来警告()？

、、、、

我想让用户确认删除记录，让他们点击按钮，然后按钮将值Yes发送给$_POST请求，这样我就可以用PHP删除记录，而是向我展示包含函数的javascript文件。function() { $.ajax({ type: "

浏览 3提问于2015-02-18得票数 0

回答已采纳

3回答

如何在jQuery中存储来自多个单击事件的PHP会话值？

、、、

当单击按钮时，我试图使用jQuery将一些值传递给会话变量。每个按钮都有唯一的值，当两个按钮都被点击时，我需要显示两个按钮的值。我遇到的问题是，只有一组值(从最近单击的按钮中)被转换为会话变量--如果单击第一个按钮，第一个值将被传递到会话后端，但单击第二个按钮后只会传递第二个值。通过将每个<e

浏览 5提问于2015-03-20得票数 1

回答已采纳

1回答

在javascript中使用post方法

、

我想用post方法将textarea内的文本发送到php。我创建了一个按钮，我可以将文本从文本区域提取到一个变量中。如何使用POST将变量传递给php，而不使用ajax或其他库？有简单的方法吗？如果不是，ajax是如何做到的？

浏览 4提问于2014-08-29得票数 0

回答已采纳

2回答

将从javascript函数返回的数据发送到Flask后端

、、

我有一个简单的javascript函数，该函数在单击按钮时执行，我希望从该函数向Flask后端发送一些数据。data = "I want to send this to backend"} 我将按钮值设置为“data”，然后使用表单将该值发送到后端，如下所示。()">Se

浏览 4提问于2020-12-09得票数 0

回答已采纳

2回答

将Javascript字符串传递给php字符串

、、

假设我有： var jsString="hello";我希望它传递到php字符串中：我怎样才能正确地做到这一点

浏览 4提问于2014-05-21得票数 1

回答已采纳

1回答

如何使用angularjs读取事后回复？

、、、、

<form name="ecom" action="https://www.test.com/test/secure/Payment.jsp" method="post"> <input type="hidden我使用angularjs作为前端，而nodejs作为后端。早些时候，我使用PHP作为后端，jquery or javascript作为前端，并

浏览 3提问于2015-08-14得票数 0

回答已采纳

2回答

如何在Ajax中将Button值作为变量传递？

、、、

我想使用PHP、MySQL和Ajax交换某些数据。如何将按钮中的值传递给Ajax中的URL？我要考虑什么？行‘’id‘是我的变量(PHP)<a class='commentSikayet'> <button id='commentSikayet&

浏览 3提问于2022-01-17得票数 0

回答已采纳

1回答

如何使用/不使用html表单加载带有jQuery变量的$_POST数组

、、、

我在$.ajax()和$.post()调用中遇到了一些问题，这些调用在接口端将一些变量发送到服务器端PHP进行处理。现在，我需要将这两个x-y变量发送到PHP，只需单击一个用户按钮即可将其存储在数据库中。我允许用户多次单击，但有一个提交按钮，以便只提交最终的单击值。即test.php，因为我想处理PHP代码顶部的值，但我无法在PHP端检索$x、$

浏览 0提问于2012-04-26得票数 0

点击加载更多