现在的开发趋势基本上是前后端分离,并且前端和后端的交互一般是用json:

前端:

前端一般传输的是对象,那把对象变成json,需要引用的是json2.js这个js文件中的JSON.stringfy()方法,这个方法的解释如下:

JSON.stringify({});                        // '{}'
JSON.stringify(true); // 'true'
JSON.stringify("foo"); // '"foo"'
JSON.stringify([1, "false", false]); // '[1,"false",false]'
JSON.stringify({ x: 5 }); // '{"x":5}'

 

例子:

var content = {"name": raw_content,"age":"24","sex":"0"};

(把jsonContent作为ajax的data发送到后端)

$.ajax({
type : "post",
contentType: 'application/json',
data :JSON.stringify(content ),
url : "/BD-ISP/Business/rest/demo/add",
success : function(data) {
console.log(data);
}
});

如果往后台发送是json的话(加上JSON.stringify()),就是类似下面的这种:

如果ajax发送的data不含有JSON.stringify()的话:

$.ajax({
type : "post",
contentType: 'application/json',
data :content ,
url : "/BD-ISP/Business/rest/demo/add",
success : function(data) {
console.log(data);
}
});

那结果就类似这样:

后端:

public XXX   xxx(@RequestBody DTO dto){

}

其中DTO对象就是包含hash、token、raw、time属性的对象,就是上面json的对象,其中raw中包含的是实际有效的数据对象

注意ajax往后台发送的时候,必须是JSON.stringify(data)这种方式

后台先获取raw,然后再把raw转成hashmap,然后再把hashmap转成有效数据对象 (当然也可以一步到位,直接把json对象直接转成有效数据对象,如果是Jackson的话,参考:https://www.cnblogs.com/winner-0715/p/6109225.html)

hashmap转bean的方法:用到的jar包是jodd

/**
* 从传输对象内获取实际的对象
* @param cls 实际数据对象的类型
* @return
*/
public Object getConverObject(Class cls){
JsonParser jp = new JsonParser();
MapToBean mapToBean = new MapToBean(jp,cls.getName());
return mapToBean.map2bean((Map) ((Map)this.getRaw()), cls);
}

后端返回数据给前端:后端有效数据(对象)先转成json   还是使用jackson 中的ObjectMapper.writeValueAsString(Object object)

然后在对返回的数据对象进行包装,利用spring的@ResponseBody注解,就会把json格式的数据返回给前端

前端与后台服务交互--json处理的流程以及用到的工具代码的更多相关文章

  1. web前端与后台数据交互

    1.前端请求数据URL由谁来写? 在开发中,URL主要是由后台来写的,写好了给前端开发者.如果后台在查询数据,需要借助查询条件才能查询到前端需要的数据时,这时后台会要求前端提供相关的查询参数,这里的查 ...

  2. concurrently - npm 同时运行前端和后台服务

    项目基于vue(前端)+node(后台),需要启动两个服务 0.文件夹结构及package.json内容: 1.客户端 npm run dev 2.服务器 cd server npm run serv ...

  3. sj 网页前端与后台数据交互的3种方式

    1.ajax  网页访问 2.form 表单 用户名<input class="yonghu" type="text" id="user&quo ...

  4. 前端必备——js中前端与后台的数据交互全解

    只要编程语言能够支持网卡端口的监听和发送,理论上都是可以实现服务器后台设计的.也因此造成了实现后台的语言偏多,而web前端语言以html/css/js为主.所以在这里我们不涉及后台的设计,只介绍在we ...

  5. 通过AngularJS实现前端与后台的数据对接(二)——服务(service,$http)篇

    什么是服务? 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性. 服务是一个单例对象,在每个应用中只会被实例化一次(被$injector实例化) ...

  6. --@angularJS--自定义服务与后台数据交互小实例

    1.myService.html: <!DOCTYPE HTML><html ng-app="app"><head>    <title& ...

  7. 一周一个小demo — 前端后台的交互实例

    这一周呢,本K在大神的指导下,完成了一个利用ajax与php文件上传处理相结合的一个留言板功能的小实例,下面就让本K来带大家瞅瞅如何实现这一种功能. 一.界面概览 首先我们来看一下这个小demo的具体 ...

  8. SNF快速开发平台MVC-EasyUI3.9之-WebApi和MVC-controller层接收的json字符串的取值方法和调用后台服务方法

    最近项目组很多人问我,从前台页面传到后台controller控制层或者WebApi 时如何取值和运算操作. 今天就都大家一个在框架内一个取值技巧 前台JS调用代码: 1.下面是选中一行数据后右键点击时 ...

  9. 正确的前端传后台json方式

    DEMO: var data=JSON.stringify({"page": {"pagenow": 1,"pagesize": 20},& ...

随机推荐

  1. cent 7 安装VNC

    1. yum install tigervnc-server; 2.cp /lib/systemd/system/vncserver@.service /etc/systemd/system/vncs ...

  2. Eclipse 安装使用 M2Eclipse 插件

    help --> Install New Software --> Add 安装完后需要重启eclipse 通常 Eclipse 会自带 Maven.但可能按自己安装的 Maven 存在版 ...

  3. HTML5中的Web Notification桌面通知(右下角提示)

    html5桌面通知(Web Notifications)对于需要实现在新消息入线时,有桌面通知效果的情况下非常有用,在此简单介绍一下这个html5的新属性.通过Web Notifications(桌面 ...

  4. 关于win10系统配置变量时,javac编译不出的原因:没用好百度!

    在上班时,用笔记本的win8系统成功配置了java环境,于是想把家里的台式也配置一下,可是配置出来后javac却出不来东东,我很费解,重新下载了2次,还是不行,于是就暂时放弃了.那时是17年12月25 ...

  5. 简单rmi示例

    User类          注意:需要实现序列化 package study.rmi.server; import java.io.Serializable; public class User i ...

  6. 【算法】DP解决旅行路径问题

    问题描述 : After coding so many days,Mr Acmer wants to have a good rest.So travelling is the best choice ...

  7. centos 7 禁止root登录及更改ssh端口号

    vim /etc/ssh/sshd_config PermitRootLogin yes => PermitRootLogin no systemctl restart sshd.service ...

  8. 将爬取的网页数据保存到数据库时报错不能提交JPA,Caused by: java.sql.SQLException: Incorrect string value: '\xF0\x9F\x98\xB6 \xE2...' for column 'content' at row 1

    错误原因:我们可以看到错误提示中的字符0xF0 0x9F 0x98 0x84 ,这对应UTF-8编码格式中的4字节编码(UTF-8编码规范).正常的汉字一般不会超过3个字节,为什么为出现4个字节呢?实 ...

  9. 2019.01.21 bzoj3674: 可持久化并查集加强版(主席树+并查集)

    传送门 题意:维护可持久化并查集,支持在某个版本连边,回到某个版本,在某个版本 询问连通性. 思路: 我们用主席树维护并查集fafafa数组,由于要查询历史版本,因此不能够用路径压缩. 可以考虑另外一 ...

  10. 2018.11.24 poj3693Maximum repetition substring(后缀数组)

    传送门 后缀数组好题. 考虑枚举循环节长度lenlenlen. 然后考虑枚举循环节的起点来更新答案. 但是直接枚举每次O(n)O(n)O(n). 考虑枚举len∗k+1len*k+1len∗k+1作为 ...