• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > JS应用 > JQuery学习记录(十四):表单序列化serialize()

    JQuery学习记录(十四):表单序列化serialize()

    作者: 分类:JS应用 点击: 149 次
    wordpress CMS主题:ssmay主题

      前面我们介绍了jquery框架的ajax异步提交数据的几个方法:load()、get()、post()、ajax(),使用起来还是比较简单的,相比原始JS的ajax提交数据,那是要简单的多。但是,在页面表单数据比较多的情况下,我们需要把表单的每一个元素的值都要转成变量,然后通过data数据参数传递给php,在表单元素特别多的情况下,这样写就比较麻烦了。

      如果有一个工具直接把表单数据转成我们需要的,那有多好。这不,jquery早就为我们想到了,它提供了一个序列化函数——serialize(),它会智能的获取指定表单内的所有元素。在面对大量表单元素时,它会把表单元素内容序列化为字符串,然后再使用 Ajax 请求。

      案例:

      <form action="" method="post">
      用户名:<input type="text" name="user">
      邮箱:<input type="text" name="email">
      QQ号:<input type="text" name="qq">
      电话:<input type="text" name="tel">
      <input type="submit" value="提交">
      </form>

      不使用序列化的ajax提交:

      $('form input[type=button]').click(function () {

      $.ajax({

      type : 'POST',
      url : 'test.php',
      data : { //这里会对每一个表单元素的值 进行获取

      user : $('form input[name=user]').val(),
      email : $('form input[name=email]').val(),
      user : $('form input[name=qq]').val(),
      user : $('form input[name=tel]').val()

      },
      success : function (response, status, xhr) {

      alert(response);

      }

      });

      });

      使用serialize()序列化提交:

      $('form input[type=button]').click(function () {

      $.ajax({

      type : 'POST',
      url : 'test.php',
      data : $("form").serialize(), //序列化表单
      success : function (response, status, xhr) {
      alert(response);
      }

      });

      });

      从上面的这个例子,我们可以看到,不使用序列化表单时,我们要获取每一个表单元素的值,要是表单有100个元素的话,我们就要获取100次,就要写100行代码。而使用序列化表单后,不管表单有多少个元素,我们都只需要一行代码就可以获取表单的所有元素的值,操作起来要简单多了。

       

       



      QQ二维码

    文章作者:ssmay
    本文地址:http://wanlimm.com/77201808136583.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.