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 29 jQuery
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
关于jquery中attr()和prop()方法的区别
May 28 jQuery
jQuery实现列表的增加和删除功能
Jun 14 jQuery
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
jQuery解析json格式数据示例
Sep 01 jQuery
jquery实现垂直无限轮播的方法分析
Jul 16 jQuery
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
jquery将json转为数据字典的实例代码
Oct 11 jQuery
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 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中的json_encode()和json_decode()函数的一些说明
2016/11/20 PHP
PHP+MySQL实现模糊查询员工信息功能示例
2018/06/01 PHP
解决laravel5中auth用户登录其他页面获取不到登录信息的问题
2019/10/08 PHP
javascript动态创建表格及添加数据实例详解
2015/05/13 Javascript
Javascript的动态增加类的实现方法
2016/10/20 Javascript
详解如何在NodeJS项目中优雅的使用ES6
2017/04/22 NodeJs
Node.JS循环删除非空文件夹及子目录下的所有文件
2018/03/12 Javascript
React Native开发封装Toast与加载Loading组件示例
2018/09/08 Javascript
微信小程序实现选项卡效果
2018/11/06 Javascript
深入解析ES6中的promise
2018/11/08 Javascript
微信小程序生成分享海报方法(附带二维码生成)
2019/03/29 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
2019/05/06 Javascript
JS代码优化的8点建议
2020/02/04 Javascript
[02:02]2018DOTA2亚洲邀请赛Mineski赛前采访
2018/04/04 DOTA
使用Python编写简单的端口扫描器的实例分享
2015/12/18 Python
浅谈python装饰器探究与参数的领取
2017/12/01 Python
Python中跳台阶、变态跳台阶与矩形覆盖问题的解决方法
2018/05/19 Python
详解django.contirb.auth-认证
2018/07/16 Python
python3实现zabbix告警推送钉钉的示例
2019/02/20 Python
Python使用sqlalchemy模块连接数据库操作示例
2019/03/13 Python
python3+PyQt5 创建多线程网络应用-TCP客户端和TCP服务器实例
2019/06/17 Python
Python 多线程搜索txt文件的内容,并写入搜到的内容(Lock)方法
2019/08/23 Python
解决Python计算矩阵乘向量,矩阵乘实数的一些小错误
2019/08/26 Python
解决pycharm上的jupyter notebook端口被占用问题
2019/12/17 Python
基于Python的OCR实现示例
2020/04/03 Python
keras中的loss、optimizer、metrics用法
2020/06/15 Python
移动端rem布局的两种实现方法
2018/01/03 HTML / CSS
物流专业大学生求职信范文
2013/10/28 职场文书
自主招生自荐信
2013/12/08 职场文书
商务经理岗位职责
2014/08/03 职场文书
《妈妈别哭,有我在》读后感3篇
2020/01/13 职场文书
ORACLE数据库应用开发的三十个注意事项
2021/06/07 Oracle
python非标准时间的转换
2021/07/25 Python
《王者天下》第4季首话新剧照 4月9日正式开播
2022/04/07 日漫
Python可视化动图组件ipyvizzu绘制惊艳的可视化动图
2022/04/21 Python
Linux中sftp常用命令整理
2022/06/28 Servers