欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Ajax提交form表单内容和文件(jQuery.form.js)

程序员文章站 2022-04-09 18:33:57
ajaxForm和ajaxSubmit都支持Options对象参数 form表单代码 提交时使用下面三处代码任意一处皆可,提交后台数据和form普通提交后一样,该怎样处理就怎样处理 #1、ajaxForm 提交 #2、ajaxSubmit 提交 #3、options 参数提交 ......
jquery官网是这样介绍form.js   a simple way to ajax-ify any form on your page; with file upload and progress support.
简单来说就是用ajax提交form表单(含file内容)内容

form.js提供的api方法

api api描述 参数
ajaxform 增加所有需要的事件监听器,为ajax提交表单做准备。ajaxform并不能提交表单。在document的ready函数中,使用ajaxform来为ajax提交表单进行准备。 接受0个或1个参数。参数可以是一个回调函数,也可以是一个options对象。
ajaxsubmit 使用ajax提交表单。 接受0个或1个参数。参数可以是一个回调函数,也可以是一个options对象。
formserialize 将表单串行化(或序列化)为一个查询字符串。这个方法将返回以下格式的字符串:name1=value1&name2=value2。
fieldserialize 将表单的字段元素串行化(或序列化)为一个查询字符串。当只有部分表单字段需要进行串行化(或序列化)时,使用这个就很方便了。返回以下格式的字符串:name=value1&name2=value2。
fieldvalue 返回匹配插入数组中的表单元素值。该方法以数组的形式返回数据。如果元素值被判定可能无效,则数组为空。
resetform 将表单恢复到初始状态。
clearform 清除表单元素。该方法将所有的text、password、textarea置空,清除select元素中的选定,以及所有radio按钮和checkbox按钮重置为非选定状态。
clearfields 清除字段元素。只有部分表单元素需要清除时方便使用。










 

 

 

ajaxform和ajaxsubmit都支持options对象参数

target 指明页面中由服务器响应进行更新的元素。元素的值可能被指定为一个jquery选择器字符串、一个jquery对象、一个dom元素。 默认值:null
url 指定提交表单数据的url。 默认值:表单的action属性值
type 指定提交表单数据的方法(method):“get”或“post”。 默认值:get
beforesubmit 表单提交前被调用的回调函数。如果回调函数返回false表单将不被提交。回调函数带三个调用参数:数组形式的表单数据,jquery表单对象,以及传入ajaxform/ajaxsubmit中的options对象。 默认值:null
success 表单成功提交后调用的回调函数。然后datatype选项值决定传回responsetext还是responsexml的值。 默认值:null
datatype 返回的数据类型:null、"xml"、"script"、"json"其中之一。 默认值:null
resetform 表示如果表单提交成功是否进行重置。 默认值:null
clearform 表示如果表单提交成功是否清除表单数据。 默认值:null
timeout 限制请求的时间,当请求时间大于设置时间后,跳出请求  

 

 

 

 

 

 

 

 

 

 


form表单代码

<form id="form-js-demo" action="test.php" method="post">
  <p>name: <input type="text" name="name" value="name"/></p>
  <p>password: <input type="text" name="password" value="password"/></p>
  <p>
    <input type="checkbox" name="letter" value="a">a
    <input type="checkbox" name="letter" value="b">b
    <input type="checkbox" name="letter" value="c">c
  </p>
  <p>
    <input type="radio" name="size" value="s">s
    <input type="radio" name="size" value="m">m
    <input type="radio" name="size" value="l">l
  </p>
  <p>file: <input type="file" name="file"/></p>
  <p>comment: <textarea name="comment">comment</textarea></p>
  <p>
    <button type="submit" id="submit">submit</button>
    <button type="button" id="serialize">serialize</button>
    <button type="submit" id="options">options submit</button>
  </p>
</form>
<div class="data-show"></div>

<script src="jquery-3.3.1.min.js"></script>
<script src="jquery.form.js"></script>

 

提交时使用下面三处代码任意一处皆可,提交后台数据和form普通提交后一样,该怎样处理就怎样处理

#1、ajaxform   提交

 

$('#form-js-demo').ajaxform(function (obj) {
    console.log(obj);//obj  后台处理数据的返回值
  });

#2、ajaxsubmit   提交

 

  $('#form-js-demo').submit(function () {
    $('#form-js-demo').ajaxsubmit(function (obj) {
      //obj  后台处理数据的返回值
      console.log(obj);
    });
    return false;//若不return false,会跳转提交(重复提交)。
  });

#3、options 参数提交

 

  $('#options').click(function () {
    var options = {
      url: 'test2.php', //form提交路由,form表单和options都可设置,两处都设置了则以form中设置为准
      type: 'get',      //form提交方式,form表单和options都可设置,两处都设置了则以form中设置为准(method:post/get)
      target: '.div-display', //服务器返回的数据显示在元素(id或class)中显示(后台返回数据原样显示在.div-display中)
      beforesubmit: function (obj) {
        //obj  form提交数据,以对像存储
        console.log(obj);

        //return false;//设置false 则不会提交

      }, //提交前回调函数
      success: function (obj) {
        //obj  后台返回数据  若options设置了 target 项 obj 返回 0
        console.log(obj);
      }, //提交成功后回调函数
      datatype: null, //服务器返回数据类型
      clearform: true, //提交成功后是否清空表单中的字段值
      restform: true, //提交成功后是否重置表单中的字段值,即恢复到页面加载时的状态
      timeout: 6000 //设置请求时间,超过该时间后,自动退出请求,单位(毫秒)。
    };
    
    $('#form-js-demo').ajaxform(options);

 

form.js 表单序列化方法测试和对比
$("#serialize").click(function () {
    //jquery 自带表单序列化方法  会忽略 input[type="file"] 内容
    console.log($('#form-js-demo').serialize());
    //name=name&password=password&letter=b&letter=c&size=m&comment=comment


    //form.js 表单序列化方法  包含 input[type="file"] 内容
    console.log($('#form-js-demo').formserialize());
    //name=name&password=password&letter=b&letter=c&size=m&file=&comment=comment


    //form.js 表单序列化方法 只序列input[type="text"]内容
    console.log($('#form-js-demo input[type="text"]').fieldserialize());
    //name=name&password=password
  });