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

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