JQUERY的表单异步提交(ajax)

js表单验证下载

源码下载:https://files.cnblogs.com/wangfengderizi/validator.rar

$(document).ready(function()
        {
            $('#myform').submit(
function(){
                jQuery.ajax({
                    url: 
"AsynchronousForm.aspx",   // 提交的页面
                    data: $('#myform').serialize(), // 从表单中获取数据
                    type: "POST",                   // 设置请求类型为"POST",默认为"GET"
                    beforeSend: function()          // 设置表单提交前方法
                    {
                        
new screenClass().lock();
                    },
                    error: 
function(request) {      // 设置表单提交出错
                        new screenClass().unlock();
                        alert(
"表单提交出错,请稍候再试");
                    },
                    success: 
function(data) {
                        
new screenClass().unlock(); // 设置表单提交完成使用方法
                    }
                });
                
return false;
            });
        });

关键点:$('#myform').serialize()。serialize() 方法通过序列化表单值,创建 URL 编码文本字符串。

注意点:当异步提交获取form表单中的值时,一定 <form id="formid" runat="server">不要加 runat="server",否则$('#myform').serialize()获取值

会出现乱码,并且无法$.get().post().请求失败,因为data:$('#myform').serialize()乱码,却掉runat="server"即可成功异步请求。

备注:<form id="formid" runat="server">只能出现一次,<form id="formid">可以多个并列出现,但是不能嵌套出现。

jQuery异步提交form表单

这个其实挺简单的,只是一开始我想错了,一开始我打算用jQuery + jQuery.form插件来做,其实不必的,只需要jQuery插件就可以了。

首先,在jsp页面中导入jQuery

<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.4.2.js"></script>

然后在jQueryready方法中定义form提交时的动作就可以了,

$(document).ready(function() {

// 使用 jQuery 异步提交表单

$('#editRealMsgForm').submit(function() {

jQuery.ajax({

url: 'editRealMsg.eri',

data: $('#editRealMsgForm').serialize(),

type: "POST",

beforeSend: function()

{  

$('#submitButton').hide();

$('#editRealMsgImg').show();

},

success: function()

{

$('#editRealMsgImg').hide();

$('#modifyButton').show();

$('#realName').attr("disabled","true");

$('#tel').attr("disabled","true");

}

});

return false;

});

});

现在这个form就绑定好jQuery封装的异步提交 方法了,简单吧!

原文地址:https://www.cnblogs.com/wangfengderizi/p/2832500.html