Question

我尝试在表单中提交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？

Answer 1

如果你改变了这个

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

到

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

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

！更新：忘了将事件传递给函数！代码已更新。

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

Answer 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);

Answer 3

如果要等到两个ajax请求都完成，则可以使用jquery延迟对象。这样，只有当请求都完成时，您才可以重定向到其他页面。下面是使用延迟对象的简单示例代码。

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

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

Answer 4

在ajax请求完成后执行form.submit（）。根据{{3}}，它应绕过您的事件处理程序并获得您想要的结果。

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请求（包括表单提交）。

Answer 5

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

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

AJAX POST请求取消，因为页面导航

5 个答案: