一般情况下，我们提交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.