jQuery Ajax 不将数组作为数据对象发送

Posted 2023-05-09

【中文标题】jQuery Ajax 不将数组作为数据对象发送

【英文标题】：jQuery Ajax Not Sending Array as Data Object

【发布时间】：2015-11-29 16:58:25

【问题描述】：

我正在构建一个联系表单，当用户点击提交按钮时，它会通过 ajax 调用向公司发送一封电子邮件。但是，它不会将数组变量从表单传递到 ajax php 文件。成功后将数组变量记录到控制台时似乎可以工作。但是电子邮件中缺少数据。这是我的代码示例：

$("form").submit(function(e) 
    e.preventDefault();
    if ($('#email').val() == $('#cemail').val()) 
        var arr = [];
        arr["fname"] = $('#fname').val();
        arr["lname"] = $('#lname').val();
        arr["email"] = $('#email').val();
        arr["subject"] = $('#subject').val();
        arr["newsletter"] = $('#newsletter').val();
        arr["message"] = $('#message').val();

        $.ajax(
            url: "contact-ajax.php",
            method: "POST",
            data: d: arr,
            success: function (d) 
                $('button#submit').css('background', '#A2D852');
                $('button#submit').html('Message Sent Successfully!');
                $('form').get(0).reset();
                //alert(d);
                console.log(arr);
                setTimeout( function()                 
                    $('button#submit').css('background', '#FF8A00');
                    $('button#submit').html('Send Message <img src="contact/images/loading-icon.gif" id="loading-icon">');
                    $('#loading-icon').hide();
                ,3000);
            ,
            error: function(jqXHR, textStatus) 
                $('button#submit').css('background', '#F75D53');
                $('button#submit').html('Failed to send. Please try again!');
                setTimeout( function()                 
                    $('button#submit').css('background', '#FF8A00');
                    $('button#submit').html('Send Message <img src="contact/images/loading-icon.gif" id="loading-icon">');
                    $('#loading-icon').hide();
                ,4000);                    
            
        );
    
    else 
        alert("Your confirmation email does not match your email.");
        return false;
    
);

var_dump($d) 在控制台中返回 null，但 console.log(arr) 返回有效数组。任何帮助将不胜感激。

【问题讨论】：

试试这个：data: JSON.stringify(d: arr)

@leo.fcx 仍然返回 null。

使用浏览器开发者工具的网络标签来检查发送的请求。您应该能够看到已（或未）发送到您的服务器的请求负载。

【参考方案1】：

不要使用数组，而是使用对象。

$("form").submit(function(e) 
    e.preventDefault();
    if ($('#email').val() == $('#cemail').val()) 

        // from this 
        // var arr = [];
        // arr["fname"] = $('#fname').val();
        // arr["lname"] = $('#lname').val();
        // arr["email"] = $('#email').val();
        // arr["subject"] = $('#subject').val();
        // arr["newsletter"] = $('#newsletter').val();
        // arr["message"] = $('#message').val();

        // to this :

        var dataObj =  fname: $('#fname').val(),
                        lname:  $('#lname').val(),
                        email: $('#email').val(),
                        subject: $('#subject').val(),
                        newsletter: $('#newsletter').val(),
                        message: $('#message').val();


        $.ajax(
            url: "contact-ajax.php",
            method: "POST",
            data: dataObj,
            success: function (d) 
                $('button#submit').css('background', '#A2D852');
                $('button#submit').html('Message Sent Successfully!');
                $('form').get(0).reset();
                //alert(d);
                console.log(arr);
                setTimeout( function()                 
                    $('button#submit').css('background', '#FF8A00');
                    $('button#submit').html('Send Message <img src="contact/images/loading-icon.gif" id="loading-icon">');
                    $('#loading-icon').hide();
                ,3000);
            ,
            error: function(jqXHR, textStatus) 
                $('button#submit').css('background', '#F75D53');
                $('button#submit').html('Failed to send. Please try again!');
                setTimeout( function()                 
                    $('button#submit').css('background', '#FF8A00');
                    $('button#submit').html('Send Message <img src="contact/images/loading-icon.gif" id="loading-icon">');
                    $('#loading-icon').hide();
                ,4000);                    
            
        );
    
    else 
        alert("Your confirmation email does not match your email.");
        return false;
    
);

【讨论】：

哇，这解决了。使数组成为一个对象实际上是有效的。

@Daniel 太棒了！很高兴它有帮助！

【参考方案2】：

如果你尝试像这样在 ajax 中发送一个数组，它将不会在设置页面中发送

  var minprice = jQuery('#minPrice').val();
  var maxprice = jQuery('#maxPrice').val();
  var data =[];
  data['min'] = minprice;
  data['max'] = maxprice;

这是数组，不是这样的。如果您在 ajax 中发送此数组，则数组创建如下。

var data =;

像这样创建数组

【讨论】：

var data =; 这是声明对象，而不是数组。

【参考方案3】：

$("#YourFormNameGoesHere").submit(function(e) 
    e.preventDefault();
    if ($('#email').val() == $('#cemail').val()) 
        var form_data = new FormData($('#YourFormNameGoesHere')[0]);
        $.ajax(
            url: "contact-ajax.php",
            method: "POST",
            data: form_data,
            async: true,
            cache:false,
            contentType: false,
            processData: false,
            success: function (d) 
                $('button#submit').css('background', '#A2D852');
                $('button#submit').html('Message Sent Successfully!');
                $('form').get(0).reset();
                //alert(d);
                console.log(arr);
                setTimeout( function()                 
                    $('button#submit').css('background', '#FF8A00');
                    $('button#submit').html('Send Message <img src="contact/images/loading-icon.gif" id="loading-icon">');
                    $('#loading-icon').hide();
                ,3000);
            ,
            error: function(jqXHR, textStatus) 
                $('button#submit').css('background', '#F75D53');
                $('button#submit').html('Failed to send. Please try again!');
                setTimeout( function()                 
                    $('button#submit').css('background', '#FF8A00');
                    $('button#submit').html('Send Message <img src="contact/images/loading-icon.gif" id="loading-icon">');
                    $('#loading-icon').hide();
                ,4000);                    
            
        );
    
    else 
        alert("Your confirmation email does not match your email.");
        return false;
    
);