jQuery 表单序列化实例代码


Posted in jQuery onJune 11, 2017

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

$(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实现字体颜色渐变效果的方法
Mar 29 jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
jQuery实现聊天对话框
Feb 08 jQuery
JQuery获得内容和属性方法解析
May 30 jQuery
Jquery $.map使用方法实例详解
Sep 01 jQuery
如何在vue 中引入使用jquery
Nov 10 jQuery
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 #jQuery
jQuery复合事件结合toggle()方法的用法示例
Jun 10 #jQuery
jQuery复合事件用法示例
Jun 10 #jQuery
jQuery简单绑定单个事件的方法示例
Jun 10 #jQuery
jQuery正则验证注册页面经典实例
Jun 10 #jQuery
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 #jQuery
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 #jQuery
You might like
逐步提升php框架的性能
2008/01/10 PHP
Laravel 5框架学习之日期,Mutator 和 Scope
2015/04/08 PHP
XMLHTTPRequest的属性和方法简介
2010/11/23 Javascript
javascript写的日历类(基于pj)
2010/12/28 Javascript
js监听输入框值的即时变化onpropertychange、oninput
2011/07/13 Javascript
Eclipse去除js(JavaScript)验证错误
2014/02/11 Javascript
js左右弹性滚动对联广告代码分享
2014/02/19 Javascript
jQuery获取元素父节点的方法
2016/06/21 Javascript
jQuery插件简单学习实例教程
2016/07/01 Javascript
AngularJS基础 ng-submit 指令简单示例
2016/08/03 Javascript
jQuery validate插件功能与用法详解
2016/12/15 Javascript
js判断手机号是否正确并返回的实现代码
2017/01/17 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
2017/03/30 Javascript
js捆绑TypeScript声明文件的方法教程
2018/04/13 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
2019/05/16 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
2020/04/09 Javascript
js实现双人五子棋小游戏
2020/05/28 Javascript
[03:17]DOTA2英雄基础教程 剧毒术士
2013/12/12 DOTA
[55:23]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python实现的各种排序算法代码
2013/03/04 Python
python executemany的使用及注意事项
2017/03/13 Python
Python用Pillow(PIL)进行简单的图像操作方法
2017/07/07 Python
python如何定义带参数的装饰器
2018/03/20 Python
django自带的server 让外网主机访问方法
2018/05/14 Python
django-allauth入门学习和使用详解
2019/07/03 Python
对python while循环和双重循环的实例详解
2019/08/23 Python
python的range和linspace使用详解
2019/11/27 Python
HTML5 localStorage使用总结
2017/02/22 HTML / CSS
饿了么订餐官网:外卖、网上订餐
2019/06/28 全球购物
历史专业大学生职业生涯规划书
2014/03/13 职场文书
一年级学生评语
2014/04/23 职场文书
公司回复函格式
2015/07/14 职场文书
同学会演讲稿
2019/04/02 职场文书
7个关于Python的经典基础案例
2021/11/07 Python
pandas中pd.groupby()的用法详解
2022/06/16 Python
html,css,javascript是怎样变成页面的
2023/05/07 HTML / CSS