struts2+jquery+json集成

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

效果如下：

 

         

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

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

目录结构图

          

2、创建实体类User

package com.ljq.bean;

import java.io.Serializable;

@SuppressWarnings( " serial " )
public class User implements Serializable {
private int 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;
}

public int getId() {
return id;
}

public void setId( int id) {
this .id = id;
}

public String getUsername() {
return username;
}

public void setUsername(String username) {
this .username = username;
}

public String getPwd() {
return pwd;
}

public void setPwd(String pwd) {
this .pwd = pwd;
}

}

        

3、新建Action JsonAction

package com.ljq.action;

import net.sf.json.JSONObject;

import com.ljq.bean.User;
import com.opensymphony.xwork2.ActionSupport;

@SuppressWarnings( " serial " )
public class 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;
}

public void setUser(User user) {
this .user = user;
}

public String getResult() {
return result;
}

public void setResult(String result) {
this .result = result;
}

}

           

4、建立struts.xml文件

<? 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 >

       

5、编写index.jsp文件

<% @ 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 >

        

6、建立文件index.js

$(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);
}