jquery序列化表单以及回调函数的使用

最新推荐文章于 2021-08-06 15:00:14 发布

原创最新推荐文章于 2021-08-06 15:00:14 发布 · 1.2k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#jquery #表单 #序列化 #Ajax #同步

学习到新知识_JS 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用jQuery简化表单数据传递的方法。通过序列化表单字段，并利用AJAX进行前后端数据交互，提高了项目的开发效率。文中提供了两种实现方式及回调函数的应用示例。

在开发项目中，将前台的值传给后台，有时的JSP表单中的值有一两个，也有全部的值，如果这时一个个传，必定不是很好的办法，所以使用jQuery提供的表单序列化方法，可以很好的解决这个问题，同时可以封装成通用的函数，执行成功可以调用各自的回调函数，实现各自的功能。

代码如下：

function queryUserInfo(actionUrl,formId,fun){
	var params=new Object();  //声明数组
    $.each($("#"+formId).serializeArray(),function(index,param){  
    		params[param.name] = param.value; //序列化表单
    });
    params['time']=new Date();  //1
	$.ajax( {
		url : basePath+actionUrl,
		data : params,//没有1，可以这样写("#"+formId).serializeArray()
		type : 'POST',
		dataType:'json',
		async: false,//表示同步，等待服务端返回数据，才会执行后面的代码
		success : function(obj) {
			   fun(actionUrl,formId,obj);
			},
		error: function() {
			alert("访问异常");
		}
	});
}

另一种方式：

function setUserInfo(actionUrl,userid,username,fun){
	var params=new Object();  //声明数组
	params['user.id']=userid;
	params['user.name']=username;
	$.ajax( {
		url : actionUrl,
		data : params,//没有1，可以这样写("#"+formId).serializeArray()
		type : 'POST',
		dataType:'json',
		async: false,//表示同步，等待服务端返回数据，才会执行后面的代码
		success : function(obj) {
			   fun(actionUrl,formId,obj);//调用回调的函数
			},
		error: function() {
			alert("访问异常");
		}
	});
}