struts2 + jquery + json 进行ajax请求(转贴)

项目中想用ajax,于是在网上扒了n多资料,犯了n多错误,从今天上班到现在一直在处理这个问题,终于还是把它解决了。

 

当我看到页面的ajax显示后,我兴奋异常,为了记录自己学习的ajax历程,也为了让更多的人少走弯路,特写此一文以记之!

 

废话不说了,为了更好的理解,我重做了一个小的项目,以加深印象。现在就以这个小项目开始我们的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中找。


本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/zhqingyun163/archive/2010/01/18/5208766.aspx

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值