$.ajax 中的contentType

在 cnodejs.org 论坛中有一个问题,让我也很奇怪,说是 $.ajax 设置数据类型 applicaiton/json之后,服务器端(express)就拿不到数据,好奇之下,就去翻了翻资料,发现了一个自己也没有注意到的事。

于是有了这篇文章。

正文

$.ajax contentType 和 dataType , contentType 主要设置你发送给服务器的格式,dataType设置你收到服务器数据的格式。

在http 请求中,get 和 post 是最常用的。在 jquery 的 ajax 中, contentType都是默认的值:application/x-www-form-urlencoded,这种格式的特点就是,name/value 成为一组,每组之间用 & 联接,而 name与value 则是使用 = 连接。如: wwwh.baidu.com/q?key=fdsa&lang=zh 这是get , 而 post 请求则是使用请求体,参数不在 url 中,在请求体中的参数表现形式也是: key=fdsa&lang=zh的形式。

键值对这样组织在一般的情况下是没有什么问题的,这里说的一般是,不带嵌套类型JSON,也就是 简单的JSON,形如这样:

1
2
3
4
5
{
    a: 1,
    b: 2,
    c: 3
}

但是在一些复杂的情况下就有问题了。 例如在 ajax 中你要传一个复杂的 json 对像,也就说是对象嵌数组,数组中包括对象,兄果你这样传:

1
2
3
4
5
6
7
{
  data: {
    a: [{
      x: 2
    }]
  }
}

这个复杂对象, application/x-www-form-urlencoded 这种形式是没有办法将复杂的 JSON 组织成键值对形式(当然也有方案这点可以参考 ) ,你传进去可以发送请求,但是服务端收到数据为空, 因为 ajax 没有办法知道怎样处理这个数据。

这怎么可以呢?

聪明的程序员发现 http 还可以自定义数据类型,于是就定义一种叫 application/json 的类型。这种类型是 text , 我们 ajax 的复杂JSON数据,用 JSON.stringify序列化后,然后发送,在服务器端接到然后用 JSON.parse 进行还原就行了,这样就能处理复杂的对象了。

1
2
3
4
5
$.ajax({
    dataType: 'json',
    contentType: 'application/json',
    data: JSON.stringify({a: [{b:1, a:1}]})
})

这样你就可以发送复杂JSON的对象了。像现在的 restclient 都是这样处理的

JSON.stringify() 方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串,如果指定了replacer是一个函数,则可以替换值,或者如果指定了replacer是一个数组,可选的仅包括指定的属性。

语法

  1. JSON.stringify(value[, replacer [, space]])

参数

value
将要序列化成 一个JSON 字符串的值。
replacer 可选
如果该参数是一个函数,则在序列化过程中,被序列化的值的每个属性都会经过该函数的转换和处理;如果该参数是一个数组,则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中;如果该参数为null或者未提供,则对象所有的属性都会被序列化;关于该参数更详细的解释和示例,请参考使用原生的 JSON 对象一文。
space 可选
指定缩进用的空白字符串,用于美化输出(pretty-print);如果参数是个数字,它代表有多少的空格;上限为10。该值若小于1,则意味着没有空格;如果该参数为字符串(字符串的前十个字母),该字符串将被作为空格;如果该参数没有提供(或者为null)将没有空格。

返回值

一个表示给定值的JSON字符串。

描述

关于序列化,有下面五点注意事项:

  • 非数组对象的属性不能保证以特定的顺序出现在序列化后的字符串中。
  • 布尔值、数字、字符串的包装对象在序列化过程中会自动转换成对应的原始值。
  • undefined、任意的函数以及 symbol 值,在序列化过程中会被忽略(出现在非数组对象的属性值中时)或者被转换成 null(出现在数组中时)。
  • 所有以 symbol 为属性键的属性都会被完全忽略掉,即便 replacer 参数中强制指定包含了它们。
  • 不可枚举的属性会被忽略
  1. JSON.stringify({}); // '{}'
  2. JSON.stringify(true); // 'true'
  3. JSON.stringify("foo"); // '"foo"'
  4. JSON.stringify([1, "false", false]); // '[1,"false",false]'
  5. JSON.stringify({ x: 5 }); // '{"x":5}'
  6. JSON.stringify({x: 5, y: 6});
  7. // "{"x":5,"y":6}"
  8. JSON.stringify([new Number(1), new String("false"), new Boolean(false)]);
  9. // '[1,"false",false]'
  10. JSON.stringify({x: undefined, y: Object, z: Symbol("")});
  11. // '{}'
  12. JSON.stringify([undefined, Object, Symbol("")]);
  13. // '[null,null,null]'
  14. JSON.stringify({[Symbol("foo")]: "foo"});
  15. // '{}'
  16. JSON.stringify({[Symbol.for("foo")]: "foo"}, [Symbol.for("foo")]);
  17. // '{}'
  18. JSON.stringify(
  19. {[Symbol.for("foo")]: "foo"},
  20. function (k, v) {
  21. if (typeof k === "symbol"){
  22. return "a symbol";
  23. }
  24. }
  25. );
  26. // undefined
  27. // 不可枚举的属性默认会被忽略:
  28. JSON.stringify(
  29. Object.create(
  30. null,
  31. {
  32. x: { value: 'x', enumerable: false },
  33. y: { value: 'y', enumerable: true }
  34. }
  35. )
  36. );
  37. // "{"y":"y"}"

replacer参数

replacer参数可以是一个函数或者一个数组。作为函数,它有两个参数,键(key)值(value)都会被序列化。

  • 如果返回一个 Number, 转换成相应的字符串被添加入JSON字符串。
  • 如果返回一个 String, 该字符串作为属性值被添加入JSON。
  • 如果返回一个 Boolean, "true" 或者 "false"被作为属性值被添加入JSON字符串。
  • 如果返回任何其他对象,该对象递归地序列化成JSON字符串,对每个属性调用replacer方法。除非该对象是一个函数,这种情况将不会被序列化成JSON字符串。
  • 如果返回undefined,该属性值不会在JSON字符串中输出。

注意: 不能用replacer方法,从数组中移除值(values),如若返回undefined或者一个函数,将会被null取代。

例子(function)

  1. function replacer(key, value) {
  2. if (typeof value === "string") {
  3. return undefined;
  4. }
  5. return value;
  6. }
  7. var foo = {foundation: "Mozilla", model: "box", week: 45, transport: "car", month: 7};
  8. var jsonString = JSON.stringify(foo, replacer);

JSON序列化结果为 {"week":45,"month":7}.

例子(array)

如果replacer是一个数组,数组的值代表将被序列化成JSON字符串的属性名。

  1. JSON.stringify(foo, ['week', 'month']);
  2. // '{"week":45,"month":7}', 只保留“week”和“month”属性值。

space 参数

space 参数用来控制结果字符串里面的间距。如果是一个数字, 则在字符串化时每一级别会比上一级别缩进多这个数字值的空格(最多10个空格);如果是一个字符串,则每一级别会比上一级别多缩进用该字符串(或该字符串的前十个字符)。

  1. JSON.stringify({ a: 2 }, null, " "); // '{\n "a": 2\n}'

使用制表符(\t)来缩进:

  1. JSON.stringify({ uno: 1, dos : 2 }, null, '\t')
  2. // '{ \
  3. // "uno": 1, \
  4. // "dos": 2 \
  5. // }'

toJSON 方法

如果一个被序列化的对象拥有 toJSON 方法,那么该 toJSON 方法就会覆盖该对象默认的序列化行为:不是那个对象被序列化,而是调用 toJSON 方法后的返回值会被序列化,例如:

  1. var obj = {
  2. foo: 'foo',
  3. toJSON: function () {
  4. return 'bar';
  5. }
  6. };
  7. JSON.stringify(obj); // '"bar"'
  8. JSON.stringify({x: obj}); // '{"x":"bar"}'

JSON.stringify用作 JavaScript

注意JSON不是javascript严格意义上的子集,在JSON中不需要省略两条终线(Line separator和Paragraph separator)但在JavaScript中需要被省略。因此,如果JSON被用作JSONP时,下面方法可以使用:

  1. function jsFriendlyJSONStringify (s) {
  2. return JSON.stringify(s).
  3. replace(/\u2028/g, '\\u2028').
  4. replace(/\u2029/g, '\\u2029');
  5. }
  6. var s = {
  7. a: String.fromCharCode(0x2028),
  8. b: String.fromCharCode(0x2029)
  9. };
  10. try {
  11. eval('(' + JSON.stringify(s) + ')');
  12. } catch (e) {
  13. console.log(e); // "SyntaxError: unterminated string literal"
  14. }
  15. // No need for a catch
  16. eval('(' + jsFriendlyJSONStringify(s) + ')');
  17. // console.log in Firefox unescapes the Unicode if
  18. // logged to console, so we use alert
  19. alert(jsFriendlyJSONStringify(s)); // {"a":"\u2028","b":"\u2029"}

使用 JSON.stringify 结合 localStorage 的例子

一些时候,你想存储用户创建的一个对象,并且,即使在浏览器被关闭后仍能恢复该对象。下面的例子是 JSON.stringify 适用于这种情形的一个样板:

  1. // 创建一个示例数据
  2. var session = {
  3. 'screens' : [],
  4. 'state' : true
  5. };
  6. session.screens.push({"name":"screenA", "width":450, "height":250});
  7. session.screens.push({"name":"screenB", "width":650, "height":350});
  8. session.screens.push({"name":"screenC", "width":750, "height":120});
  9. session.screens.push({"name":"screenD", "width":250, "height":60});
  10. session.screens.push({"name":"screenE", "width":390, "height":120});
  11. session.screens.push({"name":"screenF", "width":1240, "height":650});
  12. // 使用 JSON.stringify 转换为 JSON 字符串
  13. // 然后使用 localStorage 保存在 session 名称里
  14. localStorage.setItem('session', JSON.stringify(session));
  15. // 然后是如何转换通过 JSON.stringify 生成的字符串,该字符串以 JSON 格式保存在 localStorage 里
  16. var restoredSession = JSON.parse(localStorage.getItem('session'));
  17. // 现在 restoredSession 包含了保存在 localStorage 里的对象
  18. console.log(restoredSession);

javascript的常用操作(三)的更多相关文章

  1. 请写出JavaScript中常用的三种事件。

    请写出JavaScript中常用的三种事件. 解答: onclick,onblur,onChange

  2. JavaScript 字符串常用操作

    JavaScript 字符串用于存储和处理文本.因此在编写 JS 代码之时她总如影随形,在你处理用户的输入数据的时候,在读取或设置 DOM 对象的属性时,在操作 Cookie 时,在转换各种不同 Da ...

  3. JavaScript 字符串常用操作纪要

    JavaScript 字符串用于存储和处理文本.因此在编写 JS 代码之时她总如影随形,在你处理用户的输入数据的时候,在读取或设置 DOM 对象的属性时,在操作 Cookie 时,在转换各种不同 Da ...

  4. JavaScript数组常用操作

    前言 相信大家都用惯了jquery或者underscore等这些类库中常用的数组相关的操作,如$.isArray,_.some,_.find等等方法.这里无非是对原生js的数组操作多了一些包装. 这里 ...

  5. mongodb的常用操作(三)

    继续mongodb的学习和总结: 11.mongodb的mapreduce功能 mapreduce可以说是mongodb的一个很强大的功能,可以实现复杂的运算和统计,做一个简要的总结: 假设有user ...

  6. JavaScript数组常用操作总结

    我们在日常开发过程中,使用到原生 JavaScript的时候,有时候会频繁的对数组进行操作,今天我把工作以来,经常用到的有关 JavaScript数组的方法总结一下,方便日后工作的时候查找使用! 一. ...

  7. JavaScript DOM 常用操作

    1.理解DOM: DOM(Document Object Model ,文档对象模型)一种独立于语言,用于操作xml,html文档的应用编程接口. 怎么说,我从两个角度理解: 对于JavaScript ...

  8. javascript的常用操作(一)

    1.  实时监听input的值变化 onchange事件只在键盘或者鼠标操作改变对象属性,且失去焦点时触发,脚本触发无效; 而onkeydown/onkeypress/onkeyup在处理复制.粘贴. ...

  9. javascript中常用操作字符串的几种方法charAt()、indexOf()、slice()、substr()

    一.charAt(index) 返回一个字符串某一个索引的字符. 语法:str.charAt(index); var str='我是中国人'; console.log(str.charAt(3));/ ...

随机推荐

  1. java虚拟机内存

    -Xmx10240m:代表最大堆  -Xms10240m:代表最小堆  -Xmn5120m:代表新生代  -XXSurvivorRatio=3:代表Eden:Survivor = 3    根据Gen ...

  2. linux下sed批量替换文件内容

    在linux超级终端下编辑文档是件比较麻烦的事情,下面简单介绍一下如何在linux下批量替换文件内容 linuxsed 批量替换多个文件中的字符串 格式: sed -i "s/查找字段/替换 ...

  3. SQL 动态拼接SQL 语句

    USE [PMS_UnifiedDB_15] GO /****** Object: StoredProcedure [dbo].[SP_GetLogInfo] Script Date: 2/11/20 ...

  4. linux添加软件的service start/stop快捷服务(简单版)

    首先我们先需要一款软件,例如“apache” 安装解压至相应目录“/home/aaa/apache” 开始操作:进入“/etc/init.d/”中,新建一个service服务运行脚本“tomcat”, ...

  5. [WIP]laravel 入门

    创建: 2019/06/20 安装    composer brew install composer  laravel composer global require "laravel/i ...

  6. SAS笔记(2) RETAIN语句

    本文重点: 使用RETIAN,INPUT在每次循环执行时保留上一次PDV中的变量值. SUM语句和SET语句会自动RETAIN变量. 1. RETAIN语句 1.1 Example 1 先来看看在DA ...

  7. Unity3D -- shader语法内置函数

    该篇是Unity Shader中HLSL的内置函数,主要是一些数学方面的计算函数.在写Shader的时候可以直接使用. abs //计算输入值的绝对值. acos //返回输入值反余弦值. all / ...

  8. iOS通过SocketRocket实现websocket的即时聊天

    之前公司的即时聊天用的是常轮循,一直都觉得很不科学,最近后台说配置好了socket服务器,我高兴地准备用asyncsocket,但是告诉我要用websocket,基于HTML5的,HTML5中提出了一 ...

  9. OJDBC版本区别:ojdbc14.jar,ojdbc5.jar和ojdbc6.jar的区别

    classes12.jar - for Java 1.2 and 1.3ojdbc14.jar - for Java 1.4 and 1.5ojdbc5.jar - for Java 1.5ojdbc ...

  10. Linux 下的dd命令使用详解

    转自:https://www.cnblogs.com/jikexianfeng/p/6103500.html 一.dd命令的解释 dd:用指定大小的块拷贝一个文件,并在拷贝的同时进行指定的转换. 注意 ...