springmvc+jquery+json
2016-01-20 00:00
671 查看
摘要: springmvc和json的使用
前提是搭建好了是springmvc的环境和引入jquery
//这是jsp的代码 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>主页</title> <script type="text/javascript" src="/<%=request.getContextPath()%>/js/jquery-2.0.3.min.js"></script> </head> <body> this is a json.jsp! <hr> <a href="/springmvc/spring/spring/getChildren">jsontest</a> <input type="submit" onclick="jsontest()" value="json" > <script type="text/javascript"> function jsontest(){ $.ajax( { type : "get", url : "<%=request.getContextPath()%>/spring/spring/getChildren", dataType: "json", success : function(data) { alert("1:"+data[0].name); //jauery循环输出json数据 $.each(data,function(idx,item){ //输出 alert(item.name+"哈哈"+item.age); }) }, error :function(){ alert("2:网络连接出错!"); } }); } </script> </body> </html><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>主页</title> <script type="text/javascript" src="/springmvc/js/jquery-2.0.3.min.js"></script> </head> <body> this is a json.jsp! <hr> <a href="/springmvc/spring/spring/getChildren">jsontest</a> <input type="submit" onclick="jsontest()" value="json" > <hr> <textarea id="jsonv" rows="10" cols="100"></textarea> <script type="text/javascript"> function jsontest(){ $.ajax( { type : "get", url : "<%=request.getContextPath()%>/spring/spring/getChildren", dataType: "json", success : function(data) { //jauery循环输出json数据 $.each(data,function(idx,item){ //输出 var temp=$("#jsonv").val(); $("#jsonv").val(temp+","+item.name+":"+item.age); }) }, error :function(){ alert("2:网络连接出错!"); } }); } </script> </body> </html>
//这是controller的json数据传输 @RequestMapping("getChildren") public @ResponseBody String getChildren(Long objectId) throws Exception { List<Person> trees = new ArrayList<Person>(); for(int i=1;i<9;i++){ Person per=new Person("jack"+i,"1"+i); trees.add(per); } return parseJsonTree(trees); } private String parseJsonTree(List<Person> trees) { StringBuilder children = new StringBuilder(140 * trees.size()); children.append("["); int i=0; Gson gson = new GsonBuilder().create();//com.google.gson.Gson for ( Person tree : trees) { if(i>0){ children.append(","); } children.append(gson.toJson(tree)); i++; } children.append("]"); return children.toString(); }
结果:jack1:11,jack2:12,jack3:13,jack4:14,jack5:15,jack6:16,jack7:17,jack8:18
相关文章推荐
- jquery div显示与隐藏
- Jquery 获得<input type="text" id="test">中的value
- jQuery对象和DOM对象的互相转换
- 区域及分离、Js压缩、css、jquery扩展
- JQuery checkbox check/uncheck
- Jquery学习笔记
- JQuery——级联下拉框
- jQuery中的Ajax总结
- jquery全局ajax参数详细执行分析-$.ajax竟然可以这样用!
- Jquery $.ajax请求详解及ajax全局变量分析
- jQuery Form 表单提交插件-----ajaxForm() 的应用
- jquery ajax返回Internal server error 500错误怎么解决??
- Struts2+Jquery实现ajax并返回json类型数据
- 如何在jQuery的Ajax调用后管理一个重定向请求
- JqueryUI插件dialog实现遮罩层
- wordpress jquery插件分页
- 【原】jQuery与CSS自动生成验证码
- jQuery的各种插入方法
- jquery实现iframe自适应子页面高度
- [翻译]jQuery Mobile入门教程——主题的使用和定制