码迷,mamicode.com
首页 > Web开发 > 详细

jquery表单序列化

时间:2017-06-10 21:26:00      阅读:258      评论:0      收藏:0      [点我收藏+]

标签:index   set   val   dex   返回   配置   blog   结构   log   

$(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" method="post">
        <input type="text" value="demo1" name="demo1">
        <input type="text" value="demo2" name="demo2">
        <input type="text" value="demo3" name="demo3">
    </form>
</body>
</html>

JavaScript:

<script>
    // 别忘了引入jquery !!!
    $(function(){
        $(document).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);
 ?>

 

jquery表单序列化

标签:index   set   val   dex   返回   配置   blog   结构   log   

原文地址:http://www.cnblogs.com/hcxy/p/6979744.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!