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>
时间: 2024-08-31 06:31:03

jquery.form.js失效问题。的相关文章

jquery.form.js beforeSubmit失效问题。

引用jquery.form.js     ajaxsubmit 来提交form表单,回自动提交表单中所有数据,根据name匹配. 初始代码如下: //验证注册 function validateRegist(){ if($("#registerEmail").val().trim() == ""){ floatLayer("请输入email"); return false; }; } function registNew(){ var optio

jquery.form.js实现将form提交转为ajax方式提交的方法

 这个框架集合form提交.验证.上传的功能.  这个框架必须和jquery完整版结合,否则使用min则无效. 原理:利用js进行对form进行组装成ajax的url和data,原理还是用ajax来提交,其实这完全可以自己写,但是有这个框架可能会更简单. 一.最简单例子: 第一步:引用js  1 2 3 4 <!--这里的min是自己用js压缩工具对完整版进行的压缩 并不是真正的min,所以好使--> <script type="text/javascript" sr

jquery.form.js用法之清空form的方法

 这篇文章主要介绍了jquery.form.js清空form的方法,需要的朋友可以参考下 本段代码摘取自jquery.form.js中,由于觉得该方法的使用性非常强,同时也可独立拿出来使用. 该段代码言简意赅可以很好的作为学习参考.  代码如下: /**  * Clears the form data. Takes the following actions on the form's input fields:  * - input text fields will have their 'v

基于jQuery通过jQuery.form.js插件实现异步上传_jquery

本文主要从前台和后台代码分析了jquery.form.js实现异步上传的方法,分享给大家,具体代码如下 前台代码: @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <script src="~/Scripts/jquery-1.7.2.min.j

jquery.form.js异步上传完图片在post表单为啥post不了

问题描述 jquery.form.js异步上传完图片在post表单为啥post不了 下面是一个post表单 @using (Ajax.BeginForm("AddNewsInfoModel", "AdminNewsList", new AjaxOptions() { HttpMethod = "post", OnSuccess = "afterAdd" }, new { id = "Form1" })) {

http-使用jquery.form.js时,如何改变contentType为application/octet-stream?

问题描述 使用jquery.form.js时,如何改变contentType为application/octet-stream? 请问,在使用jquery.form.js提交时,想改变contentType为application/octet-stream怎么做? 我是这样写的: var options = { contentType: 'application/octet-stream', success: function(data) { $("#Text").text(data)

浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用_jquery

• 依赖的脚本文件 <script src="../Javascript/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="../Javascript/jquery.form.js" type="text/javascript"></script> • ajaxSubmit 和ajaxForm区

基于jQuery通过jQuery.form.js插件使用ajax提交form表单_javascript技巧

我们在提交表单的时候,如果没有使用ajax提交,页面都会自己刷新一下,显得非常的不友好,所以我们需要把我们的表单提交修改为ajax的模式,可以让用户清楚地知道他们在提交表单的时候处在哪一个阶段:正在提交?提交成功? 我简单使用了一下,jQuery Form插件有一下优点: 1.支持提交前验证. 2.支持提交后回调. 3.采用AJAX方式,有很好的用户体验 4.提交方式是灵活.只要指定要提交的form ID即可.想提交那个form.就可提交那个.同时提交参数可配置. 5.支持提交多种类型数据.如:

jquery.form.js实现将form提交转为ajax方式提交的方法_jquery

本文实例讲述了jquery.form.js实现将form提交转为ajax方式提交的方法.分享给大家供大家参考.具体分析如下: 这个框架集合form提交.验证.上传的功能. 这个框架必须和jquery完整版结合,否则使用min则无效. 原理:利用js进行对form进行组装成ajax的url和data,原理还是用ajax来提交,其实这完全可以自己写,但是有这个框架可能会更简单. 一.最简单例子: 第一步:引用js <!--这里的min是自己用js压缩工具对完整版进行的压缩 并不是真正的min,所以好