以下采用struts2+jquery+json模拟一个案例。当点击提交按钮时会把输入的数据提交到后台,然后从后台获取数据在客户端显示。

效果如下:

 转:struts2+jquery+json集成(一)_html

         

接下来为struts2+jquery+json集成步骤:

1、新建一个web工程,导入struts2+jquery+json所需jar,如下图

转:struts2+jquery+json集成(一)_客户端_02

目录结构图

转:struts2+jquery+json集成(一)_json_03

          

2、创建实体类User



转:struts2+jquery+json集成(一)_json_04


package com.ljq.bean;


import java.io.Serializable;


@SuppressWarnings("serial")

publicclass User implements Serializable {

privateint id;

private String username;

private String pwd;


public User() {

}


public User(int id, String username, String pwd) {

super();

this.id = id;

this.username = username;

this.pwd = pwd;

}


publicint getId() {

return id;

}


publicvoid setId(int id) {

this.id = id;

}


public String getUsername() {

return username;

}


publicvoid setUsername(String username) {

this.username = username;

}


public String getPwd() {

return pwd;

}


publicvoid setPwd(String pwd) {

this.pwd = pwd;

}


}


转:struts2+jquery+json集成(一)_json_04


        

3、新建Action JsonAction



转:struts2+jquery+json集成(一)_json_04


package com.ljq.action;


import net.sf.json.JSONObject;


import com.ljq.bean.User;

import com.opensymphony.xwork2.ActionSupport;


@SuppressWarnings("serial")

publicclass JsonAction extends ActionSupport{

private User user;

// 返回结果给客户端

private String result;


@Override

public String execute() throws Exception {

//将要返回的实体对象进行json处理

JSONObject json=JSONObject.fromObject(user);

//输出格式如:{"id":1, "username":"zhangsan", "pwd":"123"}

System.out.println(json);

result=json.toString();

return SUCCESS;

}


public User getUser() {

return user;

}


publicvoid setUser(User user) {

this.user = user;

}


public String getResult() {

return result;

}


publicvoid setResult(String result) {

this.result = result;

}


}


转:struts2+jquery+json集成(一)_json_04


           

4、建立struts.xml文件



转:struts2+jquery+json集成(一)_json_04


<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE struts PUBLIC

"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"

"http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>

<!-- 该属性指定需要Struts2处理的请求后缀,该属性的默认值是action,即所有匹配*.action的请求都由Struts2处理。

如果用户需要指定多个请求后缀,则多个后缀之间以英文逗号(,)隔开。 -->

<constant name="struts.action.extension" value="do"/>

<!-- 设置浏览器是否缓存静态内容,默认值为true(生产环境下使用),开发阶段最好关闭 -->

<constant name="struts.serve.static.browserCache" value="false"/>

<!-- 当struts的配置文件修改后,系统是否自动重新加载该文件,默认值为false(生产环境下使用),开发阶段最好打开 -->

<constant name="struts.configuration.xml.reload" value="true"/>

<!-- 开发模式下使用,这样可以打印出更详细的错误信息 -->

<constant name="struts.devMode" value="true"/>

<!-- 默认的视图主题 -->

<!--<constant name="struts.ui.theme" value="simple"/>-->

<!--<constant name="struts.objectFactory" value="spring"/>-->



<package name="test"extends="json-default">

<action name="jsonAction"class="com.ljq.action.JsonAction">

<result type="json">

<!-- 此处将reslut的值返回给客户端,root的值对应要返回的值的属性result

注意:root为固定写法,否则不会把result的值返回给客户端 -->

<param name="root">result</param>

</result>

</action>

</package>



</struts>


转:struts2+jquery+json集成(一)_json_04


       

5、编写index.jsp文件



转:struts2+jquery+json集成(一)_json_04


<%@ page language="java"import="java.util.*" pageEncoding="UTF-8"%>

<%@taglib uri="/struts-tags" prefix="s"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme() +"://"

+ request.getServerName() +":"+ request.getServerPort()

+ path +"/";

%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<base href="<%=basePath%>">


<title>My JSP 'index.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">

<meta http-equiv="cache-control" content="no-cache">

<meta http-equiv="expires" content="0">

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="This is my page">

<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.3.1.js"></script>

<script type="text/javascript" src="<%=request.getContextPath() %>/js/index.js"></script>

<!--<s:head theme="ajax"/>这句话好像没影响哦 -->

<!--<s:head theme="ajax"/>-->

<!--在jsp页面上加入<s:head theme="ajax"/>会报如下异常:java.io.FileNotFoundException:

Template /template/ajax/head.ftl not found.

解决办法:在struts2-core-2.1.8.jar/template目录下加入ajax文件夹,ajax文件夹所在目录为

struts2-core-2.1.8.jar/template/archive。

注意:ajax文件夹下要包含head.ftl,否则还是会抛异常。head.ftl请在template目录搜索然后放到ajax文件夹里

-->

</head>


<body>

<!-- 显示User实体对象 -->

<div id="result"></div>

<s:form name="userForm" action="/jsonAction.do" method="post">

编号:<input name="user.id"/><br/>

用户名:<input name="user.username"/><br/>

密码:<input name="user.pwd"/><br/><br/>

<input id="btn" type="button" value=" 提 交 "/>

</s:form>


</body>

</html>


转:struts2+jquery+json集成(一)_json_04


        

6、建立文件index.js



转:struts2+jquery+json集成(一)_json_04


$(document).ready(function(){

//点击提交按钮时,从服务端获取数据,然后在客户端显示

$("#btn").click(function(){

// 序列化表单的值

var params=$("input").serialize();

$.ajax({

url: "jsonAction.do",

// 数据发送方式

type: "post",

// 接受数据格式

dataType : "json",

// 要传递的数据

data : params,

// 回调函数,接受服务器端返回给客户端的值,即result值

success : show

});

});

});


function show(result){

//测试result是否从服务器端返回给客户端

//alert(result);

//解析json对象

var json = eval("("+result+")");

var obj ="编号: "+json.id+" 用户名: "+json.username+" 密码: "+json.pwd;

$("#result").html(obj);

}