在 IE9 + 跨域中通过 ajax (jquery) 提交表单答案

【问题标题】：Submitting a form via ajax (jquery) in IE9 + crossdomain在 IE9 + 跨域中通过 ajax (jquery) 提交表单
【发布时间】：2015-08-03 14:29:02
【问题描述】：

我希望你能帮助我。我在页面上有一个注册表单。该表单需要通过 AJAX 提交到不同的服务器（跨域）。

这是表格：

<form id="remindMe" method="post">
   <input type="text" name="firstname" id="firstname" required>
   <input type="text" name="lastname" id="lastname" required>
   <input type="email" name="email" id="email" required>
   <input type="submit" value="Submit">
</form>

这是我提交表单的 jQuery 代码：

$("#remindMe").submit(function() {
    $.post('https://other-server.com/form.php', $('#remindMe').serialize()).done(function({ 
        $('#remindMe').hide(); 
        $('#remindSub').hide(); 
        $('#successMail').show();
    }); 
   return false;
});

这是form.php

<?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
header('Access-Control-Max-Age: 1000');
header('Access-Control-Allow-Headers: Content-Type');
require "config.php";

$firstname = $con->real_escape_string($_POST['firstname']);
$lastname = $con->real_escape_string($_POST['lastname']);
$email = $con->real_escape_string($_POST['email']);

$con->query("INSERT INTO form (firstname,lastname,email)
VALUES ('$firstname','$lastname','$email')");

$con->close();
?>

这在所有主流浏览器上都非常有效，除了 IE9（和更早的版本）。据我所知，这是一个跨域问题，因为 IE9 使用 xdomainrequest 提交表单数据。但我不知道如何编辑我的代码以使其在 IE9 上运行。

感谢您的帮助。

【问题讨论】：

为什么不尝试检测IE9并在这种情况下使用XMLHttpRequest，例如：var ajax = new XMLHttpRequest(); ajax.upload.addEventListener("progress", progressHandler1, false); ajax.addEventListener("load", completeHandler1, false); ajax.addEventListener("错误", errorHandler1, false); ajax.addEventListener("abort", abortHandler1, false); ajax.open("POST", "/[[你的 URL]]"); ajax.send(数据);
对于跨域，IE要求我使用XDomainRequest而不是XMLHttpRequest。据我所知。

标签： jquery ajax post internet-explorer-9 cross-domain

【解决方案1】：

好的，现在可以使用了。事情是这样的：

在 IE9 中不能跨域提交真实的帖子数据。但是，RAW 发布数据是可能的。

所以，我遇到了一个非常有用的 sn-p 代码，我将其添加到我的 javascript 中。 JavaScript 代码现在如下所示：

$("#remindMe").submit(function() {

if ( window.XDomainRequest ) {
jQuery.ajaxTransport(function( s ) {
    if ( s.crossDomain && s.async ) {
        if ( s.timeout ) {
            s.xdrTimeout = s.timeout;
            delete s.timeout;
        }
        var xdr;
        return {
            send: function( _, complete ) {
                function callback( status, statusText, responses, responseHeaders ) {
                    xdr.onload = xdr.onerror = xdr.ontimeout = jQuery.noop;
                    xdr = undefined;
                    complete( status, statusText, responses, responseHeaders );
                }
                xdr = new XDomainRequest();
                xdr.onload = function() {
                    callback( 200, "OK", { text: xdr.responseText }, "Content-Type: " + xdr.contentType );
                };
                xdr.onerror = function() {
                    callback( 404, "Not Found" );
                };
                xdr.onprogress = jQuery.noop;
                xdr.ontimeout = function() {
                    callback( 0, "timeout" );
                };
                xdr.timeout = s.xdrTimeout || Number.MAX_VALUE;
                xdr.open( s.type, s.url );
                xdr.send( ( s.hasContent && s.data ) || null );
            },
            abort: function() {
                if ( xdr ) {
                    xdr.onerror = jQuery.noop;
                    xdr.abort();
                }
            }
        };
    }
});
}

    $.post('https://other-server.com/form.php', $('#remindMe').serialize()).done(function({ 
    $('#remindMe').hide(); 
    $('#remindSub').hide(); 
    $('#successMail').show();
}); 
   return false;
});

这将通过 AJAX 将表单作为 RAW POST DATA 提交。

现在在我的 PHP 脚本中，我添加了一些行，它们将获取原始帖子数据并将其放入正常的 $_POST 数组中。

<?php
 header('Access-Control-Allow-Origin: *');
 header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
 header('Access-Control-Max-Age: 1000');
 header('Access-Control-Allow-Headers: Content-Type');
 require "config.php";

 if (isset($HTTP_RAW_POST_DATA)){
     $parts = explode('&', $HTTP_RAW_POST_DATA);
     foreach ( $parts as $part ) {
         list($key, $value) = explode('=', $part, 2);
         $_POST[$key] = urldecode($value);
     }
 }

 $firstname = $con->real_escape_string($_POST['firstname']);
 $lastname = $con->real_escape_string($_POST['lastname']);
 $email = $con->real_escape_string($_POST['email']);

 $con->query("INSERT INTO form (firstname,lastname,email)
 VALUES ('$firstname','$lastname','$email')");

 $con->close();
 ?>

现在，它适用于所有浏览器。 :-)

【讨论】：