项目中引用 jquery.form.js插件。
打算用 .ajaxForm(options); 方式提交到后台,但是发现 .ajax 是可以正常交互的,但是 .ajaxform 就是不行。
首先
在form表单中,button的type问题。
form表单中,button 的 type 有三种值。
分别是:
reset : 如果button type="reset" 在没有任何事件 的条件下,会清空当前 form 的所有内容。
button: 默认,就是一个按钮。 可以在form 上设置onkeydown方法,来监听回车按键(13)来提交表单。
submit: 1、 如果 type = "submit" ,则,点击该 button (按钮),默认提交当前表单。提交的 默认 路径是,form表单中配置的 action。
2、如果 在这个form 中,回车键 默认 为提交表单。
然后
在 jquery.form.js 插件中,有两种方式提交form表单。
1)$.fn.ajaxSubmit
2)$.fn.ajaxForm
button 的 type 类型的问题。
如果设置 type = "submit" ,js方法中,就可以用 .ajaxform。
如果设置 type = "button" ,js方法中,就可以用 .ajaxform。
在form表单中,如果 button 的 type = "submit" ,在绑定的js方法中提交表单,就要用 $("#loginform").ajaxForm(options);
<button type="submit" class="width-35 pull-right btn btn-sm btn-primary"> <i class="icon-key"></i> 登录 </button>
在form表单中,如果 button 的 type = "button" ,在绑定的js方法中提交表单,就要用 $("#loginform").ajaxSubmit(options);
<button type="button" class="width-35 pull-right btn btn-sm btn-primary"> <i class="icon-key"></i> 登录 </button>
完整代码如下:
js代码如下:
function toLoginServer(){ var options = { url : $("#ctx").val() + "/login/validate", success : function(response) { alert(response.isSuccess); if(response.isSuccess = true){ window.location.href= $("#ctx").val() + response.url; }else{ alert(response.error); } }, error : function(){ alert("error"); alert(JSON.stringify(response)); }, type : "post", clearForm : false, timeout : 100000 }; // $("#loginform").ajaxSubmit(options);// type="button" $("#loginform").ajaxForm(options);// type = "submit" };jsp代码如下:
<form:form id="loginform" commandName="form" > <fieldset> <label class="block clearfix"> <span class="block input-icon input-icon-right"> <form:input path="name" id="name" type="text" class="form-control" placeholder="Username" /> <i class="icon-user"></i> </span> </label> <label class="block clearfix"> <span class="block input-icon input-icon-right"> <form:input path="password" id="password" type="password" class="form-control" placeholder="Password" /> <i class="icon-lock"></i> </span> </label> <label> <span> <span class="lbl input-icon input-icon-right"> <form:input path="validateCode" id="validateCode" name="validateCode" type="text" class="span12" maxlength="15" placeholder="验证码" /> <i class="icon-retweet"></i> </span> <span class="lbl"> <img src="${ctx}/CheckCode" id="yzmPic" onclick="reloadCheckCode()" style="cursor:pointer;" title="点击刷新验证码"/> <a href="#" onclick="reloadCheckCode()" data-action="reload"> <i class="icon-refresh"></i> </a> </span> </span> </label> <div class="space"></div> <div class="clearfix"> <label class="inline"> <input type="checkbox" class="ace" /> <span class="lbl"> 记住密码</span> </label> <button type="submit" onclick="toLoginServer();" class="width-35 pull-right btn btn-sm btn-primary"> <i class="icon-key"></i> 登录 </button> </div> <div class="space-4"></div> </fieldset> </form:form>