前言:

ajax的出现,一定程度上改变了js的命运,同时也被广泛使用,而jq的兴起也大大降低了ajax的使用难度。虽然,jq的ajax方法使用起来十分便利,但是大部分开发人员也仅仅只是对其中的几个属性比较熟悉,当然也包括我。其中用的最多的是url、data、dataType、type、success、error和complete这几个,完整的代码格式如下:

$.ajax({

  url: '/ajax/getInfo',

  type: 'GET', //或POST

  data: { name: 'jack' },

  dataType: 'json',

  success: function(d){},

  error: function(e){},

  complete: function(){}

});

这里我就不一一赘述上面每个属性的意思了,不知道的可以查询jq的API。

在大部分情况下基本上是不会出问题的,但是遇到一些特殊情况时,后台常常拿不到数据,这是为什么呢?

正文:

首先,我们修改一下传输到后台的数据格式

$.ajax({

  url: '/ajax/getInfo',

  type: 'POST', //这里以POST为例,GET请求的接收方式各不相同所以这里不进行讨论

  data: {

    name: 'jack' ,

    friends: [{

      name: 'rose',

      sex: 'female'

    },{ 

      name: 'lily',

      sex: 'female'

    }]

  },

  dataType: 'json',

  success: function(d){},

  error: function(e){},

  complete: function(){}

});

以下说明完全是基于使用框架的接收方式,不涉及自己编写的接收器(如果完全是自己手动编写代码接收的话任意格式数据均能接收)。

如果是以上形式的数据格式(这里我们将其称为“复杂数据格式”)在JAVA的Spring MVC框架中是无法接收的,同样Nodejs的Express框架也无法接收。

既然以上的复杂数据格式无法接收,那么我们就需要找到一种能够正确接收的方式。

经过查阅网上的资料我发现将json数据转换成json字符串,并且在ajax的配置项中加入contentType即可,如下:

var sendData =

{

  name: 'jack' ,

  friends: [{

    name: 'rose',

    sex: 'female'

  },{ 

    name: 'lily',

    sex: 'female'

  }]

};

$.ajax({

  url: '/ajax/getInfo',

  type: 'POST', //这里以POST为例,GET请求的接收方式各不相同所以这里不进行讨论

  data: JSON.stringify(sendData),

  contentType: "application/json;charset=utf-8", //默认的contentType为application/x-www-form-urlencoded; charset=utf-8

  dataType: 'json',

  success: function(d){},

  error: function(e){},

  complete: function(){}

});

总结:

如果使用简单的json格式进行POST请求时,我们不需要做什么特殊处理,但是如果要将复杂数据格式传给后台时,我们必须将数据转换成字符串,然后ajax配置项中加入contentType: "application/json;charset=utf-8"。

ajax通讯之格式详解的更多相关文章

  1. 以太网帧格式、IP数据报格式、TCP段格式+UDP段格式 详解

    转载:http://www.cnblogs.com/lifan3a/articles/6649970.html 以太网帧格式.IP数据报格式.TCP段格式+UDP段格式 详解   1.ISO开放系统有 ...

  2. java分享第十五天(log4j 格式详解)

    log4j 格式详解  log4j.rootLogger=日志级别,appender1, appender2, -. 日志级别:ALL<DEBUG<INFO<WARN<ERRO ...

  3. php 序列化(serialize)格式详解

    1.前言 PHP (从 PHP 3.05 开始)为保存对象提供了一组序列化和反序列化的函数:serialize.unserialize.不过在 PHP 手册中对这两个函数的说明仅限于如何使用,而对序列 ...

  4. Java字节码(.class文件)格式详解(一)

    原文链接:http://www.blogjava.net/DLevin/archive/2011/09/05/358033.html 小介:去年在读<深入解析JVM>的时候写的,记得当时还 ...

  5. jQuery Pagination Ajax分页插件中文详解(摘)

    jQuery Pagination Ajax分页插件中文详解 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxin ...

  6. Android查缺补漏(IPC篇)-- 款进程通讯之AIDL详解

    本文作者:CodingBlock 文章链接:http://www.cnblogs.com/codingblock/p/8436529.html 进程间通讯篇系列文章目录: Android查缺补漏(IP ...

  7. PNG,JPEG,BMP,JIF图片格式详解及其对比

    原文地址:http://blog.csdn.net/u012611878/article/details/52215985 图片格式详解 不知道大家有没有注意过网页里,手机里,平板里的图片,事实上,图 ...

  8. binlog之四:mysql中binlog_format模式与配置详解,binlog的日志格式详解

    mysql复制主要有三种方式:基于SQL语句的复制(statement-based replication, SBR),基于行的复制(row-based replication, RBR),混合模式复 ...

  9. Android查缺补漏(IPC篇)-- 进程间通讯之AIDL详解

    本文作者:CodingBlock 文章链接:http://www.cnblogs.com/codingblock/p/8436529.html 进程间通讯篇系列文章目录: Android查缺补漏(IP ...

随机推荐

  1. 威纶触摸屏和三菱PLC3S之间的通信设置

    触摸屏软件中: PLC型号:FX3U\FX3G 接口类型:RS-485 4W 端口:COM2(19200,E,7,1)

  2. sokite

    <?php interface Proto { //连接 function conn($url); //发送get请求 function get(); //发送post请求 function p ...

  3. npm 替换为 cnpm

    最近执行npm安装组件时特别慢,网上建议可以换为cnpm,cmd命令:npm install -g cnpm --registry=https://registry.npm.taobao.org 可是 ...

  4. Linux入侵检查思路及其命令 转自https://yq.aliyun.com/articles/24250?spm=5176.100239.blogcont24249.12.rbBrIh

    摘要: 若Linux操作系统被非法入侵,那么有哪些思路和系统命令用于检查系统当前的状态呢?主要包括对关键进程.关键服务.关键文件的检测,同时及时备份硬盘数据用于持续分析.详细的检查思路和Linux命令 ...

  5. 【SharePoint学习笔记】第3章 SharePoint列表新特性以及数据访问

    第3章 SharePoint列表新特性以及数据访问   使用CAML查询语言     CAML:协作应用程序标记语言 Collaboration Application Markup Language ...

  6. CANVAS 水波动态背景

    参考:https://github.com/cyclegtx/wave_background 做的水波背景,以后可能会用到哈! 效果如下: 代码如下: <!DOCTYPE html> &l ...

  7. LeetCode "Arranging Coins"

    A simple math.. take care of data overflow though. class Solution { public: int arrangeCoins(int n) ...

  8. 前端 动态表单提交(post、put)

    第一步:form表单定义统一属性 <input type="text" class="form-value" /> 第二步:获取所有值 var fo ...

  9. 服务端性能测试工具校验v1.1

    服务端性能测试工具校验v1.1 更新说明: 1.精简CRT运行库支持. 2.添加响应模拟测试,校验压力测试工具的响应时间统计准确性. 3.大并发请求请降低延迟时间 WEIMJSAM原创,转载请注明出处 ...

  10. ANY数据类型的使用

      程序举例: TAR1 #T_AR1 //save addressregister 1 TAR2 #T_AR2 //save addressregister 2 LAR1 P##DST_BLOCK_ ...