zoukankan      html  css  js  c++  java
  • jquery serialize()、serializearray()已经$.param方法

    serialize:

    序列表表格内容为字符串,用于 Ajax 请求。可以对整个form,也可以只针对某部分。

    HTML 代码:
    <p id="results"><b>Results: </b> </p>
    <form>
      <select name="single">
        <option>Single</option>
        <option>Single2</option>
      </select>
      <select name="multiple" multiple="multiple">
        <option selected="selected">Multiple</option>
        <option>Multiple2</option>
        <option selected="selected">Multiple3</option>
      </select><br/>
      <input type="checkbox" name="check" value="check1"/> check1
      <input type="checkbox" name="check" value="check2" checked="checked"/> check2
      <input type="radio" name="radio" value="radio1" checked="checked"/> radio1
      <input type="radio" name="radio" value="radio2"/> radio2
    </form>
    jQuery 代码:
    $("#results").append( "<tt>" + $("form").serialize() + "</tt>" );


    $('#form').submit(function(event){
    event.preventDefault();

    $.ajax({
    url:' ',
    type:'post',
    data:$("form").serialize(),
     

    }

    参考:http://api.jquery.com/serialize/

    serializeArray():

      Encode a set of form elements as an array of names and values.

    定义和用法

    serializeArray() 方法通过序列化表单值来创建对象数组(名称和值)。

    您可以选择一个或多个表单元素(比如 input 及/或 textarea),或者 form 元素本身。

    语法

    $(selector).serializeArray()

    serializeArray() 方法序列化表单元素(类似 .serialize() 方法),返回 JSON 数据结构数据。

    注意:此方法返回的是 JSON 对象而非 JSON 字符串。需要使用插件或者第三方库进行字符串化操作。

    返回的 JSON 对象是由一个对象数组组成的,其中每个对象包含一个或两个名值对 —— name 参数和 value 参数(如果 value 不为空的话)。举例来说:

    [ 
      {name: 'firstname', value: 'Hello'}, 
      {name: 'lastname', value: 'World'},
      {name: 'alias'}, // 值为空
    ]
    

    .serializeArray() 方法使用了 W3C 关于 successful controls(有效控件) 的标准来检测哪些元素应当包括在内。特别说明,元素不能被禁用(禁用的元素不会被包括在内),并且元素应当有含有 name 属性。提交按钮的值也不会被序列化。文件选择元素的数据也不会被序列化。

    该方法可以对已选择单独表单元素的对象进行操作,比如 <input>, <textarea>, 和 <select>。不过,更方便的方法是,直接选择 <form> 标签自身来进行序列化操作。

    $("form").submit(function() {
      console.log($(this).serializeArray());
      return false;
    });
    

    上面的代码产生下面的数据结构(假设浏览器支持 console.log):

    [
      {
        name: a
        value: 1
      },
      {
        name: b
        value: 2
      },
      {
        name: c
        value: 3
      },
      {
        name: d
        value: 4
      },
      {
        name: e
        value: 5
      }
    ]

    取得表单内容并插入到网页中:

     
    <p><b>Results:</b> <span id="results"></span></p>
    <form>
      <select name="single">
        <option>Single</option>
        <option>Single2</option>
      </select>
      <select name="multiple" multiple="multiple">
        <option selected="selected">Multiple</option>
        <option>Multiple2</option>
        <option selected="selected">Multiple3</option>
      </select>
      <br>
      <input type="checkbox" name="check" value="check1" id="ch1">
      <label for="ch1">check1</label>
      <input type="checkbox" name="check" value="check2" checked="checked" id="ch2">
      <label for="ch2">check2</label>
      <input type="radio" name="radio" value="radio1" checked="checked" id="r1">
      <label for="r1">radio1</label>
      <input type="radio" name="radio" value="radio2" id="r2">
      <label for="r2">radio2</label>
    </form>
     
    <script>
      function showValues() {
        var fields = $( ":input" ).serializeArray();
        $( "#results" ).empty();
        jQuery.each( fields, function( i, field ) {
          $( "#results" ).append( field.value + " " );
        });
      }
     
      $( ":checkbox, :radio" ).click( showValues );
      $( "select" ).change( showValues );
      showValues();
    </script>
     
    </body>
    </html>

    $(":input")                  选择所有的表单输入元素,包括input, textarea, select 和 button.


    参考:
    http://www.w3school.com.cn/jquery/ajax_serializearray.asp
    http://api.jquery.com/serializeArray/

    $
    .params()

    序列化一个 key/value 对象:

    var params = { 1900, height:1200 };
    var str = jQuery.param(params);
    $("#results").text(str);
    

    结果:

    width=1680&height=1050
    参考:http://www.w3school.com.cn/jquery/ajax_param.asp
  • 相关阅读:
    Delphi 之Copyrect的使用
    Delphi GDI对象之脱屏位图(Offscreen Bitmaps),也叫内存位图
    1067. Sort with Swap(0,*) (25)【贪心】——PAT (Advanced Level) Practise
    Server Tomcat v7.0 Server at localhost was unable to start within 45 seconds
    每一个JavaScript开发者都应该知道的10道面试题
    【HDOJ 5407】 CRB and Candies (大犇推导
    Wireshark默认不抓取本地包的解决方式
    Android LaunchMode案例篇
    使用ViewPager实现广告滑动效果
    剑指offer面试题26-复杂链表的复制
  • 原文地址:https://www.cnblogs.com/youxin/p/3891140.html
Copyright © 2011-2022 走看看