jquery实现ajax提交表单

时间:2022-06-24 11:04:56

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