Struts+Jquery+Ajax+Json应用实例_ssm+json+ajax+jqery项目大作业-CSDN博客

本文链接：https://blog.csdn.net/ltbook/article/details/78788607

本文介绍了如何在Eclipse环境下，结合Struts2、jQuery、Ajax和JSON进行应用程序开发。首先，列出了所需的JAR包，包括Struts核心库和JSON插件。接着，详细阐述了配置文件的设置，如web.xml和struts.xml的修改。然后，展示了Action类的编写，包括User.java、BaseAction.java和AjaxAction.java。最后，给出了两个JSP页面(index.jsp和jquerydemo.jsp)的实现，展示如何使用jQuery进行Ajax请求并与后台交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、开发环境

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;
	}
	@Override
	public 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工程包下载
 
 

 
 
  
  


 
 

 
 
  
  七、参考文档
 
 

 
 
  
  略