如何捕获 form.submit 的响应

Question

我有以下代码：

<script type="text/javascript">
        function SubmitForm()
        {

            form1.submit();
        }

        function ShowResponse()
        {

        }
</script>
.
.
.
<div>
    <a href="#" onclick="SubmitForm();">Click</a>
</div>

我想捕获form1.submit的html响应？我该怎么做呢？我可以注册任何回调函数到 form1.submit 方法吗？

Answer 1

您将无法使用纯 javascript 轻松做到这一点。当您发布表单时，表单输入被发送到服务器并刷新您的页面 - 数据在服务器端处理。也就是说，submit() 函数实际上并没有返回任何内容，它只是将表单数据发送到服务器。

如果您真的想在 Javascript 中获得响应（不刷新页面），那么您需要使用 AJAX，当您开始谈论使用 AJAX 时，您将需要使用图书馆。 jQuery 是迄今为止最受欢迎的，也是我个人最喜欢的。有一个很棒的 jQuery 插件，名为 Form，它可以完全按照您的要求进行操作。

下面是你如何使用 jQuery 和那个插件：

$('#myForm')
    .ajaxForm({
        url : 'myscript.php', // or whatever
        dataType : 'json',
        success : function (response) {
            alert("The server says: " + response);
        }
    })
;

Answer 2

Ajax 替代方法是将不可见的<iframe> 设置为表单的目标，并在其onload 处理程序中读取该<iframe> 的内容。但是，既然有 Ajax，为什么还要麻烦呢？

注意：我只是想提一下这个替代方案，因为一些答案声称没有 Ajax 就不可能实现这一目标。

Answer 3

非jQuery vanilla Javascript方式，摘自12me21的评论：

var xhr = new XMLHttpRequest();
xhr.open("POST", "/your/url/name.php"); 
xhr.onload = function(event){ 
    alert("Success, server responded with: " + event.target.response); // raw response
}; 
// or onerror, onabort
var formData = new FormData(document.getElementById("myForm")); 
xhr.send(formData);

对于POST，默认内容类型是“application/x-www-form-urlencoded”，它与我们在上面的 sn-p 中发送的内容相匹配。如果您想发送“其他内容”或以某种方式对其进行调整，请参阅here 了解一些细节。