将成功添加到双重jQuery / Ajax发布中

3
我正在使用以下方法将Web应用程序中的表单数据发布到服务器端PHP和QuickBase。 fill.php处理签名,将其附加到pdf并通过电子邮件发送结果。
除此之外,我对这一部分没有真正的成功功能。
$('#sendbtn').click(function(){

    signatures();

    $.post( 'https://www.quickbase.com/db/dbname?act=API_AddRecord', $('form').serialize());

    $.post( 'fill.php', $('form').serialize(), $.mobile.changePage('#successpop', {transition: 'pop', role: 'dialog'}));

});

弹出窗口虽然可以显示,但并不能真正表示成功。在显示成功弹窗之前,我该如何获得这些帖子中一个或两个的响应?能否在成功时有条件地从一个帖子转到另一个帖子,这将非常好,但我对QuickBase帖子不太担心。在显示成功之前,我一定需要确认fill.php的帖子。
我喜欢这个方法,因为它避免了重定向到我的应用程序外部的URL。
感谢任何帮助!
<form action="" encoding='multipart/form-data' encType='multipart/form-data'>
<input type=text name=_fid_6 >
<input type=text name=_fid_7 >
<input type=text name=_fid_8 >
<input type="hidden" name="img" id="img" />
<input type="button" value="Sign!" id="sendbtn" />
</form>  

        <script>
            $(document).ready(function() {
                $("#signature").jSignature()
            })
            function signatures(){
                var $sigdiv = $("#signature");
                var datax = $sigdiv.jSignature("getData","image");
                $('#img').val(datax);
                $sigdiv.jSignature("reset")
            }
        </script>

<script>
$(document).ready( function(){
    $('#sendbtn').click(function(){

        signatures();

        $.post( 'https://www.quickbase.com/db/dbname?act=API_AddRecord', $('form').serialize());

        $.post( 'fill.php', $('form').serialize(), $.mobile.changePage('#successpop', {transition: 'pop', role: 'dialog'}));

    });
});
</script>

<div data-role="page" id="successpop">
<div data-role="header" data-theme="c">
<h1>QAF Sent</h1>
</div>
<div data-role="content" data-theme="d">    
<h2>Your QAF has been sent</h2> 
<p><input type="button" data-inline="true" data-theme="b" value="Begin New QAF" data-icon="back" onclick="clearForm();"/></p>
</div></div>
1个回答

1
其中一个 $.post() 将首先完成,另一个将第二个完成。您不一定知道哪个,因此设置一个全局变量(如布尔值),在第一个完成时将其设置为 true,然后添加一个检查 true 的条件。当成功函数看到该值为 true 时,调用 onDoubleSuccess() 函数。就像这样(demo):
<script>
  $(document).ready( function(){
    $('#sendbtn').click(function(){
      var finishedFirstPost = false,
      onDoubleSuccess = function() {
        //code goes here
        $.mobile.changePage('#successpop', {transition: 'pop', role: 'dialog'});
      };
      signatures();
      $.post(
        'https://www.quickbase.com/db/dbname?act=API_AddRecord',
        $('form').serialize(),
        function() {
          if(finishedFirstPost) {
            onDoubleSuccess();
          } else {
            finishedFirstPost = true;
          }
        });
      $.post(
        'fill.php',
        $('form').serialize(),
        function() {
          if(finishedFirstPost) {
            onDoubleSuccess();
          } else {
            finishedFirstPost = true;
          }
        });
    });
  });
</script>

此外,如果没有CORS支持,您无法对外部域执行HTTP POST操作,因此应将Quickbase $.post()更改为$.get()。这是API文档,显示应该可以正常工作。


如果你从$.post()切换到更强大的 $.ajax() ,你可以随时添加一个失败函数。 - Jason Sperske
谢谢。我尝试使用$.ajax()进行实验,试图将第二个post请求嵌套在第一个请求的成功函数中,但是没有成功。很高兴知道$.post()不支持failure函数。 - user1911141
嗯,实际上我一直无法让最初的答案起作用。它只是无限期地挂起。 - user1911141
这是因为您正在向外部域进行HTTP发布(因此它会抛出失败事件)。您需要将您的$.post()替换为QuickBase中的$.get()。 - Jason Sperske
不要使用全局变量,只需将变量放在点击处理程序内部。这样,在不污染全局作用域的同时,它将可供两个成功函数使用。 - gilly3
显示剩余2条评论

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接