Jquery：提交表单而不刷新答案

【问题标题】：Jquery: Submit a form without refreshingJquery：提交表单而不刷新
【发布时间】：2017-01-13 23:30:05
【问题描述】：

我正在尝试这样提交表单：

<form id="myForm" action="http://example.com/somefile" method="POST">
...
...
...
<input type="submit" id="sendForm" value="send">
</form>

动作链接它是由另一个开发人员开发的网络服务，所以，当我提交表单时，网络服务用一个 URL (http://www.example.com/thanks) 回复我，我想做的是避免这个网络服务回复，并且到位，改变重定向的url，可以吗？

我也试过这样做：

<script>
    $("#sendForm").click(function () {
       if (form_check_validation()) {
           $("#myForm").submit();
           window.location.replace("http://stackoverflow.com");             
       } else {
           return false;
    //                        event.preventDefault();
       }

    });
</script>

但它不起作用。

谢谢

注意：网络服务在另一台服务器上，所以我遇到了跨域来源的问题。

【问题讨论】：

你不能通过普通的表单提交来做到这一点。除非你使用 Ajax 等
window.location 的表单和设置都需要导航，并且一个页面只能导航一次，到一个或另一个。如果页面和服务满足same-origin rules or both agree upon permitting cross-origin，则可以通过 Ajax 发送表单数据。否则，您可能需要一个服务器端层来进行调解 - 将表单数据提交给它，以便它可以将其传递给服务并控制客户端的重定向结果。

标签： javascript jquery ajax web-services

【解决方案1】：

https://api.jquery.com/event.preventdefault/Google 是你的朋友，老兄............

【讨论】：

但是如果默认提交被阻止，将如何提交数据呢？

【解决方案2】：

假设此服务允许跨域并且您不想/不需要移动到不同的页面，为什么不使用 ajax？您可以使用 $.ajax 简单地创建和 ajax 调用。

见http://api.jquery.com/jquery.ajax/

例子：

$.ajax({
    url : "POST_URL",
    type: "POST",
    data : formData,
    success: function(data, textStatus, jqXHR)
    {
        // Handle server response
    },
    error: function (jqXHR, textStatus, errorThrown)
    {
        // Handle error
    }
});

【讨论】：

跨域问题怎么办？ OP 想要调用另一台服务器上的 Web 服务。
我认为他和这个开发人员正在合作，并且他允许跨源（AJAX 实际上是他帖子中的一个标签）.. 但我会更新答案......
是的，我想呼叫另一台服务器！不在我的！出现跨域问题：/
@rodrigo 你不能让他添加Access-Control-Allow-Origin 标头吗？
@Z-Bone no :( 这是因为开发人员无法修改他的代码！那太糟糕了！

【解决方案3】：

您可以使用 Ajax 来做到这一点。我还建议您将 submit 事件侦听器绑定到表单，以便在按 Enter 时也可以正常提交。

$("#myForm").submit(function (event) {
    if (form_check_validation()) {
        form_submit(this);
    } else {
        // ...
    }
    event.preventDefault();
});

function form_submit (form) {
    $.ajax({
        url: form.action,
        type: form.method,
        data: $(form).serialize()
    });
}

【讨论】：