JavaScript

超轻量级php框架startmvc

jQuery 表单序列化实例代码

更新时间:2020-05-17 06:06:01 作者:startmvc
废话不多说了,直接给大家贴代码了,具体代码如下所述:$(function(){$('#send').click(function(){$

废话不多说了,直接给大家贴代码了,具体代码如下所述:


$(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 表单序列化