jquery.form.js失效问题。

项目中引用 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>





上一篇:jackson java转json hibernate 造成的堆栈溢出 无限递归问题


下一篇:js 常见问题 3