zoukankan      html  css  js  c++  java
  • jQuery1.9(辅助函数)学习之——.serialize();

    $("form").serialize();  返回一个String

    描述: 将用作提交的表单元素的值编译成字符串,这个方法不接受任何参数。

    .serialize();

    方法使用标准的 URL-encoded 符号上建立一个文本字符串. 它可以对一个代表一组表单元素的 jQuery 对象进行操作,比如<input>, <textarea>, 和 <select>: $( "input, textarea, select" ).serialize();

    <form> 序列化很容易:

        $( "form" ).on( "submit", function( event ) {  
        event.preventDefault();  
        console.log( $( this ).serialize() );  
        });  

    在这种情况下,jQuery成功的控制表单的序列化。只有form元素检查它们所包含的输入框,在所有其他情况下,输入元素要序列化应该是集合的一部分传递给.serialize()方法。选择集合中表单和它子元素在序列化的字符串会导致重复。

    注意: 只有 "successful controls"可以被序列化成字符串。其中,提交按钮的值不会被序列化。另外,如果想要一个表单元素的值被序列化成字符串,这个元素必须含有 name 属性。此外,复选框(checkbox)和单选按钮(radio)(input 类型为 "radio" 或 "checkbox")的值只有在被选中时才会被序列化。另外,文件选择元素的数据也不会被序列化。

    例子:

    把一个表单序列化成一个查询字符串,使之能够在一个Ajax请求中发送。

        <%@ page language="java" contentType="text/html; charset=UTF-8"  
            pageEncoding="UTF-8"%>  
        <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
        <html>  
        <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
        <title>testJquery1_9_02</title>  
        <script type="text/javascript" src="/testLucene4.6/jquery-1.9.1.min.js"></script>  
        </head>  
          
        <style>  
        body,select {  
            font-size: 12px;  
        }  
          
        form {  
            margin: 5px;  
        }  
          
        p {  
            color: red;  
            margin: 5px;  
            font-size: 14px;  
        }  
          
        b {  
            color: blue;  
        }  
        </style>  
        <body>  
          
        <form>  
          
            <select name="single">  
                <option>Single</option>  
                <option>Single2</option>  
            </select>   
            <br />  
            <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>  
           <br />  
            <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>  
            <p>  
              
            <span id="results"></span>  
              
            </p>  
              
            <script type="text/javascript">  
                function showValues() {  
                    var str = $("form").serialize();  
                    $("#results").text(str);  
                }  
                  
                $(":checkbox, :radio").click(showValues);  
                $("select").change(showValues);  
                showValues();  
            </script>  
        </body>  
        </html>  

    Demo:

  • 相关阅读:
    Java反射得到属性的值和设置属性的值
    想建一个比较严格的自律打卡监督群,群主真的会很较真
    JS面向对象篇四、原型链与继承(多种继承实现方式及其利弊分析)
    JS面向对象篇三、创建对象的几种方法
    JS面向对象篇二、什么是原型?原型对象与实例对象、构造函数的关系及相关方法
    JS面向对象篇一、理解对象及属性特性(属性描述符)
    javascript作用域篇一、什么是javascript作用域链
    javascript函数篇四、函数的属性和方法——apply()、call()和bind()方法区别
    javascript函数篇三、函数声明提升
    javascript函数篇二、深入理解为什么javascript中没有函数重载
  • 原文地址:https://www.cnblogs.com/sungang/p/3641111.html
Copyright © 2011-2022 走看看