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将标签元素的高设为屏幕的百分比
Apr 19 jQuery
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
jQuery实现轮播图及其原理详解
Apr 12 jQuery
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
jquery插件懒加载的示例
Oct 24 jQuery
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 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/11/12 PHP
PHP swfupload图片上传的实例代码
2013/09/30 PHP
php+mysqli使用面向对象方式查询数据库实例
2015/01/29 PHP
PHP内核探索:哈希表碰撞攻击原理
2015/07/31 PHP
php fseek函数读取大文件两种方法
2016/10/12 PHP
PHP排序算法之简单选择排序(Simple Selection Sort)实例分析
2018/04/20 PHP
深入学习微信网址链接解封的防封原理visit_type
2019/08/15 PHP
jquery 插件 人性化的消息显示
2008/01/21 Javascript
鼠标经过的文本框textbox变色
2009/05/21 Javascript
Jquery图片滚动与幻灯片的实例代码
2013/04/08 Javascript
相册展示PhotoSwipe.js插件实现
2016/08/25 Javascript
jquery做个日期选择适用于手机端示例
2017/01/10 Javascript
ECMAScript6 新特性范例大全
2017/03/24 Javascript
nodejs爬虫初试superagent和cheerio
2018/03/05 NodeJs
Vue下路由History模式打包后页面空白的解决方法
2018/06/29 Javascript
vuex actions传递多参数的处理方法
2018/09/18 Javascript
extjs图形绘制之饼图实现方法分析
2020/03/06 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
2020/05/10 Javascript
Python内置的字符串处理函数详细整理(覆盖日常所用)
2014/08/19 Python
使用相同的Apache实例来运行Django和Media文件
2015/07/22 Python
Python中PyQt5/PySide2的按钮控件使用实例
2019/08/17 Python
浅析python,PyCharm,Anaconda三者之间的关系
2019/11/27 Python
浅谈keras的深度模型训练过程及结果记录方式
2020/01/24 Python
pytorch  网络参数 weight bias 初始化详解
2020/06/24 Python
Python 数据的累加与统计的示例代码
2020/08/03 Python
html5使用Drag事件编辑器拖拽上传图片的示例代码
2017/08/22 HTML / CSS
浅谈关于html5中图片抛物线运动的一些心得
2018/01/09 HTML / CSS
英国复古和经典球衣网站:Vintage Football Shirts
2018/10/05 全球购物
LN-CC中国:高端男装和女装的奢侈时尚目的地
2019/09/14 全球购物
德国购买门票网站:ADticket.de
2019/10/31 全球购物
教师辞职报告范文
2014/01/20 职场文书
租赁协议书
2015/01/27 职场文书
节约用电通知
2015/04/25 职场文书
2015年党支部书记工作总结
2015/05/21 职场文书
撤回我也能看到!教你用Python制作微信防撤回脚本
2021/06/11 Python
Vue router配置与使用分析讲解
2022/12/24 Vue.js