由于页面导航离开，AJAX POST 请求取消答案

【问题标题】：AJAX POST request cancelling because the page navigates away由于页面导航离开，AJAX POST 请求取消
【发布时间】：2014-01-31 12:04:58
【问题描述】：

我正在尝试对表单中的提交操作发出 2 个请求。

使用外部脚本将 1 个请求发送到外部数据库。

然而，另一个请求是 AJAX POST 请求，它将表单字段存储在 localStorage 中并将 JSON 发布到 PHP 文件，然后将数据保存到当前服务器上的文本文件（表单托管的位置）

问题是 AJAX POST 请求在提交时被取消，因为第一个操作（外部脚本将数据发送到外部数据库）导航离开当前页面并为您提供提交的成功/失败状态。

我知道这是因为有一个表单验证（不会停止 AJAX 请求），如果电子邮件中存在验证错误，表单不会导航到另一个页面，但 AJAX POST 请求成功并将 JSON 数据正确传递到服务器上的文本文件。

以下是 HTML/JS 和 PHP 代码：

HTML/JS：

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" type="text/css" href="eloqua.css">
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    localStorage.clear();

    $("form").on("submit", function() {
        if(window.localStorage!==undefined) {
            var fields = $(this).serialize();

            localStorage.setItem("eloqua-fields", JSON.stringify( fields ));

            $.ajax({
               type: "POST",
               url: "backend.php",         
               data: fields
            });
        } else {
            alert("Storage Failed. Try refreshing");
        }
    });
});
</script>

<script type="text/javascript">
function validateForm()
{

var a=document.forms["EloquaForm"]["C_FirstName"].value;
if (a==null || a=="")
  {
  alert("First name must be filled out");
  return false;
  }

var b=document.forms["EloquaForm"]["C_LastName"].value;
if (b==null || b=="")
  {
  alert("Last name must be filled out");
  return false;
  }

var y=document.forms["EloquaForm"]["C_EmailAddress"].value;
var atpos=y.indexOf("@");
var dotpos=y.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=y.length)
  {
  alert("Not a valid e-mail address");
  return false;
  }
}
</script>
</head>

<body>
<p><img src="red-asterix.jpeg"> indicates a required field</p>

<div class="form-container" style="width: 625px">
<form class="form-eloqua" name="EloquaForm" action="http://s33.t.eloqua.com/e/f2" onsubmit="return validateForm();" method="post">
<span class="form-eloqua-label"><span>First Name</span></span><input id="firstname" type="text" name="C_FirstName" />
<span class="form-eloqua-label"><span>Last Name</span></span><input id="lastname" type="text" name="C_LastName" />
<span class="form-eloqua-label"><span>Email Address</span></span><input id="email" type="text" name="C_EmailAddress" />
<span class="form-eloqua-label">Title</span><input id="title" type="text" name="C_Title" />
<span class="form-eloqua-label">Company</span><input id="company" type="text" name="C_Company" />
<span class="form-eloqua-label">ZIP or Postal Code</span><input id="postcode" type="text" name="zipOrPostalCode" />
<span class="form-eloqua-label">Country</span><select id="country" name="country">
<option value="">Please select ...</option>
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AG">Angola</option>
<option value="AI">Anguilla</option>
<option value="AG">Antigua &amp; Barbuda</option>
<option value="AR">Argentina</option>
<option value="AA">Armenia</option>
<option value="AW">Aruba</option>
<option value="AU">Australia</option>
<option value="AT">Austria</option>
<option value="AZ">Azerbaijan</option>
<option value="BS">Bahamas</option>
<option value="BH">Bahrain</option>
<option value="BD">Bangladesh</option>
<option value="BB">Barbados</option>
<option value="BY">Belarus</option>
<option value="BE">Belgium</option>
<option value="BZ">Belize</option>
<option value="BJ">Benin</option>
<option value="BM">Bermuda</option>
<option value="BT">Bhutan</option>
<option value="BO">Bolivia</option>
<option value="BL">Bonaire</option>
<option value="BA">Bosnia &amp; Herzegovina</option>
<option value="BW">Botswana</option>
<option value="BR">Brazil</option>
<option value="BC">British Indian Ocean Ter</option>
<option value="BN">Brunei</option>
<option value="BG">Bulgaria</option>
<option value="BF">Burkina Faso</option>
<option value="BI">Burundi</option>
<option value="KH">Cambodia</option>
<option value="CM">Cameroon</option>
<option value="CA">Canada</option>
<option value="IC">Canary Islands</option>
<option value="CV">Cape Verde</option>
<option value="KY">Cayman Islands</option>
<option value="CF">Central African Republic</option>
<option value="TD">Chad</option>
<option value="CD">Channel Islands</option>
<option value="CL">Chile</option>
<option value="CN">China</option>
<option value="CI">Christmas Island</option>
<option value="CS">Cocos Island</option>
<option value="CO">Colombia</option>
<option value="CC">Comoros</option>
<option value="CG">Congo</option>
<option value="CK">Cook Islands</option>
<option value="CR">Costa Rica</option>
<option value="CT">Cote D'Ivoire</option>
<option value="HR">Croatia</option>
<option value="CU">Cuba</option>
<option value="CB">Curacao</option>
<option value="CY">Cyprus</option>
<option value="CZ">Czech Republic</option>
<option value="DK">Denmark</option>
<option value="DJ">Djibouti</option>
<option value="DM">Dominica</option>
<option value="DO">Dominican Republic</option>
</select>
<div class="form-eloqua-separator"></div>
<span class="form-eloqua-label">Annual Revenue Range</span><select name="C_Annual_Revenue1"> <option value="">Please select ...</option> <option value="0-100,000,000">0-100,000,000</option><option value="100,000,001-300,000,000">100,000,001-300,000,000</option><option value="300,000,001-500,000,000">300,000,001-500,000,000</option><option value="500,000,001-2,000,000,000">500,000,001-2,000,000,000</option><option value="2 Billion +">2 Billion +</option></select>
<div class="submit-button"><input type="submit" id="submit" value="Submit" /></div>
<div id="output"></div>
<input type="hidden" name="elqoffer" value="GGB2BContentMktg" />
<input type="hidden" name="elqchannel" value="TheMarketer" />
<input type="hidden" name="elqbq" value="14Q2" />
<input type="hidden" name="elqbc" value="UK" />
<input type="hidden" name="elqFormName" value="2013-Syndication-1372365875136" />
<input type="hidden" name="elqSiteId" value="33" />
</form>
</div>
</body>

</html>

PHP：

<h1>Below is the data retrieved from SERVER</h1>
<?php
   date_default_timezone_set('America/Chicago'); // CDT
   echo '<h2>Server Timezone : ' . date_default_timezone_get() . '</h2>';
   $current_date = date('d/m/Y == H:i:s ');
   print "<h2>Server Time : " . $current_date . "</h2>";

   $file_content = array();
   if ( file_exists('your_data.txt')){
       $file_content = (array)json_decode(file_get_contents('your_data.txt'));
       unlink('your_data.txt');
   }

    $file_content['users'][] = array('user'=>$_POST);
        file_put_contents('your_data.txt',json_encode($file_content));
?>

表单的实时版本： http://bhanuchawla.me/dev/redactive/marketerform/

发布 JSON 数据的文本文件： http://bhanuchawla.me/dev/redactive/marketerform/your_data.txt

注意：如果您在提交表单时收到提交成功消息，则表示操作的外部脚本运行成功，而不是 AJAX。要测试数据是否通过 AJAX 提交，请查看 your_data.txt 文件（上面的 URL）

如何确保在页面离开之前完成 AJAX POST？

【问题讨论】：

标签： javascript php jquery ajax json

【解决方案1】：

在您的 ajax 请求完成后执行 form.submit()。根据https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement.submit()，它应该绕过您的事件处理程序并获得您想要的结果。

var isSubmitted = false;
$(document).ready(function(){
    localStorage.clear();

    $("form").on("submit", function(evt) {
        if (!isSubmitted) {
            evt.preventDefault();
            var $this = $(this);
            if(window.localStorage!==undefined) {
                var fields = $(this).serialize();

                // Not an async task so don't need promise.
                localStorage.setItem("eloqua-fields", JSON.stringify( fields ));

                $.ajax({
                  type: "POST",
                  url: "backend.php",         
                  data: fields
                }).done(function() {
                  isSubmitted = true;
                  $this.submit();
                });
            } else {
                alert("Storage Failed. Try refreshing");
            }
            return false;
        } else {
            return true;
        }
    });
});

这是未经测试的，所以不确定它是否能正常工作。虽然，这是一种相当复杂的处理方式。在我看来，执行 AJAX 请求 + POST 表单提交感觉不对。我会说坚持做 2 个 AJAX 请求（包括表单提交）。

【讨论】：

无限循环伴侣。继续发布到 backend.php
好的，由于某种原因它没有绕过事件处理程序。这有点棘手，但您可以做的是设置一个全局变量/标志来跟踪 Ajax 事件是否完成。如果有，不要做 preventDefault 并返回 false。而是返回 true;。
它只是像 Marty 和 axel.michael 的回答一样执行 AJAX 请求。
卡兰 - 你知道吗。如果您再次按下提交按钮，它会提交操作。我会这样处理的。谢谢你的帮助伙伴。 :D

【解决方案2】：

如果我说对了，您的问题是基于这样一个事实，即您希望在一次提交后做两件完全不同的事情。你可以通过几种方式做到这一点。

变体一：无 Ajax，发布您的数据，在 backend.php 中执行您所做的任何操作，然后使用 curl to send post data 到另一台服务器。

变体二：如果您想使用 ajax 执行此操作，您可以这样尝试：

// this is your old anonymus function a bit modified...
var ajaxSubmitHandler = function(e) {
    e.preventDefault();
    if(window.localStorage!==undefined) {
        var fields = $(this).serialize();
        localStorage.setItem("eloqua-fields", JSON.stringify( fields ));
        $.ajax({
           type: "POST",
           url: "backend.php",
           data: fields,
           // and when ajax is done ... remove the event handler 
           done : function() {
                // deactivate submit handler....
                $("form").off("submit", ajaxSubmitHandler);
                // and simply retrigger the submit
                // this time it will only do the normal action
                $("form").submit();
           }
        });

    } else {
        alert("Storage Failed. Try refreshing");
    }
}

// per default you use the handler with the nested ajax request
$("form").on("submit", ajaxSubmitHandler);

【讨论】：

不确定第二个变体是否有效。你能用原始文件在本地测试一下吗：dropbox.com/sh/mm1tdhr4fe6nstc/S4OT31LAiR非常感谢
不，我不会那样做，这是你的项目，不是我的，我给出了一个答案，实施它是你的事，只需几分钟。
对。我试过了，它和 Marty 的解决方案一样。即 AJAX 工作正常，但提交操作脚本不工作。

【解决方案3】：

如果你想等到两个 ajax 请求都完成，你可以使用 jquery deferred objects。这样，只有在两个请求都完成时，您才能重定向到另一个页面。下面是使用延迟对象的简单示例代码。

var fn1 = $.ajax("/url-1.php");
var fn2 = $.ajax("/url-2.php");

$.when(fn1, fn2).done(function(fn1, fn2) {
  alert("all complete");
});

【讨论】：

感谢您回答 Vivek，但如果您看到我的代码，一个是 AJAX 请求，另一个是提交操作。我该怎么办？

【解决方案4】：

如果你改变这个

 $("form").on("submit", function() {
    if(window.localStorage!==undefined) {

到

 $("form").on("submit", function(e) {
    e.preventDefault();
    if(window.localStorage!==undefined) {

这会阻止表单自然提交...

!update: 忘记将事件传递给函数！代码已更新。

http://api.jquery.com/event.preventdefault/

【讨论】：

Uncaught ReferenceError: e is not defined
对。这可行，但它不会在提交按钮上运行外部脚本action="http://s33.t.eloqua.com/e/f2"。
那是因为该事件阻止它运行，这会将数据发布到您的 ajax.url: backend.php 您可以从该文件中运行另一个脚本，只要您有权访问外部资源！
@Marty - 外部来源是指 backend.php 还是 s33.t.eloqua.com/e/f2 ？

【解决方案5】：

通过在您的 ajax 调用中传递 'async:false' 对您的 php 页面进行同步调用

 $.ajax({
           type: "POST",
           async:false;
           url: "backend.php",         
           data: fields
        });

【讨论】：

不是一个很好的方法。 Kinda 违背了 ajax 的目的