$.post 到远程网站然后提交默认操作答案

【问题标题】：$.post to remote website then submit default action$.post 到远程网站然后提交默认操作
【发布时间】：2016-04-20 15:51:43
【问题描述】：

function post()
{
   var cvs = $('#client-nbr').val();
   var cs = $('#cs').val();
   $.post('http://sitea.com/a.php',{postcvs:cvs,postch1:cs});
   return false;
}

在提交时调用函数：

<form action="http://siteb.com/b.php" method="post" id="formID" onsubmit="post()">
  <input type="text" name="client-nbr" id="client-nbr" /> <br>
  <input type="text" name="cs" id="cs" /> <br>
  <button type="submit" name="submit" id="submit">subscribe</button>
</form>

我想在提交默认操作后等待function post() 完成发布吗？

【问题讨论】：

你为什么不直接用 jQuery 做两个 $.posts 而不是一个通过默认操作提交，一个用 jQuery 提交？在其他帖子的 .done 或 .complete 函数中触发第二个帖子。
tylerism 我没明白你的意思你能举个例子吗？

标签： javascript html

【解决方案1】：

<form action="http://siteb.com/b.php" method="post" id="formID">
    <input type="text" name="client-nbr" id="client-nbr" /> <br>
    <input type="text" name="cs" id="cs" /> <br>
    <!-- http://stackoverflow.com/a/23968244/2240375 -->
    <button type="submit" name="submit_btn" id="submit_btn">subscribe</button>
</form>
<script>
    $("#formID").submit(function (objEvent) {
        // Prevent your form submition
        objEvent.preventDefault();
        $.ajax({
            type: 'POST',
            url: "http://sitea.com/a.php",
            data: {
                postcvs: $('#client-nbr').val(),
                postch1: $('#cs').val()
            },
            success: function (strResponseData) {
                // After successfull ajax request submit the form
                $("#formID")[0].submit();
            }
        });
    })
</script>

【讨论】：

Ali Khanusiya 该代码仅适用于站点 A，页面冻结后无法向 siteb.com/b.php 提交默认操作
@AliKhanusiya ，您不能在提交事件中提交表单！最好的情况是浏览器会禁止它，最坏的情况是你会遇到无限递归。澄清：你调用的submit()会再次触发submit事件，会因为objEvent.preventDefault()而被阻塞
@ChiralMichael ：我已经使用核心 JavaScript 提交了表单。所以它不会触发 jQuery 提交事件。请访问stackoverflow.com/a/11558049/2240375了解更多详情
@Sharondelmar ：这是因为您对站点 A 的 Ajax 请求未完成，并且在您的 ajax 请求未成功之前，您将无法执行 success 中的代码：函数（strResponseData）

【解决方案2】：

$.post() 返回一个promise object。 Promise 对象具有多种方法来挂钩有关任务完成的事件，例如“完成”。如果我严格需要等到外部 ajax 调用完成后再进行表单发布，我会执行以下操作：

Javascript

$('#my-button').click( function( e) {
    e.preventDefault();
    var cvs = $('#client-nbr').val();
    var cs = $('#cs').val();
    $.post('http://sitea.com/a.php',{postcvs:cvs,postch1:cs}).done( function() {
        $(e.target).closest("form").submit();
    });

    return false;
}

HTML

<form action="http://siteb.com/b.php" method="post" id="formID">
    <input type="text" name="client-nbr" id="client-nbr" /> <br>
    <input type="text" name="cs" id="cs" /> <br>
    <button id="my-button" type="submit" name="submit" id="submit">subscribe</button>
</form>

但是，您实际上似乎不太可能需要等待发布结果。如果没有时间问题，并且你不需要对发布结果做任何事情，我建议你简单的解雇和忘记。

【讨论】：

【解决方案3】：

如果此 js 脚本托管在站点 A，您将能够在那里发布：

                $.ajax({
                    url: 'http://sitea.com/a.php',
                    type: 'post',
                    data: {"postcvs":cvs, "postch1":cs},
                    success: function(data, status) {
                        console.log("success!");
                    }, error: function(xhr, desc, err) {
                        console.log(xhr);
                        console.log("Details: " + desc + "\nError:" + err);
                    }
                }); // end ajax call

但是，如果您的脚本在站点 B 上，您将只能发布到站点 B。More on the same origin policy here。

【讨论】：

fruitoftheloins 是的，js 脚本托管在站点 A，但我可以在 a.php 中获取数据！谢谢你的回答