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);
 ?>

以上所述是小编给大家介绍的jQuery 表单序列化实例代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

# jquery # 表单序列化 # jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法 # jQuery实现form表单元素序列化为json对象的方法 # JQuery中serialize() 序列化 # jquery序列化表单去除指定元素示例代码 # jquery序列化form表单使用ajax提交后处理返回的json数据 # jQuery中验证表单提交方式及序列化表单内容的实现 # jquery将一个表单序列化为一个对象的方法 # jQuery-serialize()输出序列化form表单值的方法 # 基于jQuery的一个扩展form序列化到json对象 # 表单 # 给大家 # 设置为 # 所述 # 小编 # 返回值 # 几个 # 序列化 # 有个 # 说了 # 两种 # 不多 # 只需 # 推荐使用 # 自带 # 别忘了 # 给我留言 # 键值 # 举了 # 有任何

返回目录在线咨询

上一篇：哈尔滨网站优化策略：提升搜索引擎排名技巧
下一篇：python assert函数是什么以及如何使用？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

jQuery 表单序列化实例代码

您的项目需求