js进阶 14-8 表单序列化函数serializeArray()和serialize()的区别是什么

一、总结

一句话总结：两者都是对表单进行序列化，serializeArray()返回的是json对象，serialize()返回的是json形式的字符串，使用起来都是一样的

1、$（selector).serialize()序列化的话对中文做了什么操作？

为了避免出错，将中文变成了编码，因为内容要提交到服务器，编码可以保证汉字不出错，github上传文件的时候，也是进行的同样的操作

2、如何正常显示$（selector).serialize()序列化函数将中文变成的编码？

decodeURIComponent函数

36                         //decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。
37                         $('#txt').html(decodeURIComponent($('form').serialize()))

3、js如何向控制台输入消息？

console对象的log方法

56                         console.log(obj) //onsole.log() 向web控制台输出一条消息

二、表单序列化函数serializeArray()和serialize()的区别是什么

1、相关知识

表单序列化

  • 语法：$（selector).serialize()

    jQuery的serialize()方法通过序列化表单值，创建URL编码文本字符串，这样，我们就可以把序列化的值传给ajax()作为url的参数，轻松使用ajax()提交form表单了，而不需要一个一个获取表单中的值然后传给ajax()

  • serializeArray()序列化表单元素（类似'.serialize()'方法返回JSON数据结构数据。

    ’’’注意’’’此方法返回的是JSON对象而非JSON字符串。

2、代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <style>
 4 </style>
 5 <head>
 6     <meta charset="UTF-8">
 7     <title>演示文档</title>
 8     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
 9     <style type="text/css">
10       </style>
11 </style>
12 </head>
13 <body>
14     <form id="form1">
15     姓名：<input type="text" name="user"><br>
16     电话：<input type="text" name="Tel"><br>
17           <select name="buy">
18             <option>买新房</option>
19             <option>看二手房</option>
20           </select>
21           <input type="button" value="提交">
22     </form>
23     <div id="txt"></div>
24     <script>
25     /*
26         $(function(){
27             $('form input[type=button]').click(function(){
28                 $.ajax({
29                     type:'POST',
30                     url:'buy.php',
31                     data:$('form').serialize(),
32                     success:function(responseTxt,statusTxt,xhr){
33                         //$('#txt').html($('form').serialize())
34                         //alert($('form').serialize())
35                         //字符串形式的键值对，并且对URL进行了编码
36                         //decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。
37                         $('#txt').html(decodeURIComponent($('form').serialize()))
38
39                     }
40                 })
41
42             })
43         })
44         */
45         $(function(){
46             $('form input[type=button]').click(function(){
47                 $.ajax({
48                     type:'POST',
49                     url:'buy.php',
50                     data:$('form').serializeArray(),
51                     success:function(responseTxt,statusTxt,xhr){
52                         //$('#txt').html(responseTxt)
53                         var obj=$('form').serializeArray()
54                         //alert(obj)
55                         //$('#txt').html(obj)
56                         console.log(obj) //onsole.log() 向web控制台输出一条消息
57                         //[{name='user',value=''},{name='user',value=''},{name='user',value=''}]
58                         alert(obj[0].name+"=="+obj[0].value)
59                     }
60                 })
61
62             })
63         })
64     </script>
65 </body>
66 </html>

转载于:https://www.cnblogs.com/Renyi-Fan/p/9340970.html

js进阶 14-8 表单序列化函数serializeArray()和serialize()的区别是什么相关推荐

  1. jQuery中的ajax、jquery中ajax全局事件、load实现页面无刷新局部加载、ajax跨域请求jsonp、利用formData对象向服务端异步发送二进制数据，表单序列化（异步获取表单内容）

    jQuery中使用ajax: 在jQuery中使用ajax首先需要引入jQuery包,其引入方式可以采用网络资源,也可以下载包到项目文件中,这里推荐下载包到文件中:市面上有多个版本的jQuery库,这 ...

  2. 原生js实现form表单序列化的方法

    当我们有form表单而且里面的表单元素较多时,咱们总不能一个个去获取表单元素内的值来进行拼接吧!这样会很让人蛋疼!为了方便与后台交互并且提高自己的开发效率,并且不让你蛋疼:我们一起用原生来写一个表单序 ...

  3. JS的表单序列化，数组去重，判断数组是否重复等方法

    一.背景 本篇主要是记录一下JS中常用的工具方法.包括表单序列化,判断数组是否重复,数组去重等.做个笔记 二.工具方法 1.表单元素序列化为对象 public function serializeOb ...

  4. JS通用表单验证函数

    Check.js   JS函数文件 /*  *--------------- 客户端表单通用验证CheckForm(oForm) -----------------  * 功能:通用验证所有的表单元素 ...

  5. js进阶 12-5 jquery中表单事件如何使用

    js进阶 12-5 jquery中表单事件如何使用 一.总结 一句话总结:表单事件如何使用:可元素添加事件监听,然后监听元素,和javase里面一样. 1.表单获取焦点和失去焦点事件有哪两组? 注意是 ...

  6. ajax异步请求——form表单提交 及 表单序列化提交

    ajax异步请求 AJAX介绍 AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML),它不是一种新的编程语言,而是一种使用现有标准的新方 ...

  7. Jquery表单序列化（serialize、serializeArray、serializeJson）及序列化后追加参数

    文章目录 表单提交的原则 结论一:name相同的表单提交格式 结论二:没有name的表单.disabled的表单 结论三:redio.checkbox选中值却没有value属性 结论四:被选中的opt ...

  8. JavaScript - JavaScript通用表单验证函数(实例)

    Check.js    JS函数文件 /* *--------------- 客户端表单通用验证CheckForm(oForm) ----------------- * 功能:通用验证所有的表单元素. ...

  9. 通用客户端表单验证函数修正版

    转载:PHPSOHO 通用客户端表单验证函数修正版 主要内容: 一.用法简介: 二.类型定义: 三.程序文件: 历史: 2005.2.25 修改为通用客户端表单验证函数修正版 2004.12.21  ...

最新文章

  1. 腾讯！阿里！大二男生斩获4家头部科技公司实习offer！完整经验总结！
  2. MIT | 一种可解释的PPI预测模型
  3. 【ElasticSearch】ElasticSearch-SQL插件
  4. PAT ---- 1029. 旧键盘(20)
  5. Qt编写自定义控件及插件的使用
  6. linux 下安装maven
  7. Linux下正则表达式匹配性能
  8. 微信小程序开源demo汇总
  9. java的学习--第一章 java基础入门
  10. 策略模式探究（二）多个门禁对接使用策略模式
  11. 2019全国大学生电子设计竞赛（电赛）回忆录
  12. Tigase8 SSL安全连接配置与代码实现
  13. [附源码]SSM计算机毕业设计中华美食网站JAVA
  14. 互信息（Mutual Information）的介绍
  15. require.context()的用法
  16. Mybatis中使用大于小于等于的正确方法
  17. 盘点中美自动驾驶卡车领域公司， 先进的技术和落地的场景
  18. matlab 噪声检测,噪声环境下的信号检测及其matlab仿真 signal detection and matlab simulation in noise environment.pdf...
  19. android定位周边,Android 使用高德SDK编写周边搜索定位
  20. Dom——隔行变色、分时显示问候语

热门文章

  1. web开发中的 emmet 效率提升工具
  2. C#多线程学习之：Monitor类
  3. 51.com庞升东：其实我认为自己比较像唐僧
  4. openshift for linux
  5. 利用jdk自带的运行监控工具JConsole观察分析Java程序的运行 Jtop
  6. Google 地图 API 参考
  7. IS环境下配置PHP5+MySql+PHPMyAdmin
  8. Lecture 19 Shortest Paths III
  9. OpenStack nova-network 支持多vlan技术实现片段代码
  10. 新Rider预览版发布，对F#的支持是亮点