javascript - submit回调 - js submit事件




如何捕获form.submit的响应 (13)

Ajax替代方法是将一个不可见的<iframe>为窗体的目标,并在其onload处理函数中读取该<iframe>的内容。 但是为什么还有Ajax呢?

注意:我只是想提一下这个选择,因为一些答案声称如果没有Ajax是不可能的

我有以下代码:

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

            form1.submit();
        }

        function ShowResponse()
        {

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

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


你可以使用javascript和AJAX技术来做到这一点。 看看jquery,并在此Form 。 你只需要包含两个js文件来为form.submit注册一个回调。


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


使用普通的JavaScript您将无法轻松完成此操作。 发布表单时,表单输入会发送到服务器,并刷新页面 - 数据在服务器端进行处理。 也就是说, submit()函数实际上不会返回任何内容,它只是将表单数据发送到服务器。

如果你真的想在Javascript中获得响应(没有页面刷新),那么你需要使用AJAX,当你开始谈论使用AJAX时,你需要使用一个库。 jQuery是迄今为止最受欢迎的,也是我个人最喜欢的。 有一个名为Form jQuery插件,它可以完成听起来像你想要的。

以下是你如何使用jQuery和该插件:

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

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

  1. 打开程序员工具箱
  2. 转到控制台并在其中的任何位置
  3. 在出现的菜单中,点击“启用XMXHTTPRequest记录”
  4. 这样做后,每当你发出一个AJAX请求时,一个以“XHR完成加载:http:// ......”开始的消息将出现在你的控制台中。
  5. 点击出现的链接,会出现“资源标签”,您可以在其中看到标题和回复的内容!

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

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

I.客户部分:

Ia 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
          }
       });
    });
});

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

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

另一种选择是使用hackier表单标记:这是<form>type="submit"的用法,它妨碍了所希望的行为; 因为这最终会导致点击事件刷新页面。

如果你想继续使用<form> ,并且你不想编写自定义点击处理程序,那么可以使用jQuery的ajax方法,它通过暴露successerror等的promise方法来为你抽象整个问题。

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

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

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

•使用jQuery ajax

(我刚刚注意到这个问题是从2008年开始的,不知道为什么它出现在我的Feed中;无论如何,希望这是一个明确的答案)


我不确定你了解submit()是什么......

当你做form1.submit(); 表单信息被发送到网络服务器。

WebServer将做它应该做的一切,并将一个全新的网页返回给客户端(通常是改变了某些内容的同一页面)。

所以,你无法“捕捉”form.submit()动作的返回。


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

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

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

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


非jQuery的方式,从12me21的评论:

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

首先,我们需要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
}

});

 $(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)),然后防止调用ajax表单提交的默认操作$ .ajax({,,,, ,}); 它会采取参数ü可以根据您的要求选择然后调用函数成功:函数(数据){/ /做任何你想要我的例子把响应HTML div {





form-submit