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格式的数据进行交互的更多相关文章

  1. 异步请求Ajax(取得json数据)

    异步请求Ajax 没有学习Ajax之前请求数据的时候都是整个页面全部刷新了一次,也就是每次请求都会重新请求所有的资源.但是在很多时候不需要页面全部刷新,仅仅是需要页面的局部数据刷新即可,此时需要发送异 ...

  2. Json实现异步请求(提交评论)

    主要将代码粘贴,通过阅读代码理解当中的相关逻辑. html代码: <form id="form1" runat="server"> <p> ...

  3. vue中使用axios(异步请求)和mock.js 模拟虚假数据

    一.使用axios 1.安装 npm install --save axios 2.引用 import Axios from 'axios' Vue.prototype.Axios = Axios 二 ...

  4. vue中axios的post请求使用form表单格式发送数据

    vue使用插件qs实现 (qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库.) 在jquery中的ajax的方法已将此封装,所以不需要再次序列化 1. 安装   在项目中使用命令行工具输 ...

  5. 异步请求获取JSON数据

    json格式的数据广泛应用于异步请求中前后端的数据交互,本文主要介绍几种使用场景和使用方法. <script type="text/javascript"> funct ...

  6. 同步请求与异步请求Json

    同步请求的返回值类型 : void : 啥也不返回 String :表示逻辑视图名 ModelAndView:该对象既有逻辑视图名,还可以携带去页面要展示的数据 同步请求:如何将controller层 ...

  7. vue--axios异步请求及文件目录结构分析(个人记录)

    我这里使用axios进行异步加载 axios是一个库,并不是vue中的第三方插件,使用时不能通过Vue.use()安装插件,需要在原型上进行绑定,即直接在main.js中使用Vue.prototype ...

  8. 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求

    转http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/ 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求 ...

  9. Ajax与ashx异步请求的简单案例

    Ajax与ashx异步请求的简单案例: 前台页面(aspx): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...

随机推荐

  1. 序列化、反序列化(Serializable特性)

    //需要被实例化的类 using System.Collections; using UnityEngine; [Serializable] public class SerializableClas ...

  2. python 全栈开发,Day1

    python基础一 一,Python介绍 python的出生与应用 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆(中文名字:龟叔)为 ...

  3. 前端的UI设计与交互之数据录入篇

    数据录入是获取对象信息的重要交互方式,用户会频繁的增加.修改或删除信息.多种多样的文本录入和选择录入方式帮助用户更加清晰和高效的完成这项体验.设计者应当注意这几点:为初级用户/偶尔访问的用户提供简单易 ...

  4. 【Python】 垃圾回收机制和gc模块

    垃圾回收机制和gc模块 Py的一个大好处,就是灵活的变量声明和动态变量类型.虽然这使得学习py起来非常方便快捷,但是同时也带来了py在性能上的一些不足.其中相关内存比较主要的一点就是py不会对已经销毁 ...

  5. http,socks4,socks5代理的区别

    HTTP代理 能够代理客户机的HTTP访问,主要是代理浏览器访问网页,它的端口一般为80.8080.3128等: SOCKS代理 SOCKS代理与其他类型的代理不同,它只是简单地传递数据包,而并不关心 ...

  6. Nginx技巧——Nginx/Apache下禁止指定目录运行PHP脚本(转自运维之美)

    网站程序的上传目录通常是不需要PHP执行解释权限,通过限制目录的PHP执行权限可以提网站的安全性,减少被攻击的机率. 下面和大家一起分享下如何在Apache和Nginx禁止上传目录里PHP的执行权限. ...

  7. java数组排序,并将数组内的数据求和

    java数据编列并求和,江湖我狼哥,人狠话不多,直接上代码! import java.util.Arrays; public class Intarry { public static void ma ...

  8. 开始补习JavaScript的第一天

    JavaScript介绍: ①.JavaScript是一种解释性的,基于对象的脚本语言. ②.JavaScript是一种轻量级的编程语言,可以嵌入到html页面中,由浏览器来解释执行. ③.JavaS ...

  9. Java并发编程实战(chapter_2)(对象发布、不变性、设计线程安全类)

    一.发布与溢出 "发布(Publish)"一个对象的意思是指,使对象能够在当前作用于之外的代码中使用.这个"之外",尤为关键,各种出问题的地方,都是因为这个&q ...

  10. 2017-2018-1 Java演绎法 第二周 作业

    团队任务:讨论Android上的游戏软件 参考现代软件工程 第一章 [概论]练习与讨论: 软件有很多种,也有各种分类办法,本次团队任务是讨论选取Android上的一个游戏软件,考虑到每位组员接触的游戏 ...