Struts2+JQuery+Json

末蓝、 2024-02-17 23:52 10阅读 0赞

结合使用[jQuery][]和Json的操作上来说很方便；

1.方便前台数据的操作。

2.数据体积小，传输快。

3.客户端操纵XML的时候需要创建ActiveX对象，Json则完全就是一个[js][]对象，它不需要创建DOM。

![Center][]

JSP页面

JS脚本

$(function(){
    	//message
    	$("#message").click(function(){
    		$.getJSON("myx!exeMessage",function(data){
    			$("#show").html(data.message).css("color","red");
    		});
    	});
    	
    	//user
    	$("#user").click(function(){
    		$.getJSON("myx!exeUser",function(data){
    			$("#show").html(data.user.name+"="+data.user.pass).css("color","red");
    		});
    	});
    	
    	
    	//list
    	$("#list").click(function(){
    		$.getJSON("myx!exeList",function(data){
    			var htmls="";
    			//遍历数据
    			$.each(data.lists,function(i,u){
    				htmls+=u.name+"="+u.pass+"<p/>";  //累计数据
    			});
    			//显示数据
    			$("#show").html(htmls).css("color","red");
    		});
    	});
    	
    	
    	//map
    	$("#map").click(function(){
    		$.getJSON("myx!exeMap",function(data){
    			var htmls="";
    			//遍历数据
    			$.each(data.maps,function(i,u){
    				htmls+=u.name+"="+u.pass+"<p/>";  //累计数据
    			});
    			//显示数据
    			$("#show").html(htmls).css("color","red");
    		});
    	});
    	
    });

Action

package com.hlx.action;
    
    import java.util.ArrayList;
    import java.util.HashMap;
    import java.util.List;
    import java.util.Map;
    
    import com.hlx.entity.User;
    import com.opensymphony.xwork2.ActionContext;
    import com.opensymphony.xwork2.ActionSupport;
    
    public class MyAjaxAction extends ActionSupport {
    
    	// setXXX and getXXX
    	private String message; // 使用json返回单个值
    	private List<User> lists; // 使用josn返回List对象
    	private Map<String, User> maps; // 使用json返回Map对象
    	private User user; // 使用json返回对象
    
    	public String getMessage() {
    		return message;
    	}
    
    	public void setMessage(String message) {
    		this.message = message;
    	}
    
    	public List<User> getLists() {
    		return lists;
    	}
    
    	public void setLists(List<User> lists) {
    		this.lists = lists;
    	}
    
    	public Map<String, User> getMaps() {
    		return maps;
    	}
    
    	public void setMaps(Map<String, User> maps) {
    		this.maps = maps;
    	}
    
    	public User getUser() {
    		return user;
    	}
    
    	public void setUser(User user) {
    		this.user = user;
    	}
    
    	public String exeMessage() throws Exception {
    		this.message = "祝福";
    		return "message";
    	}
    
    	public String exeUser() throws Exception {
    		this.user = new User("qq", "12323");
    		return "user";
    	}
    
    	public String exeList() throws Exception {
    		lists = new ArrayList<User>();
    		lists.add(new User("aaa", "000"));
    		lists.add(new User("ccc", "222"));
    		lists.add(new User("ddd", "444"));
    		return "list";
    	}
    
    	public String exeMap() throws Exception {
    		maps = new HashMap<String, User>();
    		maps.put("u1", new User("菲菲", "000"));
    		maps.put("u2", new User("肥肥", "111"));
    		maps.put("u3", new User("妞妞", "222"));
    		return "map";
    	}
    }

struts2.xml文件

显示结果

![Center 1][]

![Center 2][]

![Center 3][]

![Center 4][]

[jQuery]: http://lib.csdn.net/base/jquery
[js]: http://lib.csdn.net/base/javascript
[Center]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/ec138b9007e44c91b7cc932c3bc12880.png
[Center 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/178bf1993b5a47df8d9c2f646c9a8e8a.png
[Center 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/2b5bdd53f7f74e808ae914fe7e885704.png
[Center 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/b24168d2deee4fac81c2735f8652495f.png
[Center 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/714be60337ab43d3a1656a3420a7b67c.png