javascript - $jsonObj 数据未通过 ajax 传递，仅在 IE(11) 上通过 POST

Question

我正在尝试使用 ajax 通过 post 将数据传递到我的 sendjs.php。

jsonObj 不仅在 IE11 中被传递(没有测试过较低版本的 IE，但它在 Edge 和所有其他浏览器中工作)。 FormData 和 captchaResponse 正在传递。

在 IE 11 检查器的“网络”中，发布数据是:

cart: [null] 控制台中没有错误显示。

它包含数据的所有其他浏览器:

例如。 购物车:{名称:“130 升聚丙烯 Soakwells”，价格:“39.95 美元”，数量:“4”，总计:“159.80 美元”}，...]

实时站点在这里:www.diysoakwells.com.au (您可以添加项目并结帐以进行测试)。

我花了很长时间试图找到原因，老实说，现在我什至不确定从这里去哪里，所以任何信息将不胜感激，我将根据要求用任何信息更新帖子。

应用程序.js

$(function() {


    // Get the form.
    var form = $("#ajax-contact");

    // Get the messages div.
    var formMessages = $("#form-messages");

    var spinner = $("#spinner");

    var submit = $("#submit");

    // Set up an event listener for the contact form.
    $(form).submit(function(e) {
        // Stop the browser from submitting the form.
        e.preventDefault();

        //display the cog animation
        $(spinner).removeClass("hidden");
        //hide the submit button
        $(submit).addClass("hidden");



        var jsonObj=[];
        for(i=1;i<$(".item-price").length;i++)
        {
            var items={};
            var itemname = $(".item-name").get(i);
            var itemprice = $(".item-price").get(i);
            var itemquantity = $(".item-quantity").get(i);
            var itemtotal = $(".item-total").get(i);
            items["name"] = itemname.innerHTML;
            items["price"] = itemprice.innerHTML;
            items["quantity"] = itemquantity.innerHTML;
            items["total"] = itemtotal.innerHTML;
            jsonObj.push(items);

        }

        console.log(jsonObj );

        var formdata = {};
        formdata["textbox"] = $("#textbox").val();
        formdata["name"] = $("#name").val();
        formdata["phone"] = $("#phone").val();
        formdata["email"] = $("#email").val();
        formdata["address"] = $("#address").val();
        formdata["grandtotal"] = simpleCart.grandTotal();

        var x = 
        {
            "cart" : jsonObj,
            "formdata" : formdata,
            "captchaResponse" : $("#g-recaptcha-response").val()
        };
        //jsonString = jsonObj+formdata;
        var y = JSON.stringify(x);
        console.log(y);
        var result = jQuery.parseJSON(y);
        console.log(result);


        // Serialize the form data.
        //var formData = $(form).serialize();

        // Submit the form using AJAX.
        $.ajax({
            type: "post",
            url: "sendjs.php" ,
            //url: $(form).attr("action"),
            data: y,
            contentType: "application/json; charset=utf-8",
            processData: false,
            success: function (response) {
                        if(response=="Thank You. Your order has been sent and a copy mailed to your inbox.")
                        {
                    //remove the button animation
                    $(spinner).addClass("hidden");
                    $(formMessages).removeClass("error");
                    $(formMessages).addClass("success");
                    $("#textbox").val("");
                    $("#name").val("");
                    $("#email").val("");
                    $("#message").val("");
                    $("#phone").val("");
                    $("#address").val("");

                        }
                        else
                        {
                    $(formMessages).removeClass("success");
                    $(formMessages).addClass("error");
                    $(spinner).addClass("hidden");
                    $(submit).removeClass("hidden");
                        }

                $(formMessages).text(response);

            }
        });
    });

});

发送js.php

<?php
//Debugging
//ini_set( 'display_errors', 1 );
//error_reporting( E_ALL );

//replaces file_get_contents due to restrictions on server
function get_data($url)
    {
      $ch = curl_init();
      $timeout = 5;
      curl_setopt($ch,CURLOPT_URL,$url);
      curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
      curl_setopt($ch,CURLOPT_CONNECTTIMEOUT,$timeout);
      $data = curl_exec($ch);
      curl_close($ch);
      return $data;
    }

    //turn url_fopen on due to restrictions on server
    //ini_set('allow_url_fopen', true);

    date_default_timezone_set('Australia/Perth');
    $time = date ("h:i A"); 
    $date = date ("l, F jS, Y");
    $json = file_get_contents('php://input');
    $obj = json_decode($json,true);
    $captcha = $obj["captchaResponse"];
    $captcha;
    $secretKey = "scrubbed";
    $ip = $_SERVER['REMOTE_ADDR'];
    $response = get_data("https://www.google.com/recaptcha/api/siteverify?secret=".$secretKey."&response=".$captcha."&remoteip=".$ip);

    //not used due to server restictions
    //$response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$secretKey."&response=".$captcha."&remoteip=".$ip);

    $responseKeys = json_decode($response,true);

    if(intval($responseKeys["success"]) !== 1) {
        echo "Please Click on the Captcha";
        return false;
    }
    else 
    {
    //echo $items;
    $name = $obj["formdata"]["name"];
    $phone = $obj["formdata"]["phone"];
    $email = $obj["formdata"]["email"];
    $textbox = $obj["formdata"]["textbox"];
    $address = $obj["formdata"]["address"];
    $grandtotal  = $obj["formdata"]["grandtotal"];
    $text = "<html style='font-family:arial'>
    <body>
        <h1 style='color:crimson;'>DIY Soakwells</h1>
        <p>This order was submitted from www.diysoakwells.com.au on $date at $time</p>
        <p>$name thank you for your order inquiry. Deliveries are normally every Friday, we will be in contact shortly to discuss your order and confirm a time.</p>
        <p>An invoice will be issued after delivery for payment via bank transfer.</p>
        <p>In the meantime if you haven't already seen it, you can take a look at www.soakwellcalculator.com.au to confirm the number of soakwells you ordered will be adequate.</p>
        <br>

        <h2 style='color:crimson;'>CUSTOMER DETAILS</h2>
        <p><b>Email:</b>\n$email</p>
        <p><b>Name:</b>\n$name</p>
        <p><b>Phone:</b>\n$phone</p>
        <p><b>Delivery Address:</b>\n$address</p>
        <p><b>Message:</b>\n$textbox</p>
        <br>

        <h2 style='color:crimson;'>ORDER DETAILS</h2>";

        $items_in_cart = count($obj["cart"]);
        for($i=0; $i < $items_in_cart; $i++) {
            $iname = $obj["cart"][$i]["name"];
            $price = $obj["cart"][$i]["price"]; 
            $quantity = $obj["cart"][$i]["quantity"];
            $total = $obj["cart"][$i]["total"];
            //display looped cart data      
            $items .= "<p>$iname x $quantity - $price <small>ea.</small> <b>Sub Total: </b> $total .</p>";
        }

        $final_total ="<br>
        <p><b>Total: </b>$$grandtotal <small>inc. GST</small></p>
        </body>
        </html>";

        //Email Content
        $body = $text.$items.$final_total;

        // Set the email subject.
        $subject = "New order from $name";

        // Build the email content.
        $email_content = $body;

        // Build the email headers.
        $email_headers = 'MIME-Version: 1.0' . PHP_EOL;
        $email_headers .= 'Content-Type: text/html; charset=ISO-8859-1' . PHP_EOL;
        //$email_headers .= 'To:' . $name . '<' . $email . '>' . PHP_EOL;
        $email_headers .= 'From: DIY Soakwells <orders@diysoakwells.com>' . PHP_EOL;
        $email_headers .= 'CC: orders@diysoakwells.com.au' . PHP_EOL;
        $email_headers .= 'Reply-To: DIY Soakwells <orders@diysoakwells.com.au>' . PHP_EOL;
        $email_headers .= 'Return-Path: DIY Soakwells <orders@diysoakwells.com>' . PHP_EOL;
        $email_headers .= 'X-Sender: DIY Soakwells <orders@diysoakwells.com.au' . PHP_EOL;
        $email_headers .= 'X-Mailer: PHP/' . phpversion() . PHP_EOL;
        //$email_headers .= 'X-Priority: 1' . PHP_EOL;



        //validate Email
        $email_check = filter_input(INPUT_POST, $email, FILTER_VALIDATE_EMAIL);
        //Recipients
        $to = $email;

        if (mail($to, $subject, $email_content, $email_headers, '-forders@diysoakwells.com.au')) {
            // Set a 200 (okay) response code.
            //http_response_code(200);
            echo "Thank You. Your order has been sent and a copy mailed to your inbox.";
        } else {
            // Set a 500 (internal server error) response code.
            //http_response_code(500);
            echo "There appears to be an issue with our server, please ring 0420 903 950 or email contact@diysoakwells.com.au.";
        }      
    }       
?>

希望有人能给我一些提示。

编辑:添加了购物车模式 html

<!-- cart modal panel -->               
<section class="modal fade cartModal" role="dialog" tabindex="-1">

<div class="modal-dialog" role="document">
<div class="modal-content">

<!-- Modal Header-->                
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

        <h3 class="modal-title cart_summary">
            <b>Cart Summary</b>
        </h3>       
    </div>

<!-- Cart Modal Body -->
<section class="modal-body">
        <div class="checkout">

            <!-- Cart Items -->
            <div class="simpleCart_items"></div>

                    <!-- Cart Items Footer -->
                <div class="panel-footer">
                <div class="row">
                    <div class="col-xs-12 col-sm-4 cart_modal_btn">
                        <a class="btn btn-default btn-sm" onclick="simpleCart.empty();">Clear Cart</a>
                    </div>
                    <div class="col-xs-12 col-sm-8 cart_footer_text">
                        <span class="total">Current Total: &nbsp;
                        <b class="simpleCart_grandTotal"></b>   
                        <small class=gst>Inc. GST</small>
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <div>
            <h3 class="cart_summary">           
                <b>Checkout</b>
            </h3>
        </div>

<!-- Customer Details Form -->
    <section class="details_form">
        <b class="invoice_info">Due to the custom nature of this service we do not take payment until your order is confirmed and the materials are delivered.</b>

        <b class="invoice_info">You will be emailed an invoice with our account details. Payment terms are 5 days from the invoice date please.</b>

        <p class="invoice_info">For payment we accept bank transfer and VISA / Master Card <small>(2.3% surcharge for credit cards).</small></p>

        <form id="ajax-contact" class="contact_form" method="post"> 
            <fieldset>                  
                <h4 class="contact_form_title">Questions / Additional Information</h4>

                <div class="textbox_container">
                    <textarea rows="5" style="overflow-y:hidden" class="textbox" name="textbox" id="textbox"></textarea>
                </div>

                <h4 class="contact_form_title">Customer Details</h4>    

                <table>
                    <tr>
                        <th><label for="name" class="cart_label">Enter Name</label></th>
                        <td><input type="text" name="name" placeholder="Name Required" class="input" id="name" required /></td>
                    </tr>
                    <tr>
                        <th><label for="phone" class="cart_label">Enter Phone Number</label></th>
                        <td><input type="tel" placeholder="Phone Number Required" name="phone" class="input" id="phone" required/></td>             
                    </tr>
                    <tr>
                        <th><label for="emaile" class="cart_label">Enter Email</label></th>
                        <td><input type="email" placeholder="Email Required" name="emaile" class="input" id="emaile" required/></td>
                    </tr>
                    <tr>                            
                        <th><label for="address" class="cart_label">Enter Address</label></th>
                        <td><input type="text" name="address" placeholder="Address / Suburb" class="input" id="address" required/></td>
                    </tr>
                </table>
            </fieldset>

                <!-- captcha -->
            <div class="captcha_container">
                <div class="g-recaptcha" data-sitekey="6LfPjyMTAAAAANe_qucSV5ZFAuDNO4Ud524-NGoa" data-size="compact"></div>
            </div>


            <section class="fb_container">
                <div class="fb-like" data-href="http://www.facebook.com/DiySoakwells" data-layout="button_count" data-width="225" data-action="like" data-show-faces="false" data-share="true"></div>
            </section>
            <br/><!-- css this -->



            <fieldset class="submit">

                <div class="formMessages submit_field"></div>

                <div id="spinner" class="hidden success submit_field"><i class="loader2"></i></div>

                <input id="submit" type="submit" name="Submit" value="Send" style="cursor:pointer" class="success"/>
            </fieldset>

        </form>
    </section>
</section>      


<!-- Modal Footer-->
<section class="modal-footer">
        <button type="button" class="btn btn-default close" aria-label="Close" data-dismiss="modal">Back to Shop</button>
</section>

</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

</section><!-- /.main section -->

简单的购物车配置

simpleCart({
//Setting the Cart Columns for the sidebar cart display.
cartColumns: [
//{ attr: "image", label: false, view: "image"},
//Name of the item
{ attr: "name" , label: "Item" },
//Quantity displayed as an input
{ attr: "quantity", label: "Qty", view: "input"},



    //Price of item
    //{ attr: "price", label: "Price", view: "currency"},
    //Subtotal of that row (quantity of that item * the price)
    { attr: "total" , label: "SubTot", view: "currency"  }
],
cartStyle: "table" ,
checkout: {
type: "SendForm" ,
url: "/php/sendjs.php" ,
method: "POST" ,




}

});

simpleCart.bind( 'beforeCheckout' , function( data ){
data.name = document.getElementById("name").value;
data.textbox = document.getElementById("textbox").value;
data.emaile = document.getElementById("emaile").value;
data.phone = document.getElementById("phone").value;
data.address = document.getElementById("address").value;
});

到 simplecart.js 的代码笔链接

Copy of simplecart.js

Answer 1

更新 2

您的代码在这里使用 items，而不是 item，这对我来说很好用。我检查了您使用 item 的实时网站，发现该代码不 工作，它显示了您描述的问题。我在本地复制了那个实时的、损坏的代码，并能够如下所述解决问题。

更新

我在没有理解的情况下偶然发现了解决方案(如下所述)。经过更多研究，我现在找到了问题的原因:item is defined as a native function in IE .

• Related question 1
• Related Question 2
• Related Question 3

我是如何偶然发现答案的

我在本地复制了您的代码并试用了它。我注意到 jsonObj 创建正常，尽管内容看起来很奇怪。同样，x 创建正常，但在 JSON.stringify 之后，您的购物车内容丢失了。

console.dir(jsonObj) 显示它是一个对象数组，但每个对象都显示为一个名为 item 的函数 - 仅在 IE11 中:

在 Chrome 中，它是一个普通对象数组。

该函数的名称 (item) 看起来很奇怪，考虑到它是您存储购物车商品的对象的名称。并且 JSON.stringify 在函数将返回 null - 这样就可以解释它了。

再次检查您的代码，我注意到您没有在任何地方声明 item。我尝试只添加:

var item;

在您的 for (i=1...) 循环之外，这为我解决了! JSON.stringify 不会丢失购物车内容，并且 devtools 会显示购物车并且您的其他数据已成功发布。

也许 item 在其他地方(在 SimpleCart 中？)声明为函数，这会妨碍吗？ 更新 是的，这正是正在发生的事情，尽管它是由浏览器本身声明的，而不是在任何 JS 中。