使用AJAX无刷新发送POST请求失败，请求排查问题

我来帮你梳理下代码里的几个关键问题，正是这些细节导致你的AJAX请求没正常工作：

1. HTML标签语法错误 #

你的按钮标签里onclick属性的引号没闭合，而且标签结尾也少了个>，这会导致浏览器解析出错，点击事件根本没法触发：

<!-- 错误写法 -->
<input type="button" class="button1" onclick="send(<?=$i?>);/>

<!-- 修正后 -->
<input type="button" class="button1" value="点击发送" onclick="send(<?=$i?>);" />

2. JS中获取的数据不对 #

你用document.getElementsByClassName('button1')[Input]拿到的是按钮DOM元素本身，而不是要发送的实际数据。如果要发送按钮的文本或值，应该取它的value属性（或者你自定义的data-*属性）：

// 错误：获取的是DOM元素
var Data=document.getElementsByClassName('button1')[Input];

// 修正：获取按钮的value值作为发送数据
var Data = document.getElementsByClassName('button1')[Input].value;

3. AJAX配置的几个问题 #

• cache应该是布尔值false，不是字符串"false"；
• 虽然默认请求当前页面，但明确指定url会更稳妥；
• 你没有添加success回调函数，所以即使请求成功，也看不到返回的结果；
• 最好加上error回调，方便排查请求失败的情况。

修正后的JS代码：

function send(Input) {
    var targetBtn = document.getElementsByClassName('button1')[Input];
    var sendData = targetBtn.value; // 这里换成你实际要发送的数据，比如targetBtn.dataset.id

    $.ajax({
        type: "POST",
        url: window.location.href, // 明确指定当前页面为请求地址
        data: {name: sendData},
        cache: false,
        success: function(response) {
            // 处理返回结果，比如在控制台打印或显示到页面
            console.log("服务器返回：", response);
            alert("收到返回数据：" + response);
        },
        error: function(xhr) {
            console.error("请求失败：", xhr.statusText);
        }
    });
}

4. PHP代码的容错处理 #

当页面首次加载时（不是POST请求），$_POST['name']不存在，会抛出"Undefined index"警告，所以需要先判断请求方式：

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // 使用null合并运算符避免未定义索引的警告
    $Data = $_POST['name'] ?? '';
    echo $Data;
    exit; // 发送完数据后退出，避免把页面其他HTML内容也返回给AJAX
}
?>

把这些修改点都调整后，你的AJAX无刷新POST请求应该就能正常工作了，可以点击按钮后在浏览器控制台查看返回结果~

内容的提问来源于stack exchange，提问作者SirCascada