如何捕获form.submit的响应

时间：2008-12-17 14:15:02

标签： javascript forms javascript-events form-submit

我有以下代码：

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

            form1.submit();
        }

        function ShowResponse()
        {

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

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

20 个答案:

答案 0 :(得分：95)

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

答案 1 :(得分：52)

Ajax替代方法是将不可见的<iframe>设置为表单的目标，并在其<iframe>处理程序中读取onload的内容。但是为什么会遇到Ajax呢？

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

答案 2 :(得分：25)

我这样做并且正在努力。

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

答案 3 :(得分：21)

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

  //region initialise Realm for application
    Realm.init(this)
    //endregion

    //region creating realm config
    val realmConfig:RealmConfiguration = RealmConfiguration.Builder()
            .name("kotlin_demo.realm")
            .deleteRealmIfMigrationNeeded()
            .build()
    //endregion

    //region for development purpose getting new realm db each time
    Realm.deleteRealm(realmConfig)

    Realm.setDefaultConfiguration(realmConfig)
    //endregion

对于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); ，默认内容类型为＆＃34; application / x-www-form-urlencoded＆＃34;这与我们在上面的代码段中发送的内容相匹配。如果你想发送＆＃34;其他东西＆＃34;或者以某种方式调整它以查看here的一些细节。

答案 4 :(得分：9)

我不确定你是否理解submit（）的作用......

当您执行form1.submit();时，表单信息将发送到网络服务器。

WebServer将做任何应该做的事情，并将一个全新的网页返回给客户端（通常是更改内容的同一页面）。

所以，你无法“捕获”form.submit（）动作的返回。

答案 5 :(得分：7)

未来的互联网搜索者：

对于新的浏览器（截至2018年：Chrome，Firefox，Safari，Opera，Edge和大多数移动浏览器，但不包括IE）， XMLHttpRequest是简化异步网络调用的标准API strong>（我们以前需要$.ajax或jQuery的<form id="myFormId" action="/api/process/form" method="post"> <!-- form fields here --> <button type="submit">SubmitAction</button> </form> ）。

这是一种传统形式：

fetch

如果将上述形式传递给您（或因为它是语义html而创建了它），则可以将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元素的引用，而不要使用{{1 }}。

文档：

获取： 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”技巧。 此外，还有一个用于“提交”事件的form.addEventListener示例。

答案 6 :(得分：6)

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

如果您想捕获服务器响应，请使用AJAX或将其发布到iframe，然后抓住iframe onload()事件后显示的内容。

答案 7 :(得分：2)

您可以在提交按钮的点击处理程序中<div ng-controller="alertCtrl" class="alert alert-info" style="padding:50px"> <span data-ng-show="loading">Loading Page data .....</span> <span data-ng-show="!loading">Done</span> ，以确保HTML表单默认event.preventDefault()事件不会触发（导致页面刷新的原因）。

另一种选择是使用hackier形式标记：submit和<form>的使用阻碍了此处所需的行为;因为这些最终导致点击事件刷新页面。

如果您仍想使用type="submit"，并且您不想编写自定义点击处理程序，则可以使用jQuery的<form>方法，通过公开promise方法将整个问题抽象出来适用于ajax，success等

总结一下，您可以通过以下方式解决问题：

•使用error

防止处理函数中的默认行为

•使用没有默认行为的元素（例如event.preventDefault()）

•使用jQuery <form>

（我刚刚注意到这个问题来自2008年，不知道为什么它出现在我的Feed中;无论如何，希望这是一个明确的答案）

答案 8 :(得分：2)

    $.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
        }
    });

答案 9 :(得分：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>

答案 10 :(得分：1)

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

  1. 打开程序员工具箱
  2. 转到控制台并在其中的任何位置
  3. 在显示的菜单中，单击“启用XMXHTTPRequest记录”
  4. 每次执行此操作后，您都会在控制台中显示以“XHR已完成加载：http：// ......”开头的消息。
  5. 点击显示的链接，将显示“资源标签”，您可以在其中查看标题和回复内容！

答案 11 :(得分：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成功返回，所以我渲染它并替换当前页面，在我的情况下，我希望重定向到登录页面如果会话超时，那么我会拦截该重定向以保留页面状态。

现在，用户可以通过其他标签登录并再次尝试提交。

答案 12 :(得分：0)

你可以使用javascript和AJAX技术来做到这一点。看看jquery和form plug in。您只需要包含两个js文件来注册form.submit的回调。

答案 13 :(得分：0)

您可以使用jQuery和ajax()方法完成此操作：

<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>

答案 14 :(得分：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();
            }
        });
    });
});
  

<强> 块引用

所有在这个用途中使用$（document）.ready（function（））（＆＃39; formid＆＃39;）。submit（function（event）） 然后防止调用ajax表单提交的默认操作 $ .ajax（{,,,,}）; 它将采取参数你可以根据你的要求选择 然后调用功能成功：function（data）{ //做任何你想要我的例子把响应html放在div}

答案 15 :(得分：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
}

});

答案 16 :(得分：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!");
        }


    });


//

}

答案 17 :(得分：0)

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

例如，如果您需要使用用户数据将html表单发布到服务器（saveprofilechanges.php）以进行简单注册：

予。客户部分：

一.a。 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>

部分一.b。脚本部分：

$(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
          }
       });
    });
});

II。服务器部分（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;
    }
}

答案 18 :(得分：0)

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

答案 19 :(得分：-5)

你可以在没有ajax的情况下做到这一点。

在下面写下你的意思。

.. .. ..

然后在“action.php”

然后在frmLogin.submit（）;

之后

读取变量$ submit_return ..

$ submit_return包含返回值。

祝你好运。

相关问题
最新问题