jQuery使用ajaxSubmit()提交表单示例
ajaxSubmit(obj)方法是jQuery的一个插件jquery.form.js里面的方法,所以使用此方法需要先引入这个插件。如下所示:
<scriptsrc="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<scriptsrc="http://malsup.github.io/jquery.form.js"></script>
那么,如何通过ajaxSubmit(obj)提交数据呢?首先我们需要一个form:
XHTML
<form>
标题:<inputtype="text"name="title"/><br/>
内容:<textareaname="content"><textarea/><br/>
<button>提交</button>
</form>
上面是一个需要提交内容的form,通常情况下,我们直接通过form提交的话,提交后当前页面跳转到form的action所指向的页面。然而,很多时候我们比不希望提交表单后页面跳转,那么,我们就可以使用ajaxSubmit(obj)来提交数据。使用方法如下所示:
$("button").on("click",function(){
$("form").on("submit",function(){
vartitle=$("inpur[name=title]").val(),
content=$("textarea").val();
$(this).ajaxSubmit({
type:"post",//提交方式get/post
url:"yoururl",//需要提交的url
data:{
"title":title,
"content":content
},
success:function(data){//data保存提交后返回的数据,一般为json数据
//此处可对data作相关处理
alert("提交成功!");
}
$(this).resetForm();//提交后重置表单
});
returnfalse;//阻止表单自动提交事件
});
});
相关文章