Ajax提交Form表单的两种简单方式

在现在的项目开发中，ajax的应用是必不可免的，最为基本的就是利用ajax的异步处理方式来向后台提交数据。关于ajax提交表单我利用到了两种简单的方式。

方法一##

先获取表单里面的数据，再通过ajax提交；下面上代码：

1,HTML代码

<form id="myformz" action="" method="post">
		用户名<input type="text" id="mobile" name="mobile"> 
		密码<input type="text" id="passwd" name="passwd"> 
		<input type="button" onClick="sbum();">
	</form>

2,JS代码

<script type="text/javascript">
	function sbum() {
		var mobile = $("#mobile").val();//得到表单里的用户名
		var passwd = $("#passwd").val();//得到表单里的密码

		$.ajax({
			url : "loginController/texts2.do",//后台地址
			type : "POST",//提交方式
			data : {
				"mobile" : mobile,//表单参数
				"passwd" : passwd//表单参数
			},
			success : function(data) {
				alert("请求成功");
			},
			erreo : function(request) {
				alert("请求失败");
			}
		});
	}
</script>

方法二##

把表单里面的数据序列化，再通过ajax提交：

1,HTML代码

<form id="myformz" action="" method="post">
		用户名<input type="text" id="mobile" name="mobile"> 
		密码<input type="text" id="passwd" name="passwd"> 
		<input type="button" onClick="sbum();">
	</form>

2,JS代码

<script type="text/javascript">
	function subm() {
		$.ajax({
			type : "POST",//提交方式
			url : "loginController/texts.do",//提交地址
			data : $("#myformz").serialize(),//序列化表单值，创建 URL 编码文本字符串。
			success : function(data) {
				alert("请求成功");
			},
			erreo : function(request) {
				alert("请求失败");
			}
		});

	}
</script>

##总结##
方法一的下面这种方式

var mobile = $("#mobile").val();//得到表单里的用户名
var passwd = $("#passwd").val();//得到表单里的密码

需要一个一个的获取表单里面的数据，这样的话相对于来是比较麻烦，如果数据太多则会非常麻烦，当然，这种方式会比较灵活；
方法二则会简单得多。
当然还有很多方法，这里就简单介绍了我最常用的两种简单方式。