jquery 表单提交

1.ajax请求的4种方法:

jquery回调函数里面的data是json格式,所以传值的时候必须传json格式 response.getWriter().print(dataArr.toJSONString());

1.1: load方法,用于load服务器的文件

如下:
	$(‘input:first‘).click(function (){
		$(‘#load‘).load("form_01.html #checkBox");//url
	});
	//上述方法是加载了form_01.html中的 #checkBox部分到当前页面中的#load中

	$(‘input[type=button]‘).click(function(){
		var send={‘userName‘:$(‘#userName‘).val()};//设置需要传入服务器的参数json格式
		$(‘#load‘).load(‘test!checkName‘,send,function(msg){
			alert(‘回调函数‘);
		});
	});
	//上述方法向服务器发送了数据,有回调函数,但是会将服务器返回的所有数据以json格式全部加载到#load中
	

1.2: get方法,向服务器发送请求(提交方式是get)

如下:
	$(‘input[type=button]‘).click(function(){
		var send={‘userName‘:$(‘#userName‘).val()};
		$.get(‘test!checkName‘,send,function(data){
			$(‘#load‘).html(data.msg);
		});
	});
	//上述方法是以get方法向服务器发送了一个请求,并将返回的数据添加到#load中
	

1.3: post方法,向服务器发送请求(提交方式是post)

如下:
	$(‘input[type=button]:first‘).click(function(){//检测的单击事件
		var send={‘userName‘:$(‘#userName‘).val()};//需要传入的参数 json格式
		$.post(‘test!checkName‘,send,function(data){//post 和get一样 参数(url(请求地址action),参数,回调函数(获取响应的参数))
			if(data.flag){//获取响应参数中的flag boolean类型
				$(‘#load‘).html(‘用户名已经存在‘);
			}else{
				$(‘#load‘).html(‘用户名可以注册‘);
			}
		});
	});
	//上述方法是以post方法向服务器发送了一个请求,并将返回的数据添加到#load中,与get用法一样,
	//flag是action中的封装之后属性,下面的user,userList都是action中的封装属性
	

1.4: ajax方法,向服务器发送请求

如下:
	$(‘input[type=button]:last‘).click(function (){//查询的单击事件
		var sendData={‘userId‘:$(‘#userId‘).val()};//数据 json格式数据
		var url="test!search";//地址
		$.ajax({//注意写法是json格式的  推荐使用ajax  原因是速度快
			url:url,//地址
			data:sendData,//参数
			type:‘post‘,//设置提交类型
			success:function(data){//请求成功的回调函数
				$(‘#load2‘).html(data.user.id+‘,‘+data.user.userName+‘,‘+data.user.userAddress);
			}
		});
	});
	//上述方法是以ajax方法向服务器发送了一个请求,并将返回的数据添加到#load中,可以设置提交类型,推荐使用这个方法。
	

2.在回调函数中遍历返回的json数组或者集合

2.1: 直接使用for遍历

如下:
	$(‘input[type=button]:first‘).click(function(){//显示信息单击事件
		var url="test!searchAll?z="+Math.random();//Math.random()随机数,用来防止浏览器缓存
		$.ajax({
			url:url,
			type:‘post‘,
			success:function(data){
				var value=‘‘;
				for(var i=0;i<data.userList.length;i++){
					value+=data.userList[i].userName+‘,‘+data.userList[i].userAddress+‘<br>‘;
				}
				$(‘#load‘).html(value);
			}
		});
	});
	//上述方法中,通过请求之后需要拿到的是一个list泛型集合userList,通过for遍历添加到#load的文本。
	

2.2: 使用jquery的工具函数eval转换

如下:
	$(‘input[type=button]:last‘).click(function(){//查询所有单击事件
		$(‘#load‘).html(‘‘);//清空文本
		$(‘#load‘).append(‘<ul></ul>‘);
		$.ajax({
			url:‘test!searchAll‘,
			type:‘post‘,
			success:function(data){
				var user=eval(data.userList);//因为集合的结构个数组一样,所以可以使用eval转换为数组
				for(var i=0;i<user.length;i++){
					$(‘#load<ul‘).append(‘<li>‘+user[i].userName+‘,‘+user[i].userAddress+‘</li>‘);
				}
			}
		});
	});
	//上述方法中,通过请求之后需要拿到的是一个list泛型集合userList,通过eval转换为数组,再使用for遍历添加到#load的文本中。
	

2.3: 使用jquery的工具函数each遍历

如下:
	 success:function (data) {//回调函数
                $(data.userList).each(function (i, value) {
                    $("#load").append("id:" + value.userName + ", name: " + value.userAddress ");
                });  

         }
	//上述方法中,通过请求之后需要拿到的是一个list泛型集合userList,直接使用工具函数each()遍历添加到#load的文本中。
	

3.ajax中的提示信息

3.1:ajaxStart()和ajaxStop()

如下:
	$(document).ajaxStart(function(){
  		$(‘#loading‘).show();//显示#loading
	}).ajaxStop(function(){
		$(‘#loading‘).hide();//隐藏#loading
	});
	//上述方法中,定义了整个html文档中提交ajax和ajax完成之后(ps:jquery支持链表式操作)。
	

3.2:ajaxSend()方法

如下:
	$(document).ajaxSend(function(evt, request, settings){//请求之前
  		 $("#load").append("<li>开始请求: " + settings.url + "<li>");
	});
	//上述方法中,定义了整个html文档中提交ajax之前的函数。
	

4.ajax中的错误处理

4.1:定义ajax()方法中的错误回调函数

如下:
	$(‘input[type=button]‘).click(function(){//查询所有单击事件
		$.ajax({
			url:‘test!searchAll?z=‘+Math.random(),
			type:‘post‘,
			timeout:3000,//设置请求时间/毫秒
			success:function(data){//请求成功的回调函数
				$(‘#load‘).append(‘<ul></ul>‘);
				$(‘#load>ul‘).html(‘‘);//清空
				var user=eval(data.userList);//因为集合的结构个数组一样,所以可以使用eval转换为数组
				for(var i=0;i<user.length;i++){//循环文本
					$(‘#load>ul‘).append(‘<li>‘++user[i].userName+‘,‘+user[i].userAddress+‘</li>‘);
				};
			},
			error:function(jqXHR,textStatus,errorThrown){//错误的回调函数
				if(errorThrown==‘Not Found‘){//errorThrown 错误异常信息
					$(‘#load‘).html(‘无法找到请求.‘);
				}
				if(textStatus==‘timeout‘){// 错误状态
					$(‘#load‘).html(‘请求超时。。。‘);
				}
			}
		});
	});
	//上述方法中,定义了ajax中的error回调函数,与success对应(ps:注意ajax()函数中的格式是json格式,不能写成链表)。
	

4.2:全局ajaxError()方法

如下:
	$(document).ajaxError(function(){//捕捉错误 比回调函数error:function优先
		$(‘#load‘).html(‘ajax请求发送错误!‘);
	});
	//上述方法中,定义了整个html文档中ajaxError()方法,用于捕捉所有的请求错误。
	

5.js动态提交

function sub(method){

document.myform.action="action?="+method;
    document.myform.submit();

}

时间: 2024-11-05 15:00:00

jquery 表单提交的相关文章

Jquery表单提交方式

1.使用调用submit方法 function tes1(){ //执行判断 if(校验通过){ $("#formId").submit(); }else{ return; } } 2.使用ajaxSubmit 方法,用到jquery.form.js $("#picForm").ajaxSubmit({ type: "post", dataType: "text", success: function(result){ ale

Jquery表单提交后获取返回Json值

1.给form添加id值: <form action="/News/SaveMessage" method="post" accept-charset="utf-8" class="form" id="frm-reg" name="frm-reg"> 设置所有input标签的name属性值为数据库的字段值,即可以传值到后台 2.给提交按钮添加id值: <input cl

jQuery表单提交

[转自]jQuery最简单的表单提交方式 第一步:绑定事件 常用的与ajax相关的事件参考如下: 1.$(selector).click(function) 2.$(selector).change(function) 3.$(selector).keyup(function) 4.$(selector).submit(function) 提交表单前,阻止提交按钮的默认的action,或返回false,如: 1.阻止提交按钮的默认的action $("form").submit(fun

jQuery表单提交验证

<!DOCTYPE html><html> <head> <title>表单提交验证功能</title> <meta charset="utf-8"/> <script src="scripts/jquery-1.11.3.js"></script> </head> <body> <fieldset> <legend>用户注

Jquery 表单提交后3s禁用

<form action="${pageContext.servletContext.contextPath}/XXX/###" method="post" id="messageForm"> 姓名:<input name = "name" type="text" /> <button type="button" id="submit"&

使用jquery form插件进行异步带文件的表单提交

引入form插件与jquery 的js文件后 获取表单的jq对象 然后.ajaxSubmit提交表单即可 实现添加品牌的异步表单提交 function addBarandImg(formId) { $('#'+formId).ajaxSubmit({ url: '/ProductManage/AddBrand', //data: $("#" + formId).serialize(), type: 'post', dataType: "json", success:

Jquery form表单提交

起因 由于项目中原先提交from是通过JavaScript指定action,在submit提交的,使用的方式,也不是很标准,造成除了ie之外的浏览器都不能正常的提交数据,做web项目还是要考虑到浏览器的兼容性的. 1.序列化form,通过Ajax提交 $.ajax({ cache: false, type: "POST", url: "readImage.do", data: $('#ff').serialize(), //序列化表单数据 async: true,

jquery验证表单 提交表单

问题: jquery中使用submit提交按钮时,当return false后,依然会提交表单. 解决: 使用button按钮,而不是submit按钮 <script type="text/javascript" src="scripts/jquery-2.0.2.js"></script> <script type="text/javascript"> function check(){ var npassw

jQuery Form 表单提交插件----Form 简介,官方文档,官方下载地址

 一.jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubmit(), 它们集合了从控制表单元素到决定如何管理提交进程的功能.另外,插件还包括其他的一些方法: formToArray().formSerialize().fieldSerialize().fieldValue().clearForm().clearFields(