jquery ajax提交表单

最新推荐文章于 2024-12-04 11:21:35 发布

Hunter_first

最新推荐文章于 2024-12-04 11:21:35 发布

阅读量419

点赞数

分类专栏：前端

前端专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种使用AJAX技术实现表单提交的方法。通过将传统的表单提交过程转换为AJAX提交，可以实现页面局部刷新，提高用户体验。文章详细展示了如何利用jQuery库获取表单数据并将其转换为JSON格式，再通过AJAX发送到服务器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//将form转为AJAX提交
			function ajaxSubmit(frm, fn) {
			    var dataPara = getFormJson(frm);
			    $.ajax({
			        url: frm.action,
			        type: frm.method,
			        data: dataPara,
			        success: fn
			    });
			}
			//将form中的值转换为键值对。
			function getFormJson(frm) {
			    var o = {};
			    var a = $(frm).serializeArray();
			    $.each(a, function () {
			        if (o[this.name] !== undefined) {
			            if (!o[this.name].push) {
			                o[this.name] = [o[this.name]];
			            }
			            o[this.name].push(this.value || '');
			        } else {
			            o[this.name] = this.value || '';
			        }
			    });

			    return o;
			}
			
			//调用
		    $(document).ready(function(){
				$('#form1').bind('submit', function(){
					ajaxSubmit(this, function(data){
						//alert(data.message);
						//window.location.href="index";
					});
					return false;
				});
		    });

<form id="form1" method="post" action="xxx.action">

用户名：<input type="text" name="username">

密码:   <input type="password" name="userpwd">

<input type="submit" value="ajax提交">

</form>