struts2、jQuery实现Ajax简单实例

lvgaolong

2013-06-01

关注关注

1.搭建struts2环境

（1）引入jar包

--struts2基本jar包

commons-fileupload-1.2.1.jar

commons-io-1.4.jar

commons-logging-api-1.1.jar

freemarker-2.3.13.jar

ognl-2.6.11.jar

struts2-core-2.1.6.jar

xwork-2.1.2.jar

--struts2返回json格式使用jar包

xwork-core-2.2.1.jar

struts2-json-plugin-2.1.8.1.jar

（2）修改添加struts2相关配置

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
  
  
  <filter>
  <!-- 定义核心Filter的名字 -->
  <filter-name>struts2</filter-name>
  <!-- 定义核心Filter的实现类 -->
  <filter-class>org.apache.struts2.dispatcher.FilterDispatcher</filter-class>
  </filter>
  
  <filter-mapping>
  <!-- FilterDispatcher用来初始化Struts 2并且处理所有的Web请求 -->
  <filter-name>struts2</filter-name>
  <url-pattern>/*</url-pattern>
  </filter-mapping>
</web-app>

src目录下新建struts.xml配置文件

（LoginAction用于测试、JqueryAction用于Ajax的使用）

<?xml version="1.0" encoding="GBK"?>
<!-- 指定Struts 2配置文件的DTD信息 -->
<!DOCTYPE struts PUBLIC
        "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
        "http://struts.apache.org/dtds/struts-2.0.dtd">

<!-- struts是Struts 2配置文件的根元素 -->
<struts>
  <!-- Struts 2的Action必须放在指定的包空间下定义 -->
  <package name="xx" extends="struts-default">
	 <action name="Login" class="action.LoginAction">
		  <!-- 定义处理结果和资源之间映射关系。 -->
		  <result name="error">/error.jsp</result>
		  <result name="success">/welcome.jsp</result>
	 </action>	 
  </package>
      
  <!-- Ajax方式返回json格式数据到页面 -->
  <package name="json" extends="json-default">
	<action name="jquery" class="action.JqueryAction" method="jquery">
		<result type="json">
			<param name="root">result</param>
		</result>
	</action>
  </package>
   
</struts>

（3）Ajax数据初始化Action

package action;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;

import com.opensymphony.xwork2.ActionSupport;

public class JqueryAction extends ActionSupport 
{

	/**
	 * serialVersionUID
	 */
	private static final long serialVersionUID = 1147435491635259488L;
	
	/**
	 * 用于记录返回结果
	 */
	private String result;
		
	/**
	 * Ajax测试类
	 * @return
	 * @throws IOException
	 */
	public String jquery() throws IOException
	{
		//获取用户输入值
		String num=getRequest().getParameter("num");  
		List<Test> testUser = new ArrayList<Test> ();
		int numtemp;
		//判断用户输入是否是数字
		if (isNumeric(num))
		{
			numtemp = Integer.valueOf(num);
		}
		else
		{
			numtemp = 0;
		}

		//Test类，自定义（定义属性：username、password；提供get、set方法）
		//模拟数据初始化		
		for (int i = 0; i < numtemp; i++) {
			Test t = new Test();
			String username = "user" + i;
			String pssword = "pass" + i;
			t.setUsername(username);
			t.setPassword(pssword);
			testUser.add(t);
		}
		
		StringBuffer sb = new StringBuffer();
		sb.append("[");
		for (int i = 0; i < testUser.size(); i++) 
		{
			Test temp = testUser.get(i);
			
			if (testUser.size() -1 > i)
			{
				sb.append("{\"username\":\""+temp.getUsername()+"\",\"password\":\""+temp.getPassword()+"\"},");
			}
			else
			{
				sb.append("{\"username\":\""+temp.getUsername()+"\",\"password\":\""+temp.getPassword()+"\"}");
			}
		}
		sb.append("]");
		this.result=sb.toString();
		
		return SUCCESS;
	}
	
	public static boolean isNumeric(String str)
	{
		if (null == str || "".equals(str))
		{
			return false;
		}
	    for (int i = str.length();--i>=0;)
	    {   
		    if (!Character.isDigit(str.charAt(i)))
		    {
		    	return false;
		    }
	    }
	    return true;
	}
		
	/**
     * 必须经过struts初始化才能使用
     * 获取 HttpServletRequest
     * @return HttpServletRequest
     */
    public static HttpServletRequest getRequest()
    {
        return ServletActionContext.getRequest();
    }

    /**
     * 必须经过struts初始化才能使用
     * 获取HttpServletResponse
     * @return HttpServletResponse
     */
    public static HttpServletResponse getResponse()
    {
        return ServletActionContext.getResponse();
    }


	public String getResult() 
	{
		return result;
	}


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

（4）jsp

需要导入jquery-1.4.4.min.js

<%@ page language="java" contentType="text/html; charset=gbk"
	pageEncoding="gbk"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ page import="java.util.*" %>
<!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=gbk">
<script type="text/javascript" src="/Ajax/js/jquery-1.4.4.min.js"></script>
<title>Ajax</title>
</head>
<body>
<script type="text/javascript">  
    function checkSubmit()
    {
        var bol = true;  
        var num = $.trim($("#num").val());
        /**
        success ： 
        		当请求成功时调用的函数。
        		这个函数会得到一个参数：从服务器返回的数据。当请求成功时调用函数，即status==200。
		
		complete ：
				当请求完成时调用的函数。
				这个函数会得到两个参数：XMLHttpRequest对象和一个描述请求成功的类型的字符串。
				当请求完成时调用函数，即status==404、403、302...。
        **/
            $.ajax({  
                url:'jquery.action',
                data:{num:num},
                complete:function(xmlHttpRequest)
                {
                },
                success:function(data){
	                //var jsonStr='[{"id":1,"name":"name1"},{"id":2,"name":"name2"},{"id":3,"name":"name3"},{"id":4,"name":"name4"},{"id":5,"name":"name5"}]';
	                var uslist=eval("("+data+")");
	                var divtemp = "";
	                for(var i = 0; i < uslist.length; i++)
	                {
	                	divtemp += "<br>"+uslist[i].username+"<br>";
	                }
	                $("#msgDIVID").show();
	                $("#msgDIVID").html(divtemp);
                },
                error:function()
                {
                	alert('你妹的！竟然出错了！');
                }
            });
    }  
    </script> 
<form name="myform1" action="">  
        <table>  
        <tr>  
            <td>num:</td>
            <td><input type="text" id="num" onkeyup="checkSubmit()"></td>  
            <td><div id="userDivId" style="border: 0px solid red;width:200px;height:10px;color: red"></div></td>  
        </tr>  
        </table>  
        <Br>  
        <!-- 显示登陆信息的div层. -->  
        <div id="msgDIVID" style="border:0px solid blue;color: blue;width:400px;height:30;font-weight: bold;font-size: 20px"></div>
</form>  
</body>
</html>

（5）测试

访问自己工程的地方

http://localhost:8080/Ajax/jquery/jquery.jsp

在输入框输入数字，即可看到Ajax效果

（6）扩展

[1] json中特殊符号处理

struts2 ajax