Struts+Jquery+Ajax+Json应用实例

一、开发环境

Eclipse

1、JAR包：Struts的最小JAR包，JSON插件(这些包都可以在struts的示例工程中找到)。

下面的commons-lang-2.4.jar、commons-lang3-3.2.jar包都需要，缺少commons-lang-2.4.jar包会报错。应该是json-lib-2.3-jdk15.jar所依赖的低版本的包。

2、jquery文件：https://code.jquery.com/jquery-1.12.4.min.js

二、配置文件

1、在web.xml中添加代码

  <filter>    <filter-name>struts2</filter-name>    <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>  </filter>  <filter-mapping>    <filter-name>struts2</filter-name>    <url-pattern>/*</url-pattern>    <url-pattern>*.action</url-pattern>    <url-pattern>*.do</url-pattern>  </filter-mapping>

2、struts.xml

<?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>    <constant name="struts.enable.DynamicMethodInvocation" value="false" /><constant name="struts.devMode" value="true" /><constant name="struts.action.extension" value="action,do" /><!-- 同时支持*.do, *.action两种后缀名的请求 --><constant name="struts.i18n.encoding" value="UTF-8"></constant><!--解决乱码    -->    <package name="default" namespace="/" extends="struts-default,json-default">        <default-action-ref name="index" />        <global-results>            <result name="error">/error.jsp</result>        </global-results>        <global-exception-mappings>            <exception-mapping exception="java.lang.Exception" result="error"/>        </global-exception-mappings>        <action name="*AjaxAction" method="{1}" class="demo.action.AjaxAction">            <result type="json">            <param name="root">result</param>            </result>            <result name="showme" type="dispatcher">/jsondemo.jsp</result>        </action>        <action name="*" class="demo.action.BaseAction">        <result>/{1}.jsp</result>        </action>    </package>    <!-- Add packages here --></struts>

三、添加Action代码

1、User.java

package demo.domain;public class User {private String  name;private Integer age;    private String  position;public User() {super();}public User(String name, Integer age, String position) {super();this.name = name;this.age = age;this.position = position;}public String getName() {return name;}public void setName(String name) {this.name = name;}public Integer getAge() {return age;}public void setAge(Integer age) {this.age = age;}public String getPosition() {return position;}public void setPosition(String position) {this.position = position;}@Overridepublic String toString() {StringBuilder builder = new StringBuilder();builder.append("User [name=");builder.append(name);builder.append(", age=");builder.append(age);builder.append(", position=");builder.append(position);builder.append("]");return builder.toString();}}

1、BaseAction.java

package demo.action;import org.apache.commons.logging.Log;import org.apache.commons.logging.LogFactory;import com.opensymphony.xwork2.ActionSupport;public class BaseAction extends ActionSupport {private static final long serialVersionUID = 1864699266509075017L;public static final Log log = LogFactory.getLog(BaseAction.class);}

2、AjaxAction.java

package demo.action;import net.sf.json.JSONObject;import org.apache.commons.logging.Log;import org.apache.commons.logging.LogFactory;import demo.domain.User;public class AjaxAction extends BaseAction {private static final long serialVersionUID = 557651715559513817L;public static Log log = LogFactory.getLog(AjaxAction.class);private String  name;private Integer age;    private String  position;private String result;public String execute() throws Exception{User user = new User(name,age,position);log.info(user);result = JSONObject.fromObject(user).toString();log.info(result);return SUCCESS;}public String do1(){User user = new User(name,age,position);log.info(user);result = JSONObject.fromObject(user).toString();log.info(result);return SUCCESS;}public String getResult() {return result;}public void setResult(String result) {this.result = result;}public String getName() {return name;}public void setName(String name) {this.name = name;}public Integer getAge() {return age;}public void setAge(Integer age) {this.age = age;}public String getPosition() {return position;}public void setPosition(String position) {this.position = position;}}

四、添加JSP页面

1、index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@ taglib prefix="s" uri="/struts-tags" %><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>error</title></head><body><H1>Welcome to struts ajax</H1><div><a href="jsondemo.jsp">示例1（测试struts+jquery+ajax+json）</a></div><div><a href="jsondemo2.jsp">示例2（测试struts+jquery+ajax+json）</a></div><div><a href="jquerydemo.jsp">示例3（主要测试jquery）</a></div></body></html>

2、jquerydemo.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><!doctype html><html><head>    <meta charset="utf-8">    <title>Demo</title></head><body>阻止正常链接点击事件    <a href="jsondemo.jsp">jsondemo</a>    <script src="js/jquery-1.12.4.min.js"></script>    <script>     $( document ).ready(function() {        $( "a" ).click(function( event ) {            alert( "The link will no longer take you to jsondemo" );            event.preventDefault();        });    });     </script></body></html>

3、jsondemo.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@ taglib prefix="s" uri="/struts-tags" %><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>struts ajax demo</title> <link href="css/style.css" rel="stylesheet" type="text/css" media="screen"/></head><body> <script type="text/javascript">  //alert('hello'); </script>  <div>  <h5>录入数据</h5>        <br />        <form action="#" method="post">            <label for="name">姓名：</label><input type="text" name="name" />            <label for="age">年龄：</label><input type="text" name="age" />            <label for="position">职务：</label><input type="text" name="position" />            <input id="btnsubmit" type="button" class="btn" value="提交结果"/>        </form>        <br /> </div> <div>     <h5>显示结果</h5>     <br />        <ul>            <li>姓名：<span id="s_name">赞无数据</span></li>            <li class="li_layout">年龄：<span id="s_age">暂无数据</span></li>            <li class="li_layout">职务：<span id="s_position">暂无数据</span></li>        </ul> </div> <script  type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript">  //$("#btnsubmit").on("click",function(event){  $("#btnsubmit").click(function(event){   $.ajax({    type:"post",    url: "AjaxAction.action",    data:{     name:$("input[name=name]").val(),     age:$("input[name=age]").val(),     position:$("input[name=position]").val()    },    dataType:"json",//设置返回数据类型为json    success: function( data ) {     var d = eval("("+data+")");//将数据转换成json类型，具体查看javascript eval()函数功能     $("#s_name").text(""+d.name+"");     $("#s_age").text(""+d.age+"");     $("#s_position").text(""+d.position+"");    },    error:function(){     alert("系统异常，请核对输入参数设置是否正确！");    }   });  }); </script></body></html>

4、jsondemo2.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@ taglib prefix="s" uri="/struts-tags" %><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>struts ajax demo</title><link href="css/style.css" rel="stylesheet" type="text/css" media="screen"/><script  type="text/javascript" src="js/jquery-1.12.4.min.js"></script></head><body><div><h5>录入数据</h5>        <br />        <form action="#" method="post">            <label for="name">姓名：</label><input type="text" name="name" />            <label for="age">年龄：</label><input type="text" name="age" />            <label for="position">职务：</label><input type="text" name="position" />            <input id="btnsubmit" type="button" class="btn" value="提交结果"/>        </form>        <br /></div><div>    <h5>显示结果</h5>    <br />        <ul>            <li>姓名：<span id="s_name">赞无数据</span></li>            <li class="li_layout">年龄：<span id="s_age">暂无数据</span></li>            <li class="li_layout">职务：<span id="s_position">暂无数据</span></li>        </ul></div><script type="text/javascript">/* 页面加载完成，绑定事件 */$(document).ready(function(){console.log('loading...');//$("#btnsubmit").on("click",function(event){//$("#btnsubmit").bind("click",function(event){$("#btnsubmit").click(function(event){$.ajax({type:"post",url: "AjaxAction.action",data:{name:$("input[name=name]").val(),age:$("input[name=age]").val(),position:$("input[name=position]").val()},dataType:"json",//设置需要返回的数据类型success: function( data ) {//eval函数接收一个参数s，如果s不是字符串，则直接返回s。否则执行s语句。//如果s语句执行结果是一个值，则返回此值，否则返回undefined。////需要特别注意的是对象声明语法“{}”并不能返回一个值，需要用括号()括起来才会返回值var d = eval("("+data+")");//将数据转换成json类型//得到的d是一个形如{"key":"value","key1":"value1"}的数据类型，然后取值出来$("#s_name").text(""+d.name+"");$("#s_age").text(""+d.age+"");$("#s_position").text(""+d.position+"");},error:function(){alert("系统异常，请核对输入参数设置是否正确！");}});});});</script></body></html>
五、测试运行
略
六、完整包
完整eclipse工程包下载

七、参考文档
略