前端与后台服务交互--json处理的流程以及用到的工具代码
现在的开发趋势基本上是前后端分离,并且前端和后端的交互一般是用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处理的流程以及用到的工具代码的更多相关文章
- web前端与后台数据交互
1.前端请求数据URL由谁来写? 在开发中,URL主要是由后台来写的,写好了给前端开发者.如果后台在查询数据,需要借助查询条件才能查询到前端需要的数据时,这时后台会要求前端提供相关的查询参数,这里的查 ...
- concurrently - npm 同时运行前端和后台服务
项目基于vue(前端)+node(后台),需要启动两个服务 0.文件夹结构及package.json内容: 1.客户端 npm run dev 2.服务器 cd server npm run serv ...
- sj 网页前端与后台数据交互的3种方式
1.ajax 网页访问 2.form 表单 用户名<input class="yonghu" type="text" id="user&quo ...
- 前端必备——js中前端与后台的数据交互全解
只要编程语言能够支持网卡端口的监听和发送,理论上都是可以实现服务器后台设计的.也因此造成了实现后台的语言偏多,而web前端语言以html/css/js为主.所以在这里我们不涉及后台的设计,只介绍在we ...
- 通过AngularJS实现前端与后台的数据对接(二)——服务(service,$http)篇
什么是服务? 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性. 服务是一个单例对象,在每个应用中只会被实例化一次(被$injector实例化) ...
- --@angularJS--自定义服务与后台数据交互小实例
1.myService.html: <!DOCTYPE HTML><html ng-app="app"><head> <title& ...
- 一周一个小demo — 前端后台的交互实例
这一周呢,本K在大神的指导下,完成了一个利用ajax与php文件上传处理相结合的一个留言板功能的小实例,下面就让本K来带大家瞅瞅如何实现这一种功能. 一.界面概览 首先我们来看一下这个小demo的具体 ...
- SNF快速开发平台MVC-EasyUI3.9之-WebApi和MVC-controller层接收的json字符串的取值方法和调用后台服务方法
最近项目组很多人问我,从前台页面传到后台controller控制层或者WebApi 时如何取值和运算操作. 今天就都大家一个在框架内一个取值技巧 前台JS调用代码: 1.下面是选中一行数据后右键点击时 ...
- 正确的前端传后台json方式
DEMO: var data=JSON.stringify({"page": {"pagenow": 1,"pagesize": 20},& ...
随机推荐
- 爬虫初窥day2:正则
正则在线测试 http://tool.oschina.net/regex https://www.regexpal.com/ http://tool.chinaz.com/regex exp1:筛选所 ...
- 统计方形(NOIP1997)
给链接:统计方形 这题是棋盘问题的数据加强版. 其实由于洛谷的数据比较水,所以你把我在棋盘问题题解中写的代码提交,也能AC. 但让给我们来看一个更优的解法. 先给代码: #include<bit ...
- optimizer_switch引起的诡异问题
参数描述 MySQL中不同的版本优化器会有很多新特性,比如MRR.BKA等,optimizer_switch这个参数就是控制查询优化器怎样使用这些特性.很多情况下我们会根据自身的需求去设置optimi ...
- Java ClassLoad详解
Java ClassLoad详解 类加载器是 Java 语言的一个创新,也是 Java 语言流行的重要原因之一.它使得 Java 类可以被动态加载到 Java 虚拟机中并执行.类加载器从 JDK 1. ...
- c#泛型与其他语言的对比(深入理解c#)
1.同c++模板的对比: c++模板有点像是发展到极致的宏.他们非常强大,但代价就是代码膨胀和不易理解. 在c++中使用一个模板时,会为那一套特定的模板实参编译代码,好在模板实参本来就在源代码中一样. ...
- kbmmw ORM 对象定义语法简析
使用kbmmw 的ORM 一定先要了解ORM 的对象定义语法. 下面简单说一下 // kbmMW_Table - Define a table. 定义一个表 // Must be used on cl ...
- set集合的排序
在hibernate的OneToMany的实体关联的时候,one端的set是无序的,可是需要按照顺序来搞的话就比较麻烦了. 下面给出一个例子. Set<DiaryPicture> diar ...
- 纯css实现蒙层loading效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Codeforces Round #538 (Div. 2) E 随机数生成
https://codeforces.com/contest/1114/problem/E 题意 交互题,需要去猜一个乱序的等差数列的首项和公差,你能问两种问题 1. 数列中有没有数比x大 2. 数列 ...
- boost--BOOST_AUTO、typeof、result_of
1.BOOST_AUTO BOOST_AUTO的功能类似于auto和any,可以用来定义任意类型数据,且可以在编译时自动推导出表达式的类型.BOOST_AUTO属于boost中的typeof库,使用需 ...