对于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
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;;charset=utf-8");//注意要是返回文本，那么类型为text/html String username1 = request.getParameter("username"); String username = URLDecoder.decode(username1,"UTF-8"); StringBuilder message = new StringBuilder(""); if(username!=null) { EmployeeDao employeeDao = new EmployeeDao(); ArrayList<Employee> employees = employeeDao.select(username); if(employees!=null&&employees.size()>0) { message.append("{\"emp\":["); // for(Employee employee: employees) // { //对于这样的集合类型的数据，不推荐使用构造字符串的方式来构造json数组 // System.out.println(employee.getEmpNo()); // message.append("{\"eno\":"+employee.getEmpNo()+","+"\"ename\""+employee.getEname()+"}"); // } //为了说明构造json文本，仅使用2条记录 message.append("{\"eno\":"+"\""+employees.get(0).getEmpNo()+"\""+","+"\"ename\""+":"+"\""+employees.get(0).getEname()+"\""+"}"); message.append(","); message.append("{\"eno\":"+"\""+employees.get(1).getEmpNo()+"\""+","+"\"ename\""+":"+"\""+employees.get(1).getEname()+"\""+"}"); message.append("]}"); } PrintWriter out = response.getWriter(); out.println(new String(message)); }
在ajax中
<%@ 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=ISO-8859-1"> <title>Insert title here</title> <script type="text/javascript" src="js/jquery-1.7.js"></script> <script type="text/javascript"> function check(){ var resultNode = $("#result"); var username = $("#username").val(); $.ajax({ url:"ShowEmp_ajax_json2", type:"POST", data:{username:username}, dataType:"text", success:function(data){ //转换成jquery对象 var s = "<table border='1' width='100' height='100'>"; // 若servlet中采用构造的json语句,jsp返回datatype类型为text var obj = eval("("+data+")"); //这里需要用eval函数，eval() 函数使用的是 JavaScript 编译器，可解析 JSON 文本，然后生成 JavaScript 对象。必须把文本包围在括号中，这样才能避免语法错误： alert(obj); $.each(obj.emp,function(index,element){ alert(element.ename); }) //遍历方法二或者 $(obj.emp).each(function(index){//注意function写法不一样 alert(obj.emp[index].eno); }); //错误写法 $(obj).each(function(index){//这样遍历的是obj，obj是根据得到的整条text转换而来，因为只有一个obj，所以index的都是0，obj.emp[index].eno得到的是emp中第0个对象的数据 alert(obj.emp[index].eno); }); s += "</table>"; $("#result").html(s); } }); } </script> </head> <body> 输入用户名<input type="text" id="username" /> <input type="button" value="查找" οnclick="check()" /> <div id="result" ></div> </body> </html>
2、用字符串构造json数据，返回json对象
servlet中返回application/json
ajax中dateType用json
servlet代码，和上面没有什么区别，主要是把contentype改为application/json
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("application/json;charset=utf-8"); String username1 = request.getParameter("username"); String username = URLDecoder.decode(username1,"UTF-8"); StringBuilder message = new StringBuilder(""); if(username!=null) { EmployeeDao employeeDao = new EmployeeDao(); ArrayList<Employee> employees = employeeDao.select(username); if(employees!=null&&employees.size()>0) { message.append("{\"emp\":["); // for(Employee employee: employees) // { //对于这样的集合类型的数据，不推荐使用构造字符串的方式来构造json数组 // System.out.println(employee.getEmpNo()); // message.append("{\"eno\":"+employee.getEmpNo()+","+"\"ename\""+employee.getEname()+"}"); // // } //为了说明构造json文本，仅使用2条记录 message.append("{\"eno\":"+"\""+employees.get(0).getEmpNo()+"\""+","+"\"ename\""+":"+"\""+employees.get(0).getEname()+"\""+"}"); message.append(","); message.append("{\"eno\":"+"\""+employees.get(1).getEmpNo()+"\""+","+"\"ename\""+":"+"\""+employees.get(1).getEname()+"\""+"}"); message.append("]}"); } System.out.println(message); PrintWriter out = response.getWriter(); out.println(new String(message)); } }
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=ISO-8859-1"> <title>Insert title here</title> <script type="text/javascript" src="js/jquery-1.7.js"></script> <script type="text/javascript"> function check(){ var resultNode = $("#result"); var username = $("#username").val(); $.ajax({ url:"ShowEmp_ajax_json2", type:"POST", data:{username:username}, dataType:"json",//注意此时这里是json success:function(data){ //转换成jquery对象 var s = "<table border='1' width='100' height='100'>"; // //若servlet中采用构造的json语句，jsp返回类型dataType为json对象 //写法一、 $.each(data.emp,function(index,element){//element是data.emp json数组之中的数据 // alert(element.eno); s+="<tr>"; s += "<td>"+element.eno+"</td>"; s += "<td>"+element.ename+"</td>"; s+="</tr>"; }); //写法二、 $(data.emp).each(function(index){//将data.emp转换成jquery对象遍历 alert(data.emp[index].eno); }); s += "</table>"; $("#result").html(s); } }); } </script> </head> <body> 输入用户名<input type="text" id="username" /> <input type="button" value="查找" οnclick="check()" /> <div id="result" ></div> </body> </html>
3、返回json对象，但是在servlet中直接用把一个数组或集合转换成为json类型的数组对象
如果抛出 NestableRuntimeException异常，
说明没有导包，注意导入相关的jar包
commons-lang-2.6 (注：导入最新的 3.1 版本会继续报如下错误)
参考：http://blog.csdn.net/wugewuge/article/details/8074272
在servlet写法
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("application/json;charset=utf-8"); String username1 = request.getParameter("username"); String username = URLDecoder.decode(username1,"UTF-8"); StringBuilder message = new StringBuilder(""); if(username!=null) { EmployeeDao employeeDao = new EmployeeDao(); ArrayList<Employee> employees = employeeDao.select(username); JSONArray jsonArray=JSONArray.fromObject(employees); PrintWriter out = response.getWriter(); out.println(jsonArray.toString());//在jsp中的数据类型dataType："json" } }
在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=ISO-8859-1"> <title>Insert title here</title> <script type="text/javascript" src="js/jquery-1.7.js"></script> <script type="text/javascript"> function check(){ var resultNode = $("#result"); var username = $("#username").val(); $.ajax({ url:"ShowEmp_ajax_json2", type:"POST", data:{username:username}, dataType:"json",//注意此时这里是json success:function(data){ //转换成jquery对象 var s = "<table border='1' width='100' height='100'>"; //若servlet中要是用 // JSONArray jsonArray=JSONArray.fromObject(employees); // out.println(jsonArray.toString()) // 这样的形式返回json对象，那么将相当于返回了一个json数组, // 类似这样[{"eno":"7369","ename":"SMITH"},{"eno":"7499","ename":"ALLEN"}]， // 而不是这样{"emp":[{"eno":"7369","ename":"SMITH"},{"eno":"7499","ename":"ALLEN"}]} // 这样在jsp中就可以直接遍历data这个json数组，不需要再转换，也不需要用data.emp(本身在servlet转换过来的也没有emp), // servlet中的contentType为application/json jsp中dataType为json $.each(data,function(index,element){ // alert(element.empNo+element.ename); s+="<tr>"; s += "<td>"+element.empNo+"</td>"; s += "<td>"+element.ename+"</td>"; s += "<td>"+element.job+"</td>"; s += "<td>"+element.mgr+"</td>"; s += "<td>"+element.date+"</td>"; s += "<td>"+element.sal+"</td>"; s += "<td>"+element.comm+"</td>"; s += "<td>"+element.deptNo+"</td>"; s+="</tr>"; }); s += "</table>"; $("#result").html(s); } }); } </script> </head> <body> 输入用户名<input type="text" id="username" /> <input type="button" value="查找" οnclick="check()" /> <div id="result" ></div> </body> </html>
另外一篇参考:
http://www.cnblogs.com/codeplus/archive/2011/07/18/2109544.html
1396
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
