Ajax 没有将变量传递到另一个页面？答案

【问题标题】：Ajax is not passing variable to another page?Ajax 没有将变量传递到另一个页面？
【发布时间】：2019-09-01 23:02:18
【问题描述】：

我想在用户email 点击订阅按钮时将他保存到数据库中。但是当我输入电子邮件并单击订阅按钮时，它会传递一个空数组！

订阅表格代码：

<form id="cx-subscribe-user">
    <input type="text" name="email" id="email" placeholder="Enter Your Email" />
    <button type="submit" id="subscribe-button">Subscribe</button>
</form>

JS代码：

$('#cx-subscribe-user').on('click', function (e) {
    e.preventDefault();
    var email = $('#email').val();
    $.ajax({
        type: "GET",
        url: "subscribe-the-user.php",
        processData: false,
        dataType: 'json',
        data: {email: email},
        success: function(data) {
            console.log('saved scucess');
        }
    });
});

在subscribe-the-user.php 文件中，我正在尝试 var_dump 请求，但它正在打印空数组：

var_dump($_GET);exit;

在 var_dump 我收到这个空数组 array(0) {}

【问题讨论】：

GET，如果您不使用POST
url: "subscribe-the-user.php", 必须是 url: "subscribe-the-user.php"+email, 并删除 data: {email: email},
您以后访问该页面时不会保存数据。这不是它的工作原理。
您可以点击表单，而不是提交按钮。它应该是提交或点击按钮
改用.on('submit'。使用onclick 每次点击表单，就像用鼠标指针选择一个字段会导致点击一样。当然，此时该字段中将没有数据

标签： javascript php arrays ajax

【解决方案1】：

删除processData，如文档所述，它会弄乱您的请求

processData（默认：true）

类型：布尔值

默认情况下，传入的数据将数据选项作为对象（技术上，除了 string) 将被处理并转换为查询字符串，适合到默认的内容类型“application/x-www-form-urlencoded”。如果要发送 DOMDocument 或其他未处理的数据，请设置此选项为假。 https://api.jquery.com/jQuery.ajax/

【讨论】：

【解决方案2】：

问题是您在<form> 对象上使用了onclick() 事件，因此，只要您单击电子邮件输入字段以添加一些数据，就会触发表单onclick() 事件并且ajax 请求将在没有的情况下发生email 字段中的任何数据都向 PHP 提交空的 email 参数。

将表单 onclick() 更改为按钮 click() 或表单 submit()

$('#subscribe-button').on('click', function (e) {

也删除processData: false, [基于文档：-jQuery ajax documentation]

processData (default: true) 类型: Boolean 默认传入的数据将数据选项作为对象（技术上，除了 string) 将被处理并转换为查询字符串，适合到默认的内容类型“application/x-www-form-urlencoded”。 如果要发送 DOMDocument 或其他未处理的数据，请设置此选项为 false。

【讨论】：

是的，问题是由于processData: false，一旦我删除它就开始工作了！非常感谢朋友。
@Iftikharuddin 您需要将表单 onclick 更改为 button onclick 以获得更好的体验。
我已在表单上将其更改为onSubmit！那么将其更改为单击按钮会更好吗？

【解决方案3】：

在发送您的请求之前，电子邮件需要一些编码

$.ajax({
    url: "ajax.php",
    type:'get',
    data: { email: encodeURIComponent(email)},
    dataType: 'json',
    success: function(response) {
      //Do Something
    },
    error: function(xhr) {
    //Do Something to handle error
    }
});

【讨论】：

除非使用onClick，否则点击很有可能会在鼠标处于空白状态时选择字段。 OnSubmit 会是更好的选择
是的，可能我也在考虑这个案例，并且由于多种原因（验证，状态..），确定 onSubmit 是正确的选择（验证，状态..）

【解决方案4】：

您可以使用POST 方法来做到这一点

$('#cx-subscribe-user').on('click', function (e) {
    e.preventDefault();
    var email = $('#email').val();
    $.ajax({
        type: "POST",
        processData: false,
        dataType: 'json',
        data: {email: email},
        url: "subscribe-the-user.php",
        success: function(data) {
            console.log('saved success');
        }
    });
});

【讨论】：