如何捕获form.submit的响应

Question

我有以下代码:

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

            form1.submit();
        }

        function ShowResponse()
        {

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

我想捕获html响应form1.submit？我该怎么做呢？我可以在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>为表单的目标,并<iframe>在其onload处理程序中读取其内容.但是为什么有Ajax时会烦恼？

注意:我只是想提一下这个替代方案,因为有些答案声称没有Ajax 就无法实现这一点.

Answer 3

我这样做,它的工作.

$('#form').submit(function(){
    $.ajax({
      url: $('#form').attr('action'),
      type: 'POST',
      data : $('#form').serialize(),
      success: function(){
        console.log('form submitted.');
      }
    });
    return false;
});

Answer 4

非jQuery方式,摘自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",它与我们在上面的代码段中发送的内容相匹配.如果你想发送"其他东西"或调整它,请在这里看到一些细节的细节.

Answer 5

未来的互联网搜索者:

对于新的浏览器(截至2018年:Chrome,Firefox,Safari,Opera,Edge和大多数移动浏览器,但不是IE),fetch是一种简化异步网络调用的标准API(我们曾经需要XMLHttpRequest或jQuery $.ajax).

这是一种传统形式:

<form id="myFormId" action="/api/process/form" method="post">
    <!-- form fields here -->
    <button type="submit">SubmitAction</button>
</form>

如果上面的表单交给你(或者你创建它是因为它是语义html),那么你可以将fetch代码包装在事件监听器中,如下所示:

document.forms['myFormId'].addEventListener('submit', (event) => {
    event.preventDefault();
    // TODO do something here to show user that form is being submitted
    fetch(event.target.action, {
        method: 'POST',
        body: new URLSearchParams(new FormData(event.target)) // event.target is the form
    }).then((resp) => {
        return resp.json(); // or resp.text() or whatever the server sends
    }).then((body) => {
        // TODO handle body
    }).catch((error) => {
        // TODO handle error
    });
});

(或者,如果您希望在没有提交事件的情况下手动调用原始海报,只需将fetch代码放在那里并传递对form元素的引用而不是使用event.target.)

文档:

抓取:https: //developer.mozilla.org/en-US/docs/Web/API/Fetch_API

其他:https: //developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript 2018年的那个页面没有提到fetch(还).但它提到了target ="myIFrame"技巧已被弃用.它还有一个用于'submit'事件的form.addEventListener示例.

Answer 6

我不确定你是否理解submit()的作用......

当您form1.submit();将表单信息发送到Web服务器时.

WebServer将做任何应该做的事情,并将一个全新的网页返回给客户端(通常是同一页面上有更改的内容).

所以,你无法"捕获"form.submit()动作的返回.

Answer 7

没有回调.这就像是一个链接.

如果您想捕获服务器响应,请使用AJAX或将其发布到Iframe,并抓住iframe onload()事件后出现的内容.