zl程序教程

您现在的位置是:首页 >  前端

当前栏目

jQuery使用ajaxSubmit()提交表单示例

jQuery 使用 示例 提交 表单
2023-06-13 09:15:24 时间

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;//阻止表单自动提交事件
   });
});