zoukankan      html  css  js  c++  java
  • jQuery之Ajax--辅助函数

    1.这些函数用于辅助完成Ajax任务。

    2.  jQuery.param()方法:创建一个数组或对象序列化的的字符串,适用于一个URL 地址查询字符串或Ajax请求。

         我们可以显示一个对象的查询字符串 和一个相应的URI-decoded 版本,如下:

    var myObject = {
      a: {
        one: 1, 
        two: 2, 
        three: 3
      }, 
      b: [1,2,3]
    };
    var recursiveEncoded = $.param(myObject);
    var recursiveDecoded = decodeURIComponent($.param(myObject));
     
    alert(recursiveEncoded);
    alert(recursiveDecoded);    

       recursiveEncodedrecursiveDecoded 的结果如下:

         a%5Bone%5D=1&a%5Btwo%5D=2&a%5Bthree%5D=3&b%5B%5D=1&b%5B%5D=2&b%5B%5D=3
         a[one]=1&a[two]=2&a[three]=3&b[]=1&b[]=2&b[]=3

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

         例子:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
        </head>
    
        <body>
            <form>
                <label for="username">用户名:</label><input type="text" id="username" name="username"/>
                <label for="password">密码:</label><input type="password" id="password" name="password"/>
                <input type="button" value="提交"  id="tijiao"/>
            </form>
            <script>
                $(function() {
                    $("#tijiao").click(function() {
                        //event.preventDefault();
                        console.info($("form").serialize());
                        
                    });
                });
            </script>
        </body>
    </html>

         结果:

    4.  .serializeArray()方法:创建一个对象组成的javascript数组,用来编码成一个JSON一样的字符串。 它可以对一个代表一组表单元素的 jQuery 对象进行操作。表单元素可以有以下几种类型:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
        </head>
        
        <body>
            <form>
                <div><input type="text" name="a" value="1" id="a" /></div>
                <div><input type="text" name="b" value="2" id="b" /></div>
                <div><input type="hidden" name="c" value="3" id="c" /></div>
                <div>
                    <textarea name="d" rows="8" cols="40">4</textarea>
                </div>
                <div>
                    <select name="e">
                        <option value="5" selected="selected">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                    </select>
                </div>
                <div>
                    <input type="checkbox" name="f" value="8" id="f" />
                </div>
                <div>
                    <input type="submit" name="g" value="Submit" id="g" />
                </div>
            </form>
            <script>
                $(function() {
                    $('form').submit(function() {
                        console.log($(this).serializeArray());
                        return false;
                    });
                });
            </script>
        </body>
    </html>

         .serializeArray()方法使用标准的W3C"successful controls"的标准来检测哪些元素应当包括在内。被禁用的元素不会被包括在内。并且,元素必须含有 name 属性。此外,提交按钮的值也不会被序列化。文件选择元素的数据也不会被序列化。

  • 相关阅读:
    智能推荐算法演变及学习笔记(三):CTR预估模型综述
    从中国农业银行“雅典娜杯”数据挖掘大赛看金融行业数据分析与建模方法
    智能推荐算法演变及学习笔记(二):基于图模型的智能推荐(含知识图谱/图神经网络)
    (设计模式专题3)模板方法模式
    (设计模式专题2)策略模式
    (设计模式专题1)为什么要使用设计模式?
    关于macOS上常用操作命令(持续更新)
    记录下关于RabbitMQ常用知识点(持续更新)
    EMERGENCY! EUREKA MAY BE INCORRECTLY CLAIMING INSTANCES ARE UP WHEN THEY'RE NOT. RENEWALS ARE LESSER THAN THRESHOLD AND HENCE THE INSTANCES ARE NOT BEING EXPIRED JUST TO BE SAFE.
    SpringCloud教程二:Ribbon(Finchley版)
  • 原文地址:https://www.cnblogs.com/wgl1995/p/6232255.html
Copyright © 2011-2022 走看看