ajax 加载json对象的实例

最新推荐文章于 2021-08-18 15:53:05 发布
最新推荐文章于 2021-08-18 15:53:05 发布
阅读量772 收藏
点赞数
分类专栏： 感悟 文章标签： ajax 计算机 编程
本文详细介绍了如何在Servlet中使用JSON数据交互，并通过AJAX实现异步请求与响应处理，包括返回文本与JSON数据的方法及在JavaScript中解析与展示JSON数据的实践。

对于json

从servlet中返回给ajax的dataType类型可以是text,json

1、在servlet中构造json文本，再response.getWriter()给ajax，返回json text文本

servlet中，一面一段写在doPost或doGet中，但要相互调用this.doGet(rq,rs)或this.doGet(rq,rs)

用jquery的ajax异步提交，数据必须有一个明确的ID（不再是name，和form提交方式不一样），比如下面jsp中的username就是ID


[java]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
  2.                 response.setContentType("text/html;;charset=utf-8");//注意要是返回文本，那么类型为text/html  
  3.         String username1 = request.getParameter("username");  
  4.         String username = URLDecoder.decode(username1,"UTF-8");  
  5.         StringBuilder message = new StringBuilder("");  
  6.         if(username!=null)  
  7.         {  
  8.             EmployeeDao employeeDao = new EmployeeDao();  
  9.             ArrayList<Employee> employees = employeeDao.select(username);  
  10.               
  11.             if(employees!=null&&employees.size()>0)  
  12.             {  
  13.                  message.append("{\"emp\":[");  
  14. //              for(Employee employee: employees)  
  15. //              {  
  16.                  //对于这样的集合类型的数据，不推荐使用构造字符串的方式来构造json数组  
  17. //                  System.out.println(employee.getEmpNo());  
  18. //                  message.append("{\"eno\":"+employee.getEmpNo()+","+"\"ename\""+employee.getEname()+"}");  
  19. //              }  
  20.                  //为了说明构造json文本，仅使用2条记录  
  21.                  message.append("{\"eno\":"+"\""+employees.get(0).getEmpNo()+"\""+","+"\"ename\""+":"+"\""+employees.get(0).getEname()+"\""+"}");  
  22.                  message.append(",");  
  23.                  message.append("{\"eno\":"+"\""+employees.get(1).getEmpNo()+"\""+","+"\"ename\""+":"+"\""+employees.get(1).getEname()+"\""+"}");  
  24.                  message.append("]}");  
  25.             }  
  26.              PrintWriter out = response.getWriter();  
  27.              out.println(new String(message));  
  28.         }  
  29.           

在ajax中

[plain]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <%@ page language="java" contentType="text/html; charset=utf-8"  
  2.     pageEncoding="utf-8"%>  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  4. <html>  
  5. <head>  
  6. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">  
  7. <title>Insert title here</title>  
  8. <script type="text/javascript" src="js/jquery-1.7.js"></script>  
  9.   
  10.   
  11. <script type="text/javascript">  
  12. function check(){  
  13.     var resultNode = $("#result");  
  14.     var username = $("#username").val();  
  15.       
  16.     $.ajax({  
  17.         url:"ShowEmp_ajax_json2",  
  18.         type:"POST",  
  19.         data:{username:username},  
  20.         dataType:"text",  
  21.         success:function(data){  
  22.             //转换成jquery对象  
  23.             var s = "<table border='1' width='100' height='100'>";  
  24. //          若servlet中采用构造的json语句,jsp返回datatype类型为text  
  25.             var obj = eval("("+data+")");  
  26.                        //这里需要用eval函数，eval() 函数使用的是 JavaScript 编译器，可解析 JSON 文本，然后生成 JavaScript 对象。必须把文本包围在括号中，这样才能避免语法错误：  
  27.             alert(obj);  
  28.             $.each(obj.emp,function(index,element){  
  29.                 alert(element.ename);  
  30.             })  
  31.               
  32.             //遍历方法二或者  
  33.             $(obj.emp).each(function(index){//注意function写法不一样  
  34.                 alert(obj.emp[index].eno);  
  35.             });  
  36.               
  37.             //错误写法  
  38.             $(obj).each(function(index){//这样遍历的是obj，obj是根据得到的整条text转换而来，因为只有一个obj，所以index的都是0，obj.emp[index].eno得到的是emp中第0个对象的数据  
  39.                 alert(obj.emp[index].eno);  
  40.             });  
  41.             s += "</table>";  
  42.             $("#result").html(s);  
  43.               
  44.         }  
  45.     });  
  46. }  
  47. </script>  
  48. </head>  
  49. <body>  
  50.     输入用户名<input type="text" id="username"    />  
  51.     <input type="button" value="查找" onclick="check()" />  
  52.     <div id="result" ></div>  
  53. </body>  
  54. </html>  

2、用字符串构造json数据，返回json对象

servlet中返回application/json

ajax中dateType用json


servlet代码，和上面没有什么区别，主要是把contentype改为application/json

[java]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
  2.         response.setContentType("application/json;charset=utf-8");  
  3.         String username1 = request.getParameter("username");  
  4.         String username = URLDecoder.decode(username1,"UTF-8");  
  5.         StringBuilder message = new StringBuilder("");  
  6.           
  7.         if(username!=null)  
  8.         {  
  9.             EmployeeDao employeeDao = new EmployeeDao();  
  10.             ArrayList<Employee> employees = employeeDao.select(username);  
  11.               
  12.             if(employees!=null&&employees.size()>0)  
  13.             {  
  14.                  message.append("{\"emp\":[");  
  15. //              for(Employee employee: employees)  
  16. //              {  
  17.                  //对于这样的集合类型的数据，不推荐使用构造字符串的方式来构造json数组  
  18. //                  System.out.println(employee.getEmpNo());  
  19. //                  message.append("{\"eno\":"+employee.getEmpNo()+","+"\"ename\""+employee.getEname()+"}");  
  20. //                    
  21. //              }  
  22.                  //为了说明构造json文本，仅使用2条记录  
  23.                  message.append("{\"eno\":"+"\""+employees.get(0).getEmpNo()+"\""+","+"\"ename\""+":"+"\""+employees.get(0).getEname()+"\""+"}");  
  24.                  message.append(",");  
  25.                  message.append("{\"eno\":"+"\""+employees.get(1).getEmpNo()+"\""+","+"\"ename\""+":"+"\""+employees.get(1).getEname()+"\""+"}");  
  26.                    
  27.                  message.append("]}");  
  28.             }  
  29.                  System.out.println(message);  
  30.                  PrintWriter out = response.getWriter();  
  31.                  out.println(new String(message));  
  32.                   
  33.         }  
  34.           
  35.           
  36.     }  
 

jsp中代码

[plain]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <%@ page language="java" contentType="text/html; charset=utf-8"  
  2.     pageEncoding="utf-8"%>  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  4. <html>  
  5. <head>  
  6. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">  
  7. <title>Insert title here</title>  
  8. <script type="text/javascript" src="js/jquery-1.7.js"></script>  
  9. <script type="text/javascript">  
  10. function check(){  
  11.     var resultNode = $("#result");  
  12.     var username = $("#username").val();  
  13.     $.ajax({  
  14.         url:"ShowEmp_ajax_json2",  
  15.         type:"POST",  
  16.         data:{username:username},  
  17.         dataType:"json",//注意此时这里是json  
  18.         success:function(data){  
  19.             //转换成jquery对象  
  20.             var s = "<table border='1' width='100' height='100'>";  
  21. //          //若servlet中采用构造的json语句，jsp返回类型dataType为json对象  
  22.             //写法一、  
  23.             $.each(data.emp,function(index,element){//element是data.emp json数组之中的数据  
  24. //                  alert(element.eno);  
  25.                     s+="<tr>";  
  26.                     s += "<td>"+element.eno+"</td>";  
  27.                     s += "<td>"+element.ename+"</td>";  
  28.                     s+="</tr>";  
  29.             });  
  30.             //写法二、  
  31.             $(data.emp).each(function(index){//将data.emp转换成jquery对象遍历  
  32.                 alert(data.emp[index].eno);  
  33.             });   
  34.             s += "</table>";  
  35.             $("#result").html(s);  
  36.         }  
  37.     });  
  38. }  
  39. </script>  
  40. </head>  
  41. <body>  
  42.     输入用户名<input type="text" id="username"    />  
  43.     <input type="button" value="查找" onclick="check()" />  
  44.     <div id="result" ></div>  
  45. </body>  
  46. </html>  


3、返回json对象，但是在servlet中直接用把一个数组或集合转换成为json类型的数组对象

如果抛出 NestableRuntimeException异常，

 说明没有导包，注意导入相关的jar包

commons-beanutils-1.8.3

commons-lang-2.6 (注：导入最新的 3.1 版本会继续报如下错误)

commons-collections-3.2.1

commons-logging-1.1.1

ezmorph-1.0.6

参考：http://blog.youkuaiyun.com/wugewuge/article/details/8074272

在servlet写法

[java]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
  2.         response.setContentType("application/json;charset=utf-8");  
  3.         String username1 = request.getParameter("username");  
  4.         String username = URLDecoder.decode(username1,"UTF-8");  
  5.         StringBuilder message = new StringBuilder("");  
  6.           
  7.         if(username!=null)  
  8.         {  
  9.             EmployeeDao employeeDao = new EmployeeDao();  
  10.             ArrayList<Employee> employees = employeeDao.select(username);  
  11.              JSONArray jsonArray=JSONArray.fromObject(employees);  
  12.              PrintWriter out = response.getWriter();  
  13.              out.println(jsonArray.toString());//在jsp中的数据类型dataType："json"  
  14.                   
  15.         }  
  16.           
  17.           
  18.     }  

在jsp中

[plain]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <%@ page language="java" contentType="text/html; charset=utf-8"  
  2.     pageEncoding="utf-8"%>  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  4. <html>  
  5. <head>  
  6. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">  
  7. <title>Insert title here</title>  
  8. <script type="text/javascript" src="js/jquery-1.7.js"></script>  
  9. <script type="text/javascript">  
  10. function check(){  
  11.     var resultNode = $("#result");  
  12.     var username = $("#username").val();  
  13.     $.ajax({  
  14.         url:"ShowEmp_ajax_json2",  
  15.         type:"POST",  
  16.         data:{username:username},  
  17.         dataType:"json",//注意此时这里是json  
  18.         success:function(data){  
  19.             //转换成jquery对象  
  20.             var s = "<table border='1' width='100' height='100'>";  
  21.             //若servlet中要是用   
  22. //          JSONArray jsonArray=JSONArray.fromObject(employees);  
  23. //          out.println(jsonArray.toString())  
  24. //          这样的形式返回json对象，那么将相当于返回了一个json数组,  
  25. //          类似这样[{"eno":"7369","ename":"SMITH"},{"eno":"7499","ename":"ALLEN"}]，  
  26. //          而不是这样{"emp":[{"eno":"7369","ename":"SMITH"},{"eno":"7499","ename":"ALLEN"}]}  
  27. //          这样在jsp中就可以直接遍历data这个json数组，不需要再转换，也不需要用data.emp(本身在servlet转换过来的也没有emp),  
  28.   
  29. //          servlet中的contentType为application/json   jsp中dataType为json  
  30.               
  31.             $.each(data,function(index,element){  
  32. //              alert(element.empNo+element.ename);  
  33.                 s+="<tr>";  
  34.                 s += "<td>"+element.empNo+"</td>";  
  35.                 s += "<td>"+element.ename+"</td>";  
  36.                 s += "<td>"+element.job+"</td>";  
  37.                 s += "<td>"+element.mgr+"</td>";  
  38.                 s += "<td>"+element.date+"</td>";  
  39.                 s += "<td>"+element.sal+"</td>";  
  40.                 s += "<td>"+element.comm+"</td>";  
  41.                 s += "<td>"+element.deptNo+"</td>";  
  42.                 s+="</tr>";  
  43.             });  
  44.             s += "</table>";  
  45.             $("#result").html(s);  
  46.         }  
  47.     });  
  48. }  
  49. </script>  
  50. </head>  
  51. <body>  
  52.     输入用户名<input type="text" id="username"    />  
  53.     <input type="button" value="查找" onclick="check()" />  
  54.     <div id="result" ></div>  
  55. </body>  
  56. </html>  
Ajax根据接口信息的关于json格式的解析
Wellfancy的博客
11-18 1368
Ajax根据接口信息的关于json格式的解析，以及获取村民信息的简单案例。
使用Ajax动态加载JSON文件
11-11
使用Ajax动态加载JSON文件的实例源码
ajax 解析json数据
01-12
ajax解析json型的数据，2中方法，有列子，也有注释，很详细。新手可以学习一下。主要就是功能代码。
Ajax中解析Json的两种方法详解
weixin_30407099的博客
06-25 937
eval(); //此方法不推荐 JSON.parse(); //推荐方法 一、两种方法的区别 我们先初始化一个json格式的对象： 　　var jsonDate ='{ "name":"周星驰","age":23 }' 　　var jsonObj = eval( '(' + jsonDate+ ')' ); //eval();方法 　　varjsonObj = JSON...
Jquery ajax方法解析返回的json数据
01-30 397
转自：http://bujuyige.iteye.com/blog/722028 最近在用jquery的ajax方法传递接收json数据时发现一个问题，那就是返回的data数据，有时候可以直接作为json数据使用，可有时候又不行。  经过网友指出，这个问题已经有了比较明确的结论，那就是jquery ajax方法的complete方法是不会处理dataType的，所以如果你是在com
ajax返回json对象.zip
04-15
"Ajax返回JSON对象"这个主题聚焦于Ajax如何处理JSON（JavaScript Object Notation）数据格式，这是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。 1. **Ajax基础**： - **异步通信**：...
php+ajax+json 详解及实例代码
10-20
本篇文章将深入解析 PHP、AJAX 和 JSON 的基本原理，并提供一个简单的实例，帮助初学者理解它们如何协同工作。 首先，让我们了解这三个概念的基础： 1. PHP（Hypertext Preprocessor）是一种服务器端的脚本语言，...
ajax响应json字符串和json数组的实例(详解)
10-20
AJAX（Asynchronous JavaScript and XML）是一种用于创建快速动态网页的技术，它允许网页在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。JSON（JavaScript Object Notation）是一种轻量级的...
jQuery ajax读取本地json文件的实例
10-19
在本实例中，我们将探讨如何使用jQuery的Ajax功能来读取本地的JSON文件，并解析其中的数据。JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。 首先，...
ajax请求时，如何解析json数据？
qq_32616119的博客
08-18 1302
方法1： 设置 ajax 方法的 dataType 属性为 ‘json’。 方法2： 使用 JSON 对象的 parse() 方法解析。 方法3： 使用 eval() 方法，var dataObj = eval("("+data+")")
Ajax的三种实现及JSON解析
03-24
NULL 博文链接：https://bing-zz.iteye.com/blog/1118728
ajax处理返回的json数据
Fenice
02-26 1934
1、返回json字符串：　 /** 将一个字符串输出到浏览器 */ protected void writeJson(String json) { PrintWriter pw = null; try { servletResponse.setContentType("text/plain;charset=UTF-8")
ajax解析JSON数据
xianzi1261618338的专栏
11-04 1119
JSON（javascript object notation“标记"）是一种常用的数据交换格式，与XML类似。其格式为{name:value,...}。逗号相隔的为同级的元素，还可以嵌套包含多层，如{"list":[{"name":"张三","sex":"female"},{"name":"李四","sex":"female"}...]...}。从上可以看出list为下面{"name":"张三"
ajax 对 Json 格式的解析
gaoqiao1988的专栏
06-20 921
ajax 对 Json 格式的解析   Json 的介绍： JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串，然后就可以在函数之间轻松地传递这个字符串，或者在异步应用程序中将字符串从 Web 客户机传递给服务器端程序。   按照最简单的形式，可以用下面这样的 JSON 表示名称/值对： { "firstName": "Brett"
ajax请求时，如何解释json数据？（3种方法）
LuckXinXin的博客
10-22 711
ajax请求时，后台返回的是json字符串，将json字符串转换成json对象的方法如下： a) 把ajax方法中的datatype设置为json b) 用JSON.parse()解析 c) 用eval()解析，var dataObj = eval("("+data+")") ...
ajax解析json方式,ajax解析json的两种方法
weixin_31411427的博客
08-05 454
eval(); //此方法不推荐 JSON.parse(); //推荐方法 一、两种方法的区别 我们先初始化一个json格式的对象： 　　var jsonDate = '{ "name":"周星驰","age":23 }' 　　var jsonObj = eval( '(' + jsonDate + ')' ); // eval();方法 　　var jsonObj = JSON.pa...
Ajax用法返回Json
Mr_Zm1996的博客
06-28 330
1.简单用法 $(function() { $("input[name='name']").on("blur", function() { /*移除文本内的内容 $("#s1").empty();  */ $("#s1").empty();  $.post( "${pageContext.servletContext.contextPath }/AjaxUser.do?username=" +...
ajax请求成功返回json数据,ajax请求服务器返回json数据
weixin_42134769的博客
08-06 963
ajax请求服务器返回json数据 内容精选换一换使用API数据源，您可以通过调用一个第三方的REST(Representational State Transfer)API获取源数据，，该REST API响应结果中的HTTP body体就是源数据，DLV可以解析响应结果中的源数据并将其直接展示在大屏上。您无需创建数据连接，可以直接在大屏编辑页面的数据面板中配置API数据源的URL。连接消息请求返...
如何用Ajax解析json，XML数据格式
qq_44755188的博客
05-14 1298
1，了解json, xml数据格式： xml数据格式是利用标签对数据就行组装，标签必须成对出现，且必须以<?xml version="1.0" encoding="utf-8" ?>开头但是因为标签必须成对出现导致文件体积大，标签数量太多，实在是影响传输效率，因此使用频率不高，下面是xml数据格式的例子 <?xml version="1.0" encoding="utf-8"?> <students> <student> <name>.
掌握jQuery AJAX与JSON应用实例详解
文件标题“基于jQuery的AJAX和JSON的实例.zip”表明文件中包含了实现基于jQuery的AJAX调用和处理JSON数据的具体实例。在Web开发中，这样的技术组合被广泛应用于动态加载内容、异步数据处理等场景。 #### jQuery中的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值