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 11 jQuery
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
jQuery EasyUI开发技巧总结
Sep 26 jQuery
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
jQuery轮播图实例详解
Aug 15 jQuery
jQuery解析json格式数据示例
Sep 01 jQuery
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
jquery中为什么能用$操作
Jun 18 jQuery
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
jQuery操作事件完整实例分析
Jan 10 jQuery
原生jQuery实现只显示年份下拉框
Dec 24 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中cookies使用指南
2007/03/16 PHP
解析在zend Farmework下如何创立一个FORM表单
2013/06/28 PHP
php使用ICQ网关发送手机短信
2013/10/30 PHP
php利用scws实现mysql全文搜索功能的方法
2014/12/25 PHP
thinkphp Apache配置重启Apache1 restart 出错解决办法
2017/02/15 PHP
新浪刚打开页面出来的全屏广告代码
2007/04/02 Javascript
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
2010/10/20 Javascript
web前端开发也需要日志
2010/12/09 Javascript
我的javascript 函数链之演变
2011/04/07 Javascript
jquery 删除cookie失效的解决方法
2013/11/12 Javascript
MyEclipse取消验证Js的两种方法
2013/11/14 Javascript
require.js+vue开发微信上传图片组件
2016/10/27 Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
2017/05/13 jQuery
Webpack框架核心概念(知识点整理)
2017/12/22 Javascript
mint-ui 时间插件使用及获取选择值的方法
2018/02/09 Javascript
微信小程序自定义对话框弹出和隐藏动画
2018/07/19 Javascript
js 计算图片内点个数的示例代码
2019/04/04 Javascript
基于python的Tkinter编写登陆注册界面
2017/06/30 Python
Python设计模式之解释器模式原理与用法实例分析
2019/01/10 Python
Linux上使用Python统计每天的键盘输入次数
2019/04/17 Python
Python检查 云备份进程是否正常运行代码实例
2019/08/22 Python
Python 类的私有属性和私有方法实例分析
2019/09/29 Python
Python如何使用队列方式实现多线程爬虫
2020/05/12 Python
你应该知道的Python3.6、3.7、3.8新特性小结
2020/05/12 Python
css3气泡 css3关键帧动画创建的动态通知气泡
2013/02/26 HTML / CSS
html特殊符号示例 html特殊字符编码对照表
2014/01/14 HTML / CSS
优秀志愿者事迹材料
2014/02/03 职场文书
实习生岗位职责
2014/04/12 职场文书
《水乡歌》教学反思
2014/04/24 职场文书
微笑面对生活演讲稿
2014/09/23 职场文书
群众路线剖析材料范文
2014/10/09 职场文书
党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
男方婚礼答谢词
2015/01/20 职场文书
小学新课改心得体会
2016/01/22 职场文书
2016年秋季趣味运动会开幕词
2016/03/04 职场文书
2016年清明节网上祭英烈活动总结
2016/04/01 职场文书