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

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

另一请求然而是存储在localStorage的表单字段和帖子的JSON的PHP文件，然后将数据保存到当前服务器上的文本文件（其中形式托管）

一个AJAX POST请求

问题是，在提交时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)); 
?>

形式的LIVE VERSION：http://bhanuchawla.me/dev/redactive/marketerform/

，其中JSON数据发布文字档案：http://bhanuchawla.me/dev/redactive/marketerform/your_data.txt

注：如果您在提交表单得到投稿成功消息，这意味着在行动外部脚本成功，而不是跑AJAX。要测试数据是否通过AJAX提交，请查看your_data.txt文件（上面的URL）

如何确保在页面导航之前完成AJAX POST？

来源

2014-01-31 Bhanu Chawla

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

来源

2014-01-31 13:47:05 narak

无限循环队友。继续发布到backend.php –

好的，所以它不会绕过事件处理程序。这有点不好意思，但你可以做的是设置一个全局变量/标志，以跟踪是否Ajax事件完成，如果有，不要做preventDefault并返回false，而是返回true; – narak

更新了答案 – narak

对您的PHP页面同步调用，把 '异步：假' 在你的Ajax调用

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

来源

2014-01-31 12:10:35 gulshanm01

不是一个非常好的方法。有点击败了ajax的目的 – asprin

不工作。这甚至停止通过AJAX发布任何东西。 –

如果你改变了这个

$("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/

来源

2014-01-31 12:21:49 Marty

Uncaught ReferenceError：e is not defined –

'function（e）'... – CBroe

没错。这是有效的，但它不会在提交按钮上运行外部脚本'action =“http://s33.t.eloqua.com/e/f2”'。 –

当我得到你的权利，你的问题是基于这样的事实，要经过一个提交给做两个完全不同的事情。你可以通过几种方法来做到这一点。

变体之一：没有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);

来源

2014-01-31 12:28:56

不确定第二个变体是否有效。你可以在本地测试它与原始文件：https://www.dropbox.com/sh/mm1tdhr4fe6nstc/S4OT31LAiR 非常有责任 –

不，我不会那样做，这是你的项目不是我的，我给了anwser，执行它是你要做的，只需要你几分钟。 –

对。我尝试了它，并且做了与Marty的解决方案相同的事情。即AJAX工作正常，但提交操作脚本不起作用。 –

-1

$("form").on("submit", function() { 

    if(window.localStorage!==undefined) { 
     var fields = $(this).serialize();

event.preventDefault();

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

     $.ajax({ 
      type: "POST", 
      url: "backend.php",   
      data: fields,

success: function(data) { $('form').off('submit'); $('form').submit(); }, error: function() { $('form').off('submit'); $('form').submit(); }

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

基本上，AJAX请求得到响应后，我允许的形式提交。使用$（'form'）是粗略的，但我希望你明白了。

来源

2014-01-31 12:29:06 nightgaunt

基本上这会导致无限循环，因为每当你提交表单时，你都会记得提交。想法是正确的，但代码错误，您必须在触发新提交 –

同意之前移除提交事件。添加jquery关闭。 – nightgaunt

仍然是一个无限循环。 –

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

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

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

来源

2014-01-31 12:29:09 vivek

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

它也不工作。 :( –

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

回答

相关问题