struts2 + jquery + json 进行ajax请求(转载及补充)

第一步:创建 名为"ajax" 的 Java Web项目。


第二步:加入struts2的jar包,这里需要四个包 freemarker.jar  ognl.jar  struts2-core.jar  commons-fileupload.jar  commons-io.jar   xwork-core-2.1.6.jar(这个包加上版本号,是因为下文要提到它),这六个包是struts必须依赖的jar包,什么好说的。

 

第三步:修改 web.xml 加入 struts的过滤器,代码如下:

view plaincopy to clipboardprint?
<?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">  
       
    <filter>  
        <filter-name>struts2</filter-name>  
        <filter-class>org.apache.struts2.dispatcher.FilterDispatcher</filter-class>  
    </filter>  
    <filter-mapping>  
        <filter-name>struts2</filter-name>  
        <url-pattern>/*</url-pattern>  
    </filter-mapping>  
       
       
       
  <welcome-file-list>  
    <welcome-file>index.jsp</welcome-file>  
  </welcome-file-list>  
</web-app>  
<?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">
    
    <filter>
        <filter-name>struts2</filter-name>
        <filter-class>org.apache.struts2.dispatcher.FilterDispatcher</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>struts2</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
    
    
    
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>
 

 

第四步:加入json的包,这里需要两个:json-lib.jar  jsonplugin.jar 这里要注意很重要的一点,因为json大量引用了Apache commons的包,所以这里要一并加入,需要的commons包共4个,除了commons的包外,还需要引入一个 ezmorph的包,所以这一步一共要引入7个包,列出如下:commons-collections.jar  commons-lang.jar  commons-beanutils.jar  commons-logging.jar  ezmorph.jar 再加上json的两个包共七个,一次性加入。

 

第五步:写后台处理AjaxLoginAction.action,内容如下:

view plaincopy to clipboardprint?
package qy.test.action;   
  
import java.util.HashMap;   
import java.util.Map;   
  
import net.sf.json.JSONObject;   
  
import com.opensymphony.xwork2.ActionSupport;   
  
public class AjaxLoginAction extends ActionSupport {   
  
    // 用户Ajax返回数据   
    private String result;   
  
    // struts的属性驱动模式,自动填充页面的属性到这里   
    private String loginName;   
    private String password;   
  
    @Override  
    public String execute() {   
  
        // 用一个Map做例子   
        Map<String, String> map = new HashMap<String, String>();   
  
        // 为map添加一条数据,记录一下页面传过来loginName   
        map.put("name", this.loginName);   
  
        // 将要返回的map对象进行json处理   
        JSONObject jo = JSONObject.fromObject(map);   
  
        // 调用json对象的toString方法转换为字符串然后赋值给result   
        this.result = jo.toString();   
  
        // 可以测试一下result   
        System.out.println(this.result);   
  
        return SUCCESS;   
  
    }   
  
    //getter  setter 方法省略   
}  
package qy.test.action;

import java.util.HashMap;
import java.util.Map;

import net.sf.json.JSONObject;

import com.opensymphony.xwork2.ActionSupport;

public class AjaxLoginAction extends ActionSupport {

    // 用户Ajax返回数据
    private String result;

    // struts的属性驱动模式,自动填充页面的属性到这里
    private String loginName;
    private String password;

    @Override
    public String execute() {

        // 用一个Map做例子
        Map<String, String> map = new HashMap<String, String>();

        // 为map添加一条数据,记录一下页面传过来loginName
        map.put("name", this.loginName);

        // 将要返回的map对象进行json处理
        JSONObject jo = JSONObject.fromObject(map);

        // 调用json对象的toString方法转换为字符串然后赋值给result
        this.result = jo.toString();

        // 可以测试一下result
        System.out.println(this.result);

        return SUCCESS;

    }

    //getter  setter 方法省略
}
 

 

第六步:写前台index.jsp,注意加入 jquery的js文件 内容如下:

view plaincopy to clipboardprint?
<%@ page language="java" contentType="text/html; charset=UTF-8"  
    pageEncoding="UTF-8"%>   
<!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">   
        <mce:script type="text/javascript" src="js/jquery-1.3.2.min.js" mce_src="js/jquery-1.3.2.min.js"></mce:script>   
        <mce:script type="text/javascript"><!--   
    $(document).ready( function() {   
           
        //使用 Ajax 的方式 判断登录   
        $("#btn_login").click( function() {   
               
            var url = 'ajaxLogin.action';   
               
            alert("===");   
               
            //获取表单值,并以json的数据形式保存到params中   
            var params = {   
                loginName:$("#loginName").val(),   
                password:$("#password").val(),   
            }   
            //使用$.post方式       
            $.post(   
               
                url,        //服务器要接受的url   
                   
                params,     //传递的参数        
                   
                function cbf(data){ //服务器返回后执行的函数 参数 data保存的就是服务器发送到客户端的数据   
                   
                    //alert(data);   
                    var member = eval("("+data+")");    //包数据解析为json 格式     
               
                    $('#result').html("欢迎您:  "+member.name);   
                       
                },    
                   
                'json'  //数据传递的类型  json   
               
            );   
           
        });   
           
    });   
// --></mce:script>   
    </head>   
    <body>   
        <span>用户名:</span>   
        <input type="text" id="loginName" name="loginName">   
        <br />   
  
        <span>密码:</span>   
        <input type="password" name="password" id="password">   
        <br />   
  
        <input type="button" id="btn_login" value="Login" />   
        <p>   
            这里显示ajax信息:   
            <br />   
            <span id="result"></span>   
        </p>   
    </body>   
</html>  
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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">
        <mce:script type="text/javascript" src="js/jquery-1.3.2.min.js" mce_src="js/jquery-1.3.2.min.js"></mce:script>
        <mce:script type="text/javascript"><!--
    $(document).ready( function() {
        
        //使用 Ajax 的方式 判断登录
        $("#btn_login").click( function() {
            
            var url = 'ajaxLogin.action';
            
            alert("===");
            
            //获取表单值,并以json的数据形式保存到params中
            var params = {
                loginName:$("#loginName").val(),
                password:$("#password").val(),
            }
            //使用$.post方式    
            $.post(
            
                url,        //服务器要接受的url
                
                params,        //传递的参数        
                
                function cbf(data){    //服务器返回后执行的函数 参数 data保存的就是服务器发送到客户端的数据
                
                    //alert(data);
                    var member = eval("("+data+")");    //包数据解析为json 格式  
            
                    $('#result').html("欢迎您:  "+member.name);
                    
                }, 
                
                'json'    //数据传递的类型  json
            
            );
        
        });
        
    });
// --></mce:script>
    </head>
    <body>
        <span>用户名:</span>
        <input type="text" id="loginName" name="loginName">
        <br />

        <span>密码:</span>
        <input type="password" name="password" id="password">
        <br />

        <input type="button" id="btn_login" value="Login" />
        <p>
            这里显示ajax信息:
            <br />
            <span id="result"></span>
        </p>
    </body>
</html> 

 

第七步:在src目录下加入struts.xml,并配置相应的xml文件,为ajax请求提供数据。代码如下:

view plaincopy to clipboardprint?
<?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>  
  
    <package name="ajax" extends="json-default">  
        <action name="ajaxLogin" class="qy.test.action.AjaxLoginAction">  
  
            <!-- 返回类型为json 在sjon-default中定义 -->  
            <result type="json">  
  
                <!-- root的值对应要返回的值的属性 -->  
                <!-- 这里的result值即是 对应action中的 result -->  
                <param name="root">result</param>  
            </result>  
        </action>  
    </package>  
  
</struts>  
<?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>

    <package name="ajax" extends="json-default">
        <action name="ajaxLogin" class="qy.test.action.AjaxLoginAction">

            <!-- 返回类型为json 在sjon-default中定义 -->
            <result type="json">

                <!-- root的值对应要返回的值的属性 -->
                <!-- 这里的result值即是 对应action中的 result -->
                <param name="root">result</param>
            </result>
        </action>
    </package>

</struts>
 

 

第八步:如果第四步没有加入commons-logging.jar包,这里要记得加入

 

第九步:发布运行。很不幸,你会发现一个错误,

java.lang.ClassNotFoundException: com.opensymphony.xwork2.util.TextUtils:

这是struts的版本错误,因为用的xwork2.1.6-core.jar中不存在TextUtils类,这里把 xwork2.1.2-core.jar也加到classpath中,xwork2.1.2-core.jar中包含这个东西,我们用的是xwork2.1.6的jar,当要用到TextUtils时,就去xwork2.1.2-core.jar中找。



以上出自:http://blog.csdn.net/zhqingyun163/archive/2010/01/18/5208766.aspx

 

经过自己的摸索后把整个过程实现打包如下:

猜你喜欢

转载自chongdiyang.iteye.com/blog/1757307