JavaWeb开发中Ajax技术、json与java实现List、Map数据直接传递的研究

最新推荐文章于 2024-01-10 17:29:48 发布

hechenghai

最新推荐文章于 2024-01-10 17:29:48 发布

阅读量4.8k

点赞数

分类专栏： J2EE

J2EE 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

JavaWeb开发中Ajax技术、json与java实现List、Map数据直接传递的研究

一、在JavaWeb开发中基于jquery框架来使用ajax技术，Json与后台servlet进行数据交互示例,下面示例中基于servlet技术，没有使用struts2等框架。

由于项目需要通过ajax得到后台的List对象、map对象里面的值，闲暇时间摸索了一下关于json接受List对象的方法，步骤如下：
1.首先下载json所以依赖的包， Json-lib 最新版json-lib-2.3-jdk15.jar，其官方网站是：http://json-lib.sourceforge.net/可以直接download，细心的你会发现其网站页面里面有提示它还需要其他包：
Json-lib requires(at least) the following dependencies in your classpath:
•jakartacommons-lang 2.4
•jakartacommons-beanutils 1.7.0
•jakartacommons-collections 3.2
•jakartacommons-logging 1.1.1
•ezmorph 1.0.6
下载地址分别是：
http://commons.apache.org/lang/
http://commons.apache.org/beanutils/
http://commons.apache.org/collections/
http://commons.apache.org/logging/
http://ezmorph.sourceforge.net/
2.首先先见一个小web项目
先建一个User类：

[java]view plaincopy 
   
 package com.json;  
 public class User {  
     String username;  
     String password;  
     public String getUsername() {  
         return username;  
     }  
     public void setUsername(String username) {  
         this.username = username;  
     }  
     public String getPassword() {  
         return password;  
     }  
     public void setPassword(String password) {  
         this.password = password;  
     }      
 }  

再建一个servlet 程序：

[java]view plaincopy 
   
 package com.json;  
   
 import java.io.IOException;  
 import java.io.PrintWriter;  
 import java.util.ArrayList;  
 import java.util.List;  
   
 import javax.servlet.ServletException;  
 import javax.servlet.http.HttpServlet;  
 import javax.servlet.http.HttpServletRequest;  
 import javax.servlet.http.HttpServletResponse;  
   
 import net.sf.json.JSONArray;  
   
 public class TestJson extends HttpServlet {  
   
     public void doGet(HttpServletRequest request, HttpServletResponse response)  
             throws ServletException, IOException {  
            doPost(request,response);  
     }  
     public void doPost(HttpServletRequest request, HttpServletResponse response)  
             throws ServletException, IOException {  
   
         response.setContentType("text/html");     
         String str= request.getParameter("name");//得到ajax传递过来的paramater  
         System.out.print(str);  
         PrintWriter out = response.getWriter();  
         List list = new ArrayList();//传递List  
         Map m=new HashMap();//传递Map      
         User u1=new User();  
         u1.setUsername("zah");  
         u1.setPassword("123");  
         User u2=new User();  
         u2.setUsername("ztf");  
         u2.setPassword("456");    
         list.add(u1); //添加User对象        
         list.add(u2);     //添加User对象    
         
         m.put("u1", u1);  
         m.put("u2", u2);     
   
         JSONArray jsonArray2 = JSONArray.fromObject( list );  
        //把list转化成转化成json对象   
         JSONObject jo=JSONObject.fromObject(m);//转化Map对象为Json对象  
         out.print(jsonArray2);//返给ajax请求  
         out.print(jo);//返给ajax请求  
     }  
 }  
 配置好web.xml中的servlet映射，这一步就略了。  

3.建立ajax实现（这里为了快速实现用的是jquery实现的）

[html]view plaincopy 
   
 <script type="text/javascript" src="js/jquery.js"></script>  
  <script type="text/javascript">  
      function test(){  
          $.ajax({   
                 type:"POST", //请求方式  
                 url:"testjson", //请求路径：${base}/类所在的命名空间/类名（配置文件中执行对应类的那个name），命名空间是在配置文件中定义。  
                 cache: false,     
                 data:"name=zah",  //传参  
                 dataType: 'json',   //返回值类型  
                success:function(json){        
                     alert(json[0].username+" " json[0].password);    //弹出返回过来的List对象  
                    }  
                 });  
       }  
 </script>  
   </head>  
   <body>  
     <input type="button" name="b" value="测试" onclick=test()>  
   </body>  

测试开始，点击按钮弹出zah 123

json[0]就相当于u1对象 json[1]相当于u2对象，对于其属性的访问跟java对象一样，其他的Connection测试应该一样,访问Map的话直接把返回函数改成如下即可：

[javascript]view plaincopy 
   
 success:function(json){       
                alert(json.u1.username)  
                }  

直接跟上Key.属性即可访问Object对象。

后续会添加基于struts2框架的示例！

二、在JavaWeb开发中ajax+json+Struts2实现list传递实例讲解：

1、首先需要下载JSON依赖的jar包。它主要是依赖如下：

json-lib-2.2.2-jdk15

ezmorph-1.0.4

commons-logging-1.0.4

commons-lang-2.4

commons-collections-3.2.1

commons-beanutils

2、实例。

2.1、身份证错误信息Bean类(ErrorCondition.java)

[java]view plaincopy 
   
 **   
 *@Project: excel   
 *@Author: chenssy   
 *@Date: 2013-4-4   
 *@Copyright: chenssy All rights reserved.   
 */   
 public class ErrorCondition {   
 private String name; // 姓名   
 private String idCard; // 身份证   
 private String status; // 错误状态   
 private String message; // 错误信息   
 ErrorCondition(String name,String idCard,String status,String message){   
 this.name = name;   
 this.idCard = idCard;   
 this.status = status;   
 this.message = message;   
 }   
 public String getName() {   
 return name;   
 }   
 public void setName(String name) {   
 this.name = name;   
 }   
 public String getIdCard() {   
 return idCard;   
 }   
 public void setIdCard(String idCard) {   
 this.idCard = idCard;   
 }   
 public String getStatus() {   
 return status;   
 }   
 public void setStatus(String status) {   
 this.status = status;   
 }   
 public String getMessage() {   
 return message;   
 }   
 public void setMessage(String message) {   
 this.message = message;   
 }   
 }  

2.2、JSP页面(index.jsp)

[html]view plaincopy 
   
 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>   
 <html>   
     <head>   
         <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.7.2.js"></script>   
     </head>   
 <body>   
     <input type="button" value="点我显示数据" id="clickMe">   
     <table id="showTable" border="1">   
         <tr>   
             <td>姓名</td>   
             <td>身份证</td>   
             <td>错误状态</td>   
             <td>错误信息</td>   
         </tr>   
     </table>   
     <script>   
         $("#clickMe").click( function(){   
             var url = "json/jsonTest.action";   
             $.ajax({   
                     type:'get',   
                     url:url,   
                     dataType: 'json',   
                     success:function(data){   
                         $.each(data,function(i,list){   
                             var _tr = $("<tr><td>"+list.name+"</td><td>"+   
                             list.idCard+"</td><td>"+list.status+ "</td><td>"+list.message+"</td></tr>");   
                             $("#showTable").append(_tr);   
                     })  
                 }  
             })   
         })  
     </script>   
 </body>   
 </html>  

2.3、Action处理类(JsonTest_01.java)

[java]view plaincopy 
   
 /**  
 *@Project: jsonTest  
 *@Author: chenssy  
 *@Date: 2013-4-5  
 *@Copyright: chenssy All rights reserved.  
 */   
 public class JsonTest_01 {   
 public String execute() throws IOException{   
 ErrorCondition r1 = new ErrorCondition("张三", "4306821989021611", "L", "长度错误");   
 ErrorCondition r2 = new ErrorCondition("李四", "430682198902191112","X", "校验错误");   
 ErrorCondition r3 = new ErrorCondition("王五", "", "N", "身份证信息为空");   
 List<ErrorCondition> list = new ArrayList<ErrorCondition>();   
 list.add(r1);   
 list.add(r2);   
 list.add(r3);   
 //将list转化成JSON对象   
 JSONArray jsonArray = JSONArray.fromObject(list);   
 HttpServletResponse response = (HttpServletResponse) ActionContext.getContext().get(ServletActionContext.HTTP_RESPONSE);   
 response.setCharacterEncoding("UTF-8");   
 response.getWriter().print(jsonArray);   
 return null;   
 }   
 }   

2.4、struts.xml配置

[html]view plaincopy 
   
 <?xml version="1.0" encoding="GBK"?>   
 <!DOCTYPE struts PUBLIC   
 "-//Apache Software Foundation//DTD Struts Configuration 2.1.7//EN"   
 "http://struts.apache.org/dtds/struts-2.1.7.dtd">   
 <!-- 指定struts 2的配置文件的跟元素 -->   
 <struts>   
 <package name="json" namespace="/json" extends="struts-default">   
 <action name="jsonTest" class="com.json.action.JsonTest_01" method="execute"></action>   
 </package>   
 </struts>   