jquery实现ajax提交表单

一般情况下，我们提交form表单采用的是submit的方法，典型的场景如下。

    <form id="thisForm" method="post" action="thisAction">
        <input type="text" name="text1" /> 
        <input type="text" name="text2" />
        <select name="select1">
            <option value="xx">xxxx</option>
            <option value="xx">xxxx</option>
        </select> <input type="submit" id="thisSubmit" value="提交" />
    </form>

用这种方法提交需要将整个页面刷新，转发到另一个页面。但是有时候我们只希望局部刷新，所以要用到ajax提交表单。这边介绍两种方法。

1.第一种方法比较简单，如下。

首先，要把提交按钮从submit改为button,其次引入jquery的包，然后就是最关键的了，填写如下代码。

    <form id="thisForm" method="post" action="">
        <input type="text" name="text1" /> 
        <input type="text" name="text2" />
        <select name="select1">
            <option value="xx">xxxx</option>
            <option value="xx">xxxx</option>
        </select> <button type="button" id="thisSubmit">提交</button>
    </form>

$('#thisbuttion').click(function() {
        $.ajax({
            type : 'post',
            url : 'thisAction',
            data : $('#thisForm').serialize(),
            dataType : 'html',
            success : function(data) {
                if (data > 0) {            
                    alert("成功");
                } else {
                    alert("失败")
                }
            }
        });
    });

这样就可以实现简单的ajax提交。

2.第二种方法是模拟form表单提交，需要用到一个jquery.form.js的插件，需要注意的是，这个插件比较古老了，新版的jquery可能会不兼容，所以还需要引入一个juery的降级包，jquery-migrate-1.2.1.min.js。

<!-- ajax form -->
<script type="text/javascript" src="./static/js/jquery.form.js"></script>
<script type="text/javascript" src="./static/js/jquery-migrate-1.2.1.min.js"></script>

然后就可以这样来写jquery代码实现提交了。

$(function() {
        $("#thisButton").click(function() {
            var ajax_option = {
                url : "thisAction",
                type : "post",
                dataType : "html",
                success : function(data) {
                    if (data == 1) {
                        alert("成功");
                    } else {
                        alert("失败")
                    }
                    goback();
                }
            }
            $("#thisForm").ajaxSubmit(ajax_option);
        });
    });

两种方法的效果是一样的，不过如果提交表单的时候还有附件，则选用第二种方法。

3.如果提交表单的时候有附件，又不想选用第二种方法，还有第三种方法。

首先，需要在form表单加上 enctype='multipart/form-data'标识。

<form id="thisForm" enctype="multipart/form-data">
    <input id="file" type="file" name="file"/>
    <button id="thisButton" type="button">upload</button>
</form>

然后就可以用如下的代码来进行上传了。

$('#thisbuttion').click(function() {
        $.ajax({
            type : 'post',
            url : 'thisAction',
            cache: false,
            data: new FormData($('#thisForm')[0]),
            processData: false,
            contentType: false,
            dataType : 'html',
            success : function(data) {
                if (data > 0) {            
                    alert("成功");
                } else {
                    alert("失败")
                }
            }
        });
    });            

 ps:我们在form表单中最好不要用button来作为触发的按钮，而应该选用div，因为用button作为触发的按钮的时候，即便在代码中return false了，它还是会自动提交表单的。比如：

$("#button1").click(function(){

　　return false;

})

在return false之后，它还是会提交表单，默认跳转道本来的页面，并且带上了参数。这对我们来说是一个不好的体验，所以我们建议用div来代替button.