ajax中Json對象的使用(利用struts框架或者單獨使用)

1、先看看不使用Struts框架的情況下json對象的傳值(主要區別在action,jsp頁面和javascript沒變化)
a、導入相關jar
commons-beanutils-1.8.0.jar
ezmorph-1.0.6.jar
json-lib-2.3-jdk15.jar
struts2-json-plugin-2.3.20.jar    //這個jar是struts的jar,不用框架時可以不導入。
b、action
	//以部門查詢並返回json對象進行異步處理
	public void getUserJson(){
		try {
			//1、獲取部門
			String dept = ServletActionContext.getRequest().getParameter("dept");
			if(StringUtils.isNotBlank(dept)){
				QueryHelper queryHelper = new QueryHelper(User.class,"u");
				queryHelper.addCondition("u.dept like ?", "%" + dept);
				//2、根據部門查詢用戶列表
				List<User> userList = userService.findObjects(queryHelper);
				//創建json對象
				JSONObject jso = new JSONObject();
				jso.put("msg", "success");
				jso.accumulate("userList", userList);
				//3、輸出用戶列表:以json格式字符串形式輸出
				HttpServletResponse response = ServletActionContext.getResponse();
				response.setContentType("text/html");
				ServletOutputStream outputStream = response.getOutputStream();
				outputStream.write(jso.toString().getBytes("utf-8"));
				outputStream.close();
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

2、使用Struts框架的情況下json對象的傳值
a , action
private Map<String,Object> return_map;
       ......
public String getUserJson2(){
		try {
			//1、獲取部門
			String dept = ServletActionContext.getRequest().getParameter("dept");
			if(StringUtils.isNotBlank(dept)){
				QueryHelper queryHelper = new QueryHelper(User.class,"u");
				queryHelper.addCondition("u.dept like ?", "%" + dept);
				//2、根據部門查詢用戶列表
				return_map = new HashMap<String,Object>();
				return_map.put("msg", "success");
				return_map.put("userList",userService.findObjects(queryHelper));
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
		return SUCCESS;
	}
b , struts的配置文件
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
	"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
	"http://struts.apache.org/dtds/struts-2.3.dtd">

<struts>
	<package name="sysHome-action" namespace="/sys" extends="base-default">
		<action name="home_*" class="cn.buaa.home.action.HomeAction"
			method="{1}">
			<result name="{1}">/WEB-INF/jsp/home/{1}.jsp</result>
			<result name="home">/WEB-INF/jsp/home/home.jsp</result>
		</action>
	</package>
	
	<package name="sysHomeJson-action" namespace="/sys" extends="json-default">
	<action name="home_getUserJson2" class="cn.buaa.home.action.HomeAction"
		method="getUserJson2">
		<result type="json">
			<param name="root">return_map</param>
		</result>
	</action>
</package>
</struts>

3、jsp中異步處理
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    pageContext.setAttribute("basePath", request.getContextPath()+"/") ;
%>
<html>
<head>
    <%@include file="/common/header.jsp"%>
    <title>我要投訴</title>
    
    <script type="text/javascript" charset="utf-8" src="${basePath }js/ueditor/ueditor.config.js"></script>
	<script type="text/javascript" charset="utf-8" src="${basePath }js/ueditor/ueditor.all.min.js">
	
	</script>
		<!--建議手動加在語言,避免在ie下有時因爲加載語言失敗導致編輯器加載失敗-->
		<!--這裏加載的語言文件會覆蓋你在配置項目裏添加的語言類型,比如你在配置項目裏配置的是英文,這裏加載的中文,那最後就是中文-->
	<script type="text/javascript" charset="utf-8" src="${basePath }js/ueditor/lang/zh-cn/zh-cn.js"></script>
<script>
		window.UEDITOR_HOME_URL = "${basePath }js/ueditor/";
		var ue = UE.getEditor('editor');
		
		//根據部門查詢該部門下的查詢列表
		function doSelectDept(){
			//1、獲取部門
			var dept = $("#toCompDept option:selected").val();
			if(dept != ""){
				//2、根據部門查詢列表
				$.ajax({
					url:"${basePath}sys/home_getUserJson2.action",
					data:{"dept":dept},
					type:"post",
					dataType:"json", //返回數值類型爲json
					success:function(data){
						//2.1、將用戶列表設置到被投訴人下拉列表中
						if(data != null && data != "" && data != undefined){
							if("success" == data.msg){
								var toCompName = $("#toCompName");
								toCompName.empty();
								$.each(data.userList,function(index,user){
									toCompName.append("<option value='"+ user.name +"'>" + user.name+ "</option>");
								});
							}else{
								alert("獲取被投訴人列表失敗!");
								}
						}else{
							alert("獲取被投訴人列表失敗!");
						}
					},
					error:function(){
						alert("獲取被投訴人列表失敗!");
					}
				});
			}else{
				//清空被投訴人列表下拉框
				$("#toCompName").empty();
			}
		}
</script>
</head>
<body>
<form id="form" name="form" action="" method="post" enctype="multipart/form-data">
    <div class="vp_d_1">
        <div style="width:1%;float:left;">    </div>
        <div class="vp_d_1_1">
            <div class="content_info">
    <div class="c_crumbs"><div><b></b><strong>工作主頁</strong> - 我要投訴</div></div>
    <div class="tableH2">我要投訴</div>
    <table id="baseInfo" width="100%" align="center" class="list" border="0" cellpadding="0" cellspacing="0"  >
        <tr>
            <td class="tdBg" width="250px">投訴標題:</td>
            <td><s:textfield name="comp.compTitle"/></td>
        </tr>
        <tr>
            <td class="tdBg">被投訴人部門:</td>
            <td>
            	<s:select id="toCompDept" name="user.dept" list="#{'':'請選擇','部門A':'部門A','部門B':'部門B'}" οnchange="doSelectDept()"/>
            </td>
        </tr>
        <tr>
            <td class="tdBg">被投訴人姓名:</td>
            <td>
            	<select id="toCompName" name="comp.toCompName">
            		
            	</select>
            </td>
        </tr>
        <tr>
            <td class="tdBg">投訴內容:</td>
            <td><s:textarea id="editor" name="comp.compContent" cssStyle="width:90%;height:160px;" /></td>
        </tr>
        <tr>
            <td class="tdBg">是否匿名投訴:</td>
            <td><s:radio name="comp.isNm" list="#{'0':'非匿名投訴','1':'匿名投訴' }" value="0"/></td>
        </tr>
       
    </table>

    <div class="tc mt20">
        <input type="button" class="btnB2" value="保存" />
            
        <input type="button"  οnclick="javascript:window.close()" class="btnB2" value="關閉" />
    </div>
    </div></div>
    <div style="width:1%;float:left;">    </div>
    </div>
</form>
</body>
</html>
4、關於json,很容易傳錯值,有個工具HiJson,很好用。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章