項目中想用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"?><br /><web-app version="2.5"<br />xmlns="http://java.sun.com/xml/ns/javaee"<br />xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"<br />xsi:schemaLocation="http://java.sun.com/xml/ns/javaee<br />http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"></p><p><filter><br /><filter-name>struts2</filter-name><br /><filter-class>org.apache.struts2.dispatcher.FilterDispatcher</filter-class><br /></filter><br /><filter-mapping><br /><filter-name>struts2</filter-name><br /><url-pattern>/*</url-pattern><br /></filter-mapping></p><p> <welcome-file-list><br /> <welcome-file>index.jsp</welcome-file><br /> </welcome-file-list><br /></web-app><br />
第四步：加入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;</p><p>import java.util.HashMap;<br />import java.util.Map;</p><p>import net.sf.json.JSONObject;</p><p>import com.opensymphony.xwork2.ActionSupport;</p><p>public class AjaxLoginAction extends ActionSupport {</p><p>// 使用者Ajax返回資料<br />private String result;</p><p>// struts的屬性驅動模式，自動填滿頁面的屬性到這裡<br />private String loginName;<br />private String password;</p><p>@Override<br />public String execute() {</p><p>// 用一個Map做例子<br />Map<String, String> map = new HashMap<String, String>();</p><p>// 為map添加一條資料，記錄一下頁面傳過來loginName<br />map.put("name", this.loginName);</p><p>// 將要返回的map對象進行json處理<br />JSONObject jo = JSONObject.fromObject(map);</p><p>// 調用json對象的toString方法轉換為字串然後賦值給result<br />this.result = jo.toString();</p><p>// 可以測試一下result<br />System.out.println(this.result);</p><p>return SUCCESS;</p><p>}</p><p>//getter setter 方法省略<br />}<br />
第六步：寫前台index.jsp，注意加入 jquery的js檔案 內容如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"<br />pageEncoding="UTF-8"%><br /><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><br /><html><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><br /><mce:script type="text/javascript" src="js/jquery-1.3.2.min.js" mce_src="js/jquery-1.3.2.min.js"></mce:script><br /><mce:script type="text/javascript"><!--<br />$(document).ready( function() {</p><p>//使用 Ajax 的方式 判斷登入<br />$("#btn_login").click( function() {</p><p>var url = 'ajaxLogin.action';</p><p>alert("===");</p><p>//擷取表單值，並以json的資料形式儲存到params中<br />var params = {<br />loginName:$("#loginName").val(),<br />password:$("#password").val(),<br />}<br />//使用$.post方式<br />$.post(</p><p>url,//伺服器要接受的url</p><p>params,//傳遞的參數</p><p>function cbf(data){//伺服器返回後執行的函數 參數 data儲存的就是伺服器發送到用戶端的資料</p><p>//alert(data);<br />var member = eval("("+data+")");//包資料解析為json 格式 </p><p>$('#result').html("歡迎您： "+member.name);</p><p>}, </p><p>'json'//資料傳遞的類型 json</p><p>);</p><p>});</p><p>});<br />// --></mce:script><br /></head><br /><body><br /><span>使用者名稱：</span><br /><input type="text" id="loginName" name="loginName"><br /><br /></p><p><span>密碼：</span><br /><input type="password" name="password" id="password"><br /><br /></p><p><input type="button" id="btn_login" value="Login" /><br /><p><br />這裡顯示ajax資訊：<br /><br /><br /><span id="result"></span><br /></p><br /></body><br /></html>
第七步：在src目錄下加入struts.xml，並配置相應的xml檔案，為ajax請求提供資料。代碼如下：
<?xml version="1.0" encoding="UTF-8" ?><br /><!DOCTYPE struts PUBLIC<br /> "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"<br /> "http://struts.apache.org/dtds/struts-2.0.dtd"></p><p><struts></p><p><package name="ajax" extends="json-default"><br /><action name="ajaxLogin" class="qy.test.action.AjaxLoginAction"></p><p><!-- 傳回型別為json 在sjon-default中定義 --><br /><result type="json"></p><p><!-- root的值對應要返回的值的屬性 --><br /><!-- 這裡的result值即是 對應action中的 result --><br /><param name="root">result</param><br /></result><br /></action><br /></package></p><p></struts><br />
第八步：如果第四步沒有加入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
