一:表单提交的实例
<1>要使用的架包:
<script type= "text/javascript" src= "lib/jquery/1.9.1/jquery.min.js" ></script>
<2>表单form实例:
<div id= "loginform" class= "loginBox" >
<form id= "Form1" class= "form form-horizontal" action= "../Manage/Login" method= "post" >
<div class= "row cl" >
<label class= "form-label col-3" ><i class= "Hui-iconfont" >  </i></label>
<div class= "formControls col-8" >
<input id= "account" name= "account" type= "text" placeholder= "账户" class= "input-text size-L" >
</div>
</div>
<div class= "row cl" >
<label class= "form-label col-3" ><i class= "Hui-iconfont" >  </i></label>
<div class= "formControls col-8" >
<input id= "password" name= "password" type= "password" placeholder= "密码" class= "input-text size-L" >
</div>
</div>
<div class= "row cl" >
<div class= "formControls col-8 col-offset-3" >
<input name= "vCode" class= "input-text size-L" type= "text" placeholder= "验证码" οnblur= " if (this .value =='' ){this .value ='验证码:' }" οnclick= " if (this .value =='验证码:' ){this .value ='' ; }" value= "验证码:" style= " width :150 px ; " >
<img id= "auth" src= "../../VerificationCode.jsp" height= "40" width= "110" > <a id= "kanbuq" href= "javascript:;" > 看不清,换一张</a>
</div>
</div>
<div class= "row" >
<div class= "formControls col-8 col-offset-3" >
<input name= "" type= "submit" class= "btn btn-success radius size-L" value= " 登 录 " >
<input name= "" type= "reset" class= "btn btn-default radius size-L" value= " 取 消 " >
</div>
</div>
</form>
</div>
</div>
<3>上面是一个需要提交内容的form,通常情况下,我们直接通过form提交的话, 提交后当前页面跳转到form的action所指向的页面。然而,很多时候我们比不希望提交表单后页面跳转,那么,我们就可以使用ajaxSubmit(obj)来提交数据。我拿了一个人家的使用方法,这个比较简单易懂,也有一个自己的,先看我借鉴的,如下所示:
$ (document ).ready (function (){ $ ('#Form1' ).bind ('submit' , function (){ var account = $ ( '# account ]' ). val () , var password= $ ( '#password' ). val () ; $ ( this ).ajaxSubmit({ type : 'post' , // 提交方式 get/post url : 'your url' , // 需要提交的 url dataType : "json" , 数据类型 data : { 'account' : account ,
'password' : password
} ,
success : function (data) { // data 保存提交后返回的数据,一般为 json 数据
// 此处可对 data 作相关处理
alert ( '提交成功!' ) ;
}
//$( this ).resetForm() ; // 提交后重置表单
}) ;
return false ; // 阻止表单自动提交事件
}) ;
}) ;
再来,看我自己的方法:
$ (document ).ready (function (){
$ ('#Form1' ).bind ('submit' , function (){
ajaxSubmit (this , function (data){
console .log ("返回失败" , data);
if (data.rtnCode=="0000000" ){
window .location .href ="../admin/index.html" ;
}else {
layer .msg (data.msg , {icon : 5 , time :2000 });
}
});
return false ;
});
});
下面的可以写在公共类中,其他的表单提交也完全可以调用,达到代码的复用,如下:
// 将form转为AJAX提交
function ajaxSubmit (frm, fn) {
var dataPara = getFormJson (frm);
$ .ajax ({
url : frm.action ,
type : frm.method ,
data : dataPara, // 可能会出现后台接收到的参数值为null的情况,原因是form.js的源码不全,没有data这个参数,需要重新下载官网的源码。 dataType : "json" ,
async : false , //异步
success : fn
});
}
// 将form中的值转换为键值对。
function getFormJson (frm) {
var o = {};
var a = $ (frm).serializeArray ();
$ .each (a, function () {
if (this .name == "password" ) {
this .value = $ .md5 (this .value )
}
if (o[this .name ] !== undefined ) {
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;
}