如何捕获form.submit的响应


129

我有以下代码:

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

            form1.submit();
        }

        function ShowResponse()
        {

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

我想捕获HTML响应form1.submit?我该怎么做呢?我可以向form1.submit方法注册任何回调函数吗?

Answers:


109

使用普通的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);
        }
    })
;

5
+1为jQuery Form插件。很棒,但是您的'target'属性错误。它不像表单的“ action”属性;即它不是提交目的地。从docs中target-标识页面中要通过服务器响应进行更新的元素。
JCotton 2011年

39
公平地说,您不需要使用AJAX库。库是使用javascript编写的,因此存在非库解决方案。就是说,我100%赞成使用库来抽象进行AJAX调用所涉及的所有荒谬和复杂性。
杰森

3
我将其发布为以上解决方案的一个仅供参考的评论,除非涉及到IE 9及更低版本上的通过AJAX进行文件上传。我在非HTML5 IE浏览器(IE 9及更低版本)上通过ajax提交文件时遇到问题,因此我必须使用iframe hack。但是,使用iframe hack需要form.submit(),但是您不能等待响应告诉您是否成功。这让我陷入了困惑。
javaauthority

17
在这里使用库确实不值得。在纯JS中,代码并没有那么复杂:var xhr = new XMLHttpRequest() xhr.open("POST", "myscript.php"); xhr.onload=function(event){ alert("The server says: " + event.target.response); }; var formData = new FormData(document.getElementById("myForm")); xhr.send(formData);
12Me21 '17

58

Ajax的替代方法是将一个invisible设置<iframe>为表单的目标,并<iframe>在其onload处理程序中读取该内容的内容。但是,当有Ajax时为什么还要打扰呢?

注意:我只是想提到这种替代方法,因为一些答案声称没有Ajax 不可能实现这一目标。


4
假设您要通过单击按钮发布到URL进行下载吗?现在,您无法使用Ajax进行请求。是否要在下载完成后清理或更新界面?现在是时候要从不是 Ajax 的POST进行回调了。(我知道
Necropost

2
@ Dropped.on.Caprica是的,这仍然是<iframe>POST(带有的回调parent)的合法用例。对于下载和上传都一样...
Ates Goral

1
据我所知,对于需要与旧版IE(7+)兼容的任何人,我都可以肯定iframe方法是唯一的选择。如果我写错了,请纠正我,因为我当前正在遇到此问题。
CoffeeIsProgramming 2014年

1
为了检测下载是否成功,我最近学到的一个巧妙技巧是在下载响应中设置一个cookie,并在浏览器中轮询该cookie的存在。
Ates Goral,2015年

3
请注意,这仅在表单提交操作与iframe位于同一站点上时才有效。否则,同源策略将阻止它。
TechnoSam

36

从12me21的注释中提取的非jQuery原始Javascript方式:

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”,与我们在上述代码段中发送的内容匹配。如果您想发送“其他内容”或进行调整,请参见此处以获取一些详细的细节。


8
其实这是正确的答案!因为所有其他答案的作用完全相同,但是又被一层库所混淆。
johnfound '18

这看起来确实符合我的需求,因为我已经有一个PHP文件可以处理页面上的许多直接XMLHttpRequest()。但是,在具有典型<form action =“ /mysite/mycode.php”>和<submit>标记的简单表单的情况下,我不确定如何进行修改。是否将我的javascript httprequest调用(回调”),如:<form action =“ myhttpreq(” url,etc ...)?还是<form action =“#” onsubmit =“ return myhttpfunction()?像这样吗?如果那很简单,那肯定是答案。但是我有点困惑如何设置它
Randy

1
@Randy在我的情况下,我在这样的表单中有一个按钮,<input type='button' onclick="submitForm(); return false;">或者您可以为“提交”事件(如Marcus)添加事件监听器:stackoverflow.com/a/51730069/32453
rogerdpack

31

我正在这样做,它的工作。

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

4
您可能想要event.preventDefault();event=提交功能的第一个参数)而不是return false。返回false不仅会阻止浏览器提交表单,而且还会阻止发生可能很重要的其他副作用。目前很多问题,相关这一点。
Nate 2014年

1
好吧,是的,根据需要返回false或preventDefault或stopPropogation。
rajesh_kw 2015年

1
FormData($("myform")[0])如果您尝试上载输入类型=文件,则可能需要使用。
亚伦霍夫曼

1
要更通用一点,可以使用event.target.action$(event.target).serialize()代替$('#form').attr('action')$('#form').serialize()
Lie Ryan

16

未来的互联网搜索者:

对于新的浏览器(截至2018年:Chrome,Firefox,Safari,Opera,Edge和大多数移动浏览器,但不适用于IE),它fetch是一种标准API,可简化异步网络调用(我们以前需要使用XMLHttpRequestjQuery或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/zh-CN/docs/Web/API/Fetch_API

其他:https : //developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript 2018年的该页面未提及获取(尚未)。但是它提到不建议使用target =“ myIFrame”技巧。它还有一个“提交”事件的form.addEventListener示例。


10

我不确定您是否了解Submit()的功能...

完成后form1.submit();,表单信息将发送到Web服务器。

WebServer将做其应做的一切,并将一个全新的网页返回给客户端(通常是同一页面,但发生了一些变化)。

因此,您无法“捕捉” form.submit()操作的返回。


我创建了另一个HTML页面,并将其作为响应返回。
库舒布

6

没有回调。就像跟随一个链接。

如果要捕获服务器响应,请使用AJAX或将其发布到iframe,并获取iframe onload()事件后显示在其中的内容。


2

您可以event.preventDefault()在提交按钮的单击处理程序中确保submit不会触发HTML表单默认事件(这是导致页面刷新的原因)。

另一种选择是使用黑客形式的标记:这是使用,<form>并且type="submit"正在妨碍所需的行为。因为这些最终会导致点击事件刷新页面。

如果你想仍然使用<form>,而你不想编写自定义单击处理程序,您可以使用jQuery的ajax通过暴露的承诺方式方法,它抽象了整个问题离开你successerror等等。


回顾一下,您可以通过以下任一方法解决问题:

•通过使用防止处理功能中的默认行为 event.preventDefault()

•使用没有默认行为的元素(例如<form>

•使用jQuery ajax


(我刚刚注意到这个问题来自2008年,不确定为什么它会出现在我的供稿中;无论如何,希望这是一个明确的答案)


2

这是我针对此问题的代码:

<form id="formoid" action="./demoText.php" title="" method="post">
    <div>
        <label class="title">First Name</label>
        <input type="text" id="name" name="name" >
    </div>
    <div>
        <input type="submit" id="submitButton"  name="submitButton" value="Submit">
    </div>
</form>

<script type='text/javascript'>
/* attach a submit handler to the form */
$("#formoid").submit(function(event) {

  /* stop form from submitting normally */
  event.preventDefault();

  /* get the action attribute from the <form action=""> element */
  var $form = $( this ), url = $form.attr( 'action' );

  /* Send the data using post with element id name and name2*/
  var posting = $.post( url, { name: $('#name').val()} );

  /* Alerts the results */
  posting.done(function( data ) {
    alert('success');
  });
});
</script>

1

如果您想使用Chrome捕获AJAX请求的输出,可以按照以下简单步骤操作:

  1. 打开程序员工具箱
  2. 转到控制台并在其中的任何位置
  3. 在出现的菜单中,单击“启用XMXHTTPRequest日志记录”
  4. 完成此操作后,每次您发出AJAX请求时,控制台中都会显示一条以“ XHR完成加载:http:// ......”开头的消息。
  5. 单击出现的链接,将显示“资源选项卡”,您可以在其中查看响应的标题和内容!

1
    $.ajax({
        url: "/users/login/",    //give your url here
        type: 'POST',
        dataType: "json",
        data: logindata,
        success: function ( data ){
        //  alert(data);    do your stuff
        },
        error: function ( data ){
        //  alert(data);    do your stuff
        }
    });

1

以@rajesh_kw(https://stackoverflow.com/a/22567796/4946681)的答案为基础,我处理表单发布错误和成功:

    $('#formName').on('submit', function(event) {
        event.preventDefault(); // or return false, your choice
        $.ajax({
            url: $(this).attr('action'),
            type: 'post',
            data: $(this).serialize(),
            success: function(data, textStatus, jqXHR) {
                // if success, HTML response is expected, so replace current
                if(textStatus === 'success') {
                    // https://stackoverflow.com/a/1236378/4946681
                    var newDoc = document.open('text/html', 'replace');
                    newDoc.write(data);
                    newDoc.close();
                }
            }
        }).fail(function(jqXHR, textStatus, errorThrown) {
            if(jqXHR.status == 0 || jqXHR == 302) {
                alert('Your session has ended due to inactivity after 10 minutes.\nPlease refresh this page, or close this window and log back in to system.');
            } else {
                alert('Unknown error returned while saving' + (typeof errorThrown == 'string' && errorThrown.trim().length > 0 ? ':\n' + errorThrown : ''));
            }
        });
    });

我这样做是this为了使我的逻辑可重用,我希望HTML成功返回,因此我将其渲染并替换当前页面,对于我来说,如果会话超时,我希望重定向到登录页面,所以我拦截了该重定向,以保留页面状态。

现在,用户可以通过另一个选项卡登录,然后再次尝试提交。


0

您需要使用AJAX。提交表单通常会导致浏览器加载新页面。


0

您可以使用javascript和AJAX技术来做到这一点。看一下jquery和此表单插件。您只需要包括两个js文件即可注册form.submit的回调。


0

您可以使用jQueryajax()方法完成此操作:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
function submitform() {
      $.ajax({
        headers: { 
          'Accept': 'application/json',
          'Content-Type': 'application/json' 
        },
        type: "POST",
        url : "/hello.hello",
        dataType : "json",
        data : JSON.stringify({"hello_name": "hello"}),
        error: function () {
          alert('loading Ajax failure');
        },
    	onFailure: function () {
          alert('Ajax Failure');
    	},
    	statusCode: {
          404: function() {
          alert("missing info");
          }   
    	},
        success : function (response) {
          alert("The server says: " + JSON.stringify(response));
        }
      })
      .done(function( data ) {
        $("#result").text(data['hello']);
      });
};</script>


0
 $(document).ready(function() {
    $('form').submit(function(event) {
        event.preventDefault();
        $.ajax({
            url : "<wiki:action path='/your struts action'/>",//path of url where u want to submit form
            type : "POST",
            data : $(this).serialize(),
            success : function(data) {
                var treeMenuFrame = parent.frames['wikiMenu'];
                if (treeMenuFrame) {
                    treeMenuFrame.location.href = treeMenuFrame.location.href;
                }
                var contentFrame = parent.frames['wikiContent'];
                contentFrame.document.open();
                contentFrame.document.write(data);
                contentFrame.document.close();
            }
        });
    });
});

块引用

首先在此用法('formid')。submit(function(event))中使用$(document).ready(function()),然后阻止调用ajax表单提交$ .ajax({,,, ,}); 它将使用参数u可以根据您的要求选择,然后调用afunction success:function(data){//做您想让我的示例将响应html放在div上的操作}


0

首先,我们需要serializeObject();

$.fn.serializeObject = function () {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function () {
        if (o[this.name]) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

然后发表基本文章并得到回应

$.post("/Education/StudentSave", $("#frmNewStudent").serializeObject(), function (data) {
if(data){
//do true 
}
else
{
//do false
}

});

0

我有以下代码完美地使用带有多部分表单数据的ajax运行

function getUserDetail()
{
    var firstName = document.getElementById("firstName").value;
    var lastName = document.getElementById("lastName").value;
    var username = document.getElementById("username").value;
    var email = document.getElementById("email").value;
    var phoneNumber = document.getElementById("phoneNumber").value;
    var gender =$("#userForm input[type='radio']:checked").val();
    //var gender2 = document.getElementById("gender2").value;
    //alert("fn"+firstName+lastName+username+email);
    var roleIndex = document.getElementById("role");
    var role = roleIndex.options[roleIndex.selectedIndex].value;
    var jobTitleIndex = document.getElementById("jobTitle");
    var jobTitle = jobTitleIndex.options[jobTitleIndex.selectedIndex].value;
    var shiftIdIndex = document.getElementById("shiftId");
    var shiftId = shiftIdIndex.options[shiftIdIndex.selectedIndex].value;


    var addressLine1 = document.getElementById("addressLine1").value;
    var addressLine2 = document.getElementById("addressLine2").value;
    var streetRoad = document.getElementById("streetRoad").value;

    var countryIndex = document.getElementById("country");
    var country = countryIndex.options[countryIndex.selectedIndex].value;

    var stateIndex = document.getElementById("state");
    var state = stateIndex.options[stateIndex.selectedIndex].value;

    var cityIndex = document.getElementById("city");
    var city = cityIndex.options[cityIndex.selectedIndex].value;



    var pincode = document.getElementById("pincode").value;

    var branchIndex = document.getElementById("branch");
    var branch = branchIndex.options[branchIndex.selectedIndex].value;

    var language = document.getElementById("language").value;
    var profilePicture = document.getElementById("profilePicture").value;
    //alert(profilePicture);
    var addDocument = document.getElementById("addDocument").value;


    var shiftIdIndex = document.getElementById("shiftId");
    var shiftId = shiftIdIndex.options[shiftIdIndex.selectedIndex].value;


    var data = new FormData();
    data.append('firstName', firstName);
    data.append('lastName', lastName);
    data.append('username', username);
    data.append('email', email);
    data.append('phoneNumber', phoneNumber);
    data.append('role', role);
    data.append('jobTitle', jobTitle);
    data.append('gender', gender);
    data.append('shiftId', shiftId);
    data.append('lastName', lastName);
    data.append('addressLine1', addressLine1);
    data.append('addressLine2', addressLine2);
    data.append('streetRoad', streetRoad);
    data.append('country', country);
    data.append('state', state);
    data.append('city', city);
    data.append('pincode', pincode);
    data.append('branch', branch);
    data.append('language', language);
    data.append('profilePicture', $('#profilePicture')[0].files[0]);
     for (var i = 0; i < $('#document')[0].files.length; i++) {
            data.append('document[]', $('#document')[0].files[i]);
        }



    $.ajax({
        //url : '${pageContext.request.contextPath}/user/save-user',
        type: "POST",
        Accept: "application/json",
        async: true,
        contentType:false,
        processData: false,
        data: data,
        cache: false,

        success : function(data) {      
            reset();
            $(".alert alert-success alert-div").text("New User Created Successfully!");
         },
       error :function(data, textStatus, xhr){
           $(".alert alert-danger alert-div").text("new User Not Create!");
        }


    });


//

}

0

您可以使用jQuery.post()并从服务器返回结构良好的JSON答案。它还允许您直接在服务器上验证/清除数据,这是一个好习惯,因为比在客户端执行此操作更安全(甚至更容易)。

例如,如果您需要将带有用户数据的html表单发布到服务器(保存到saveprofilechanges.php),以进行简单注册:

一,客户部分:

HTML部分:

<form id="user_profile_form">
  <label for="first_name"><input type="text" name="first_name" id="first_name" required />First name</label>
  <label for="family_name"><input type="text" name="family_name" id="family_name" required />Family name</label>
  <label for="email"><input type="email" name="email" id="email" required />Email</label> 
  <input type="submit" value="Save changes" id="submit" />
</form>

IB脚本部分:

$(function () {
    $("#user_profile_form").submit(function(event) {
      event.preventDefault();
      var postData = {
        first_name: $('#first_name').val(),
        family_name: $('#family_name').val(),
        email: $('#email').val()
      };
      $.post("/saveprofilechanges.php", postData,
        function(data) {
          var json = jQuery.parseJSON(data);
          if (json.ExceptionMessage != undefined) {
            alert(json.ExceptionMessage); // the exception from the server
            $('#' + json.Field).focus(); // focus the specific field to fill in
          }
          if (json.SuccessMessage != undefined) {
            alert(json.SuccessMessage); // the success message from server
          }
       });
    });
});

二。服务器部分(saveprofilechanges.php):

$data = $_POST;
if (!empty($data) && is_array($data)) {
    // Some data validation:
    if (empty($data['first_name']) || !preg_match("/^[a-zA-Z]*$/", $data['first_name'])) {
       echo json_encode(array(
         'ExceptionMessage' => "First name missing or incorrect (only letters and spaces allowed).",
         'Field' => 'first_name' // Form field to focus in client form
       ));
       return FALSE;
    }
    if (empty($data['family_name']) || !preg_match("/^[a-zA-Z ]*$/", $data['family_name'])) {
       echo json_encode(array(
         'ExceptionMessage' => "Family name missing or incorrect (only letters and spaces allowed).",
         'Field' => 'family_name' // Form field to focus in client form
       ));
       return FALSE;
    }
    if (empty($data['email']) || !filter_var($data['email'], FILTER_VALIDATE_EMAIL)) {
       echo json_encode(array(
         'ExceptionMessage' => "Email missing or incorrectly formatted. Please enter it again.",
         'Field' => 'email' // Form field to focus in client form
       ));
       return FALSE;
    }
    // more actions..
    // more actions..
    try {
       // Some save to database or other action..:
       $this->User->update($data, array('username=?' => $username));
       echo json_encode(array(
         'SuccessMessage' => "Data saved!"
       ));
       return TRUE;
    } catch (Exception $e) {
       echo json_encode(array(
         'ExceptionMessage' => $e->getMessage()
       ));
       return FALSE;
    }
}

-5

你可以不用ajax就可以做到这一点。

在下面写下你喜欢的。

.. .. ..

然后在“ action.php”中

然后在frmLogin.submit()之后;

读取变量$ submit_return。

$ submit_return包含返回值。

祝好运。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.