項目中想用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的過濾器，代碼如下：
<?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，內容如下：
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檔案 內容如下：
<%@ 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請求提供資料。代碼如下：
<?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中找。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
