zoukankan      html  css  js  c++  java
  • jquery表单序列化

    $(function(){
        $('#send').click(function(){
             $.ajax({
                 type: "GET",
                 url: "test.json",
                 data: {username:$("#username").val(), password:$("#password").val()},  // 参数为对象
                 dataType: "json",
                 success: function(data){
                       // code...      
                 }
             });
        });
    });
    $(function(){
        $('#send').click(function(){
            var username = $("#username").val();
            var password = $("#password").val();
            $.ajax({
                type: "GET",
                url: "test.json",
                data: "username"+username+"&password"+password,  // 参数为字符串拼接,并用&连接
                dataType: "json",
                success: function(data){
                    // code...
                }
            });
        });
    });

    以上是一段常规的ajax请求代码,其中分别列举了data参数的两种传递格式。

    为了简便ajax请求时的data参数获取,jquery定义了几个快速的方法。

    1.serialize()

      用法:var data = $("form").serialize();

      返回值:将表单内容序列化成一个字符串。

      这样在ajax提交表单数据时,就不用一一列举出每一个参数。只需将data参数设置为 $("form").serialize() 即可。

          其核心方法是$.param(),用来对一个数组或对象按照key/value进行序列化,

    var obj = {first:"one",last:"two"};
    var str = $.param(obj);
    console.log(str);    // first=one&last=two

      另外,使用serialize有个好处是自带中文编译处理。所以,推荐使用serialize。

    2.serializeArray()

      用法:var jsonData = $("form").serializeArray();

      返回值:将页面表单序列化成一个JSON结构(键值对)的对象。

      比如,[{"name":"lihui", "age":"20"},{...}] 获取数据为 jsonData[index].name

    综上:在使用ajax提交表单数据时,data参数设置为$(form).serialize()或$(form).serializeArray()都可以。另外有些细节建议参考w3c。

    最后补充一个完整实例。

    html:

    <html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <form id="demo">
            <input type="text" value="demo1" name="demo1">
            <input type="text" value="demo2" name="demo2">
            <input type="text" value="demo3" name="demo3">
            <input type="submit" value="提交" id="submit">
        </form>
    </body>
    </html>

    JavaScript:

    <script>
        // 别忘了引入jquery !!!
        $(function(){
            $("#submit").click(function(){
            //  var data = $("form").serializeArray();
                var data = $("form").serialize();
                $.ajax({
                    type:"GET",
                    url:"1.php",
                    data:data,
                    dataType:"json",
                    success:function(data){
                        console.log(data);
                    },
                    error:function(xhr,error){
                        console.log(error);
                    }
                })
            })
        })
    </script>

    php  提醒:需要配置php环境并开启服务器

    <?php 
         echo json_encode($_GET);
     ?>
  • 相关阅读:
    教你OpenCV3.2.0+VS2017开发环境配置
    使用conda 与pip命令管理Python库
    【Python+OpenCV】Windows+Python3.6.0(Anaconda3)+OpenCV3.2.0安装配置
    GitHub Toturial
    C 语言多线程与锁机制
    翻译 | Placing Search in Context The Concept Revisited
    翻译 | Improving Distributional Similarity with Lessons Learned from Word Embeddings
    Derivative of Softmax Loss Function
    从头推导与实现 BP 网络
    施密特正交化 GramSchmidt
  • 原文地址:https://www.cnblogs.com/hcxy/p/6979744.html
Copyright © 2011-2022 走看看