JSON(四)——异步请求中前后端使用Json格式的数据进行交互
json格式的数据广泛应用于异步请求中前后端的数据交互,本文主要介绍几种使用场景和使用方法。
一,json格式字符串
<input type="button" id="testBtn" value="测试按钮" onclick="sentAjax();"/><br>
<script type="text/javascript">
function sentAjax(){
$.ajax({
type: 'POST',
url:"<%=basePath%>/manage/test/ajax",
dataType : "json",
success: function(result){
//这里result是一个符合json格式的js对象
//alert(result.name);
//alert(result[0].name);
//alert(result.listUser[0].name); }
});
}
</script>
java代码
@RequestMapping(value = "/ajax")
public void testAjax(HttpServletRequest request, HttpServletResponse response){ try {
String jsonStr1 = "{\"name\":\"张三\",\"age\":23}";
String jsonStr2 = "[{\"name\":\"张三\",\"age\":1},{\"name\":\"李四\",\"age\":24}]";
String jsonStr3 = "{\"listUser\": [{\"name\":\"张三\",\"age\":1},{\"name\":\"李四\",\"age\":24}] }";
response.setCharacterEncoding("utf-8");//响应字符集的编码格式
response.getWriter().print(jsonStr3);
} catch (IOException e) {
e.printStackTrace();
} }
另外使用spring的@ResponseBody这个注解的话还可以这样写
@RequestMapping("/ajax")
@ResponseBody
public Object testAjax1(HttpServletRequest request, HttpServletResponse response){
String jsonStr1 = "{\"name\":\"张三\",\"age\":23}";
String jsonStr2 = "[{\"name\":\"张三\",\"age\":1},{\"name\":\"李四\",\"age\":24}]";
String jsonStr3 = "{\"listUser\": [{\"name\":\"张三\",\"age\":1},{\"name\":\"李四\",\"age\":24}] }";
return jsonStr1;
}
二,java对象
@RequestMapping(value = "/ajax")
public void testAjax2(HttpServletRequest request, HttpServletResponse response){ try {
User user = new User();
user.setName("张三");
user.setAge(23);
JSONObject jsonObject = JSONObject.fromObject(user);
response.setCharacterEncoding("utf-8");//响应字符集的编码格式
response.getWriter().print(jsonObject.toString());
} catch (IOException e) {
e.printStackTrace();
} }
使用以上的方式的话要先把java对象转换成json格式的字符串。
下面使用springmvc的@ResponseBody这个注解,也是在springmvc的web项目开发中经常用到的。
@RequestMapping(value = "/ajax")
@ResponseBody
public Object testAjax3(HttpServletRequest request, HttpServletResponse response){
User user = new User();
user.setName("张三");
user.setAge(23);
return user;
}
在这里@ResponseBody这个注解对于json格式数据的解析用到了jackson这个框架另外它对响应对象response进行了封装,这让我们在异步请求中使用json格式的数据进行数据交互更加的方便。它的实现原理如下:
@RequestMapping(value = "/ajax4")
public void testAjax4(HttpServletRequest request, HttpServletResponse response){ try {
User user = new User();
user.setName("张三");
user.setAge(23);
ObjectMapper mapper = new ObjectMapper();
String userStr = mapper.writeValueAsString(user);
response.setCharacterEncoding("utf-8");//响应字符集的编码格式
response.getWriter().print(userStr);
} catch (IOException e) {
e.printStackTrace();
} }
另外在使用json格式数据交互时如有以下用法:
@RequestMapping(value = "/ajax5")
@ResponseBody
public Object testAjax5(HttpServletRequest request, HttpServletResponse response){ Map<String,Object> jsonMap = new HashMap();
String jsonStr1 = "{\"name\":\"张三\",\"age\":23}";
jsonMap.put("json", jsonStr1); return jsonMap; }
前段应该这样写:
<script type="text/javascript">
function sentAjax(){
$.ajax({
type: 'POST',
url:"<%=basePath%>/manage/test/ajax5",
dataType : "json",
success: function(result){
//result.json取到的只是map在前端转换成json格式js对象时key为'json'对应的字符串的值,在前段json格式的字符串转换成json格式js对象推荐使用 JSON.parse()这个函数。
var jsonStr = JSON.parse(result.json);
alert(jsonStr.name)
}
});
}
</script>
最后说一点,我们作为程序员,研究问题还是要仔细深入一点的。当你对原理了解的有够透彻,开发起来也就得心应手了,很多开发中的问题和疑惑也就迎刃而解了,而且在面对其他问题的时候也可做到触类旁通。当然在开发中没有太多的时间让你去研究原理,开发中要以实现功能为前提,可等项目上线的后,你有大把的时间或者空余的时间,你大可去刨根问底,深入的去研究一项技术,为觉得这对一名程序员的成长是很重要的事情。
JSON(四)——异步请求中前后端使用Json格式的数据进行交互的更多相关文章
- 异步请求Ajax(取得json数据)
异步请求Ajax 没有学习Ajax之前请求数据的时候都是整个页面全部刷新了一次,也就是每次请求都会重新请求所有的资源.但是在很多时候不需要页面全部刷新,仅仅是需要页面的局部数据刷新即可,此时需要发送异 ...
- Json实现异步请求(提交评论)
主要将代码粘贴,通过阅读代码理解当中的相关逻辑. html代码: <form id="form1" runat="server"> <p> ...
- vue中使用axios(异步请求)和mock.js 模拟虚假数据
一.使用axios 1.安装 npm install --save axios 2.引用 import Axios from 'axios' Vue.prototype.Axios = Axios 二 ...
- vue中axios的post请求使用form表单格式发送数据
vue使用插件qs实现 (qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库.) 在jquery中的ajax的方法已将此封装,所以不需要再次序列化 1. 安装 在项目中使用命令行工具输 ...
- 异步请求获取JSON数据
json格式的数据广泛应用于异步请求中前后端的数据交互,本文主要介绍几种使用场景和使用方法. <script type="text/javascript"> funct ...
- 同步请求与异步请求Json
同步请求的返回值类型 : void : 啥也不返回 String :表示逻辑视图名 ModelAndView:该对象既有逻辑视图名,还可以携带去页面要展示的数据 同步请求:如何将controller层 ...
- vue--axios异步请求及文件目录结构分析(个人记录)
我这里使用axios进行异步加载 axios是一个库,并不是vue中的第三方插件,使用时不能通过Vue.use()安装插件,需要在原型上进行绑定,即直接在main.js中使用Vue.prototype ...
- 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求
转http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/ 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求 ...
- Ajax与ashx异步请求的简单案例
Ajax与ashx异步请求的简单案例: 前台页面(aspx): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...
随机推荐
- AVL树(Java实现)
AVL树基本介绍 AVL树是一种自平衡的二叉查找树,在AVL树中任何节点的两个子树的高度差不能超过1.就是相当于在二叉搜索树的基础上,在插入和删除时进行了平衡处理. 不平衡的四种情况 LL:结构介绍 ...
- 用C#语言编写:集合管理器
static void Main(string[] args) { List<int> numbers = new List<int>(); ...
- java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderListene解决办法
照着以前写的项目搭一个框架,项目用到的是ssm,spring+spring mvc+mybatis,由Eclipse转战IDEA上,项目的文件夹有一些改变,在之前的小项目中喜欢把lib文件夹放在项目根 ...
- Eclipse设置新建jsp文件默认模板
没有需求就没有进步,遇到问题:现在有大量的html模板页面,但是这些模板是不能和后台进行数据交互的,所以要把他们通通变成jsp页面(59个html文件),还有就是html文件转换成jsp文件的时候,前 ...
- [模拟赛] T2 混合图
Description Hzwer神犇最近又征服了一个国家,然后接下来却也遇见了一个难题. Hzwer的国家有n个点,m条边,而作为国王,他十分喜欢游览自己的国家.他一般 会从任意一个点出发,随便找边 ...
- Android_内部文件读取
我们这里做一个安卓的简易的文件读取程序之记住密码 首先我们先明确安卓的存储路径, 所有安装至手机的应用都会在 data/data 目录下生成一个安卓文件夹(包名),这个文件夹就是安卓存储的路径 在运行 ...
- 【Python】 Selenium 模拟浏览器 寻路
selenium 最开始我碰到SE,是上学期期末,我们那个商务小组做田野调查时发的问卷的事情.当时在问卷星上发了个问卷,但是当时我对另外几个组员的做法颇有微词,又恰好开始学一些软件知识了,就想恶作剧( ...
- JQuery :contains选择器,可做搜索功能,搜索包含关键字的dom
假设有一个加油站列表,找到所有包含某某关键字的加油站. 选择所有包含 "is" 的 <p> 元素: $("p:contains(is)") 搜索功能 ...
- ZJOI2018游记
我是一只普及组的菜鸡,我很菜 我参加 \(ZJOI\) 只是来试试水(水好深啊~),看看大佬(差距好大啊~),以后要好好学习 \(day0\) 下午2:00,颁奖 还以为要到很晚,还是挺快的 \(da ...
- 【LATEX】个人版latex论文模板
以下是我的个人论文模板,运行环境为Xelatex(在线ide:Sharelatex.com) 鉴于本人常有插入程序的需求,故引用了lstlisting \RequirePackage{ifxetex} ...