使用AJAX向PHP文件传递变量失败问题求助

嘿，我瞅了你的代码，发现导致AJAX传参失败的关键问题啦：

你在AJAX请求发送之后，立刻修改了.women元素的href属性，这会触发页面跳转——但AJAX默认是异步执行的，也就是说AJAX请求还没来得及完成，页面就已经跳转到data.php了。而且跳转是GET请求，你的PHP代码只处理POST请求，所以跳转后页面会显示"failure"，同时AJAX的响应也因为页面跳转被中断，自然看不到你预期的"hello"。

下面是具体的修复方案：

1. 阻止默认跳转行为 #

如果.women是<a>标签，点击它会默认触发跳转，我们需要用event.preventDefault()来阻止这个默认行为，让AJAX请求能完整执行。

2. 移除不必要的href修改 #

不需要手动修改href，如果需要在AJAX请求成功后再跳转，把跳转逻辑放在success回调里就行。

修正后的代码 #

jQuery代码：

$('.women').click(function(event){
    // 阻止默认跳转，让AJAX能正常完成
    event.preventDefault();
    var test="hello";
    $.ajax({
        type: "POST",
        url: 'data.php',
        data: {'variable':test},
        success:function(data){
            console.log(data); // 现在这里会正常输出"hello"啦
            // 要是你需要在请求成功后再跳转，就加这行：
            // window.location.href = 'data.php';
        },
        // 加个错误处理，方便调试问题
        error:function(xhr, status, error){
            console.log('AJAX请求出错啦：', error);
        }
    });
})

PHP代码（不需要修改）：

if (isset($_POST['variable'])) {
    echo($_POST['variable']);
} else {
    echo ("failure");
}

额外调试小技巧 #

打开浏览器开发者工具（按F12），切换到「Network」标签，就能看到AJAX请求的详细信息：包括请求方式、携带的参数、服务器响应内容，方便你排查后续可能出现的问题。

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