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

Question

希望你能帮助我。我有一个页面上的注册表格。该表单需要通过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上工作。

谢谢你的帮助。

Answer 1

好了，现在可以工作了。事情是这样的:

在IE9中不能通过跨域提交真实的post数据。然而，RAW post数据是可能的。

所以，我遇到了一个非常有用的代码片段，我添加到我的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数据并将其放入普通的$_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();
 ?>

现在，它可以在所有浏览器中工作。: -)