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();//得到表单里的密码

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