struts2 + jquery + json 进行ajax请求



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的过滤器，代码如下：

  1. <?xml version=”1.0″ encoding=”UTF-8″?>
  2. <web-app version=”2.5″
  3.     xmlns=”http://java.sun.com/xml/ns/javaee”
  4.     xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance”
  5.     xsi:schemaLocation=”http://java.sun.com/xml/ns/javaee
  6.     http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd”>
  8.     <filter>
  9.         <filter-name>struts2</filter-name>
  10.         <filter-class>org.apache.struts2.dispatcher.FilterDispatcher</filter-class>
  11.     </filter>
  12.     <filter-mapping>
  13.         <filter-name>struts2</filter-name>
  14.         <url-pattern>/*</url-pattern>
  15.     </filter-mapping>
  19.   <welcome-file-list>
  20.     <welcome-file>index.jsp</welcome-file>
  21.   </welcome-file-list>
  22. </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，内容如下：

  1. package qy.test.action;
  3. import java.util.HashMap;
  4. import java.util.Map;
  6. import net.sf.json.JSONObject;
  8. import com.opensymphony.xwork2.ActionSupport;
  10. public class AjaxLoginAction extends ActionSupport {
  12.     // 用户Ajax返回数据
  13.     private String result;
  15.     // struts的属性驱动模式，自动填充页面的属性到这里
  16.     private String loginName;
  17.     private String password;
  19.     @Override
  20.     public String execute() {
  22.         // 用一个Map做例子
  23.         Map<String, String> map = new HashMap<String, String>();
  25.         // 为map添加一条数据，记录一下页面传过来loginName
  26.         map.put(“name”, this.loginName);
  28.         // 将要返回的map对象进行json处理
  29.         JSONObject jo = JSONObject.fromObject(map);
  31.         // 调用json对象的toString方法转换为字符串然后赋值给result
  32.         this.result = jo.toString();
  34.         // 可以测试一下result
  35.         System.out.println(this.result);
  37.         return SUCCESS;
  39.     }
  41.     //getter  setter 方法省略
  42. }

 


 

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

  1. <%@ page language=”java” contentType=”text/html; charset=UTF-8″
  2.     pageEncoding=”UTF-8″%>
  3. <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
  4. <html>
  5.     <head>
  6.         <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
  7.         <mce:script type=”text/javascript” src=”js/jquery-1.3.2.min.js” mce_src=”js/jquery-1.3.2.min.js”></mce:script>
  8.         <mce:script type=”text/javascript”><!–
  9.     $(document).ready( function() {
  11.         //使用 Ajax 的方式 判断登录
  12.         $(“#btn_login”).click( function() {
  14.             var url = ‘ajaxLogin.action’;
  16.             alert(“===”);
  18.             //获取表单值，并以json的数据形式保存到params中
  19.             var params = {
  20.                 loginName:$(“#loginName”).val(),
  21.                 password:$(“#password”).val(),
  22.             }
  23.             //使用$.post方式
  24.             $.post(
  26.                 url,        //服务器要接受的url
  28.                 params,     //传递的参数
  30.                 function cbf(data){ //服务器返回后执行的函数 参数 data保存的就是服务器发送到客户端的数据
  32.                     //alert(data);
  33.                     var member = eval(“(“+data+”)”);    //包数据解析为json 格式
  35.                     $(‘#result’).html(“欢迎您：  “+member.name);
  37.                 },
  39.                 ‘json’  //数据传递的类型  json
  41.             );
  43.         });
  45.     });
  46. // –></mce:script>
  47.     </head>
  48.     <body>
  49.         <span>用户名：</span>
  50.         <input type=”text” id=”loginName” name=”loginName”>
  51.         <br />
  53.         <span>密码：</span>
  54.         <input type=”password” name=”password” id=”password”>
  55.         <br />
  57.         <input type=”button” id=”btn_login” value=”Login” />
  58.         <p>
  59.             这里显示ajax信息：
  60.             <br />
  61.             <span id=”result”></span>
  62.         </p>
  63.     </body>
  64. </html>

 

 

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

  1. <?xml version=”1.0″ encoding=”UTF-8″ ?>
  2. <!DOCTYPE struts PUBLIC
  3.     “-//Apache Software Foundation//DTD Struts Configuration 2.0//EN”
  4.     “http://struts.apache.org/dtds/struts-2.0.dtd”>
  6. <struts>
  8.     <package name=”ajax” extends=”json-default”>
  9.         <action name=”ajaxLogin” class=”qy.test.action.AjaxLoginAction”>
  11.             <!– 返回类型为json 在sjon-default中定义 –>
  12.             <result type=”json”>
  14.                 <!– root的值对应要返回的值的属性 –>
  15.                 <!– 这里的result值即是 对应action中的 result –>
  16.                 <param name=”root”>result</param>
  17.             </result>
  18.         </action>
  19.     </package>
  21. </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/article/details/5208766