一）jQuery常用AJAX-API
目的：簡化客戶端與服務端進行局部刷新的異步通訊
（1）取得服務端當前時間
簡單形式：jQuery對象.load(url)
返回結果自動添加到jQuery對象代表的標籤中間
如果是Servlet的話，採用的是GET方式
複雜形式：jQuery對象.load(url,sendData,function(backData,textStatus,ajax){......})
sendData ={"user.name":"jack","user.pass":"123"};
以JSON格式文本方式發送，使用POST方式發送，服務端能收到數據
注意：對於load方法而言，如果請求體無參數發送的話，load方法
採用GET方式提交
注意：對於load方法而言，如果請求體有參數發送的話，load方法
採用POST方式提交
注意：使用load方法時，自動進行編碼，無需手工編碼
|
<script type="text/javascript"> $(":button").click(function(){ var url = "${pageContext.request.contextPath}/loadTimeRequest?time"+new Date().getTime(); var sendData = null; $.load(url,sendData,function(a,b,ajax){ var jsonJAVA = ajax.responseText; var jsonJS = eval("("+jsonJAVA+")"); var strTime = jsonJS.strTime; $("span:first").html(strTime).css("color","red"); $("span:last").html(strTime).css("color","blue"); }); //$("span").load(url); }); </script> |
load()方法參數解釋：
參數一：url發送到哪裏去
參數二： sendData發送請求體中的數據，符合JSON格式，例如：{key:value,key:value}
參數三：function處理函數，類似於傳統方式ajax.onreadystatechange = 處理函數
其中參數三爲function處理函數最多可以接收三個參數，含義如下
第一個參數：服務端返回的數據，例如：backData
第二個參數：服務端狀態碼的文本描述，例如：success、error、
第三個參數：ajax異步對象，即XMLHttpRequest對象
以上所有參數的名字可以任意，但必須按順序書寫，儘量做到見名知意
（2）檢查註冊用戶名和密碼是否存在
$.get(url,sendData,function(backData,textStatus,ajax){... ...})
$.post(url,sendData,function(backData,textStatus,ajax){... ...})趙君提倡
注意：使用get或post方法時，自動進行編碼，無需手工編碼
（3）jQuery對象.serialize()
作用：自動生成JSON格式的文本
注意：爲每個jQuery對象設置一個name屬性，因爲name屬性會被認爲請求參數名
注意：必須用<form>標籤元素
適用：如果屬性過多，強烈推薦採用這個API
|
<script type="text/javascript"> //定位按鈕，同時添加單擊事件 $(":button").click(function(){ //獲取用戶名和密碼 var username = $(":text:first").val(); var password = $(":text:last").val(); //去空格 username = $.trim(username); password = $.trim(password); //異步發送到服務端 var url = "${pageContext.request.contextPath}/checkRequest?time="+new Date().getTime(); /*手工書寫JSON文本 var sendData = { "user.username":username, "user.password":password }; */ /*工具生成JSON文本*/ var sendData = $("form").serialize(); $.post(url,sendData,function(backData,textStatus,ajax){ //backData是一個JSON文本/對象，你得通過.號訪問其屬性值 var tip = backData.tip; //創建img節點 var $img = $("<img src='" + tip + "' height='18px' widht='18px'/>") //清空span節點中的內容 $("span").text(""); //將img節點添加到span節點中 $("span").append( $img ); }); }); </script> |
|
public class RegisterAction extends ActionSupport{ private User user; public User getUser() { return user; } public void setUser(User user) { this.user = user; } /** * 檢查註冊用戶名和密碼是否存在 */ public String checkMethod() throws Exception { tip = "images/MsgSent.gif"; if("帥帥".equals(user.getUsername()) && "123".equals(user.getPassword())){ tip = "images/MsgError.gif"; } return "ok"; } private String tip; public String getTip() { return tip; } /** * var backData = { * "tip":"images/MsgError.gif" * } */ } |
（4）jQuery解析XML
|
<?xml version="1.0" encoding="UTF-8"?> <root> <city>廣州</city> <city>中山</city> <city>深圳</city> <city>佛山</city> <city>珠海</city> </root> |
|
<script type="text/javascript"> $(":button").click(function(){ var url = "${pageContext.request.contextPath}/03_city.xml"; var sendData = null; $.get(url,sendData,function(backData,textStatus,ajax){ /* //將xml文件轉成jquery對象，目的是用jquery api解析xml文件 var $xml = $(backData); var $city = $xml.find("city"); $city.each(function(){ //獲取每一個city節點 var city = $(this).text(); alert(city); }); */ var xml = ajax.responseXML; var $xml = $(xml); var $city = $xml.find("city"); $city.each(function(){ //獲取每一個city節點 var city = $(this).text(); alert(city); }); }); }); </script> |
（5）省份-城市，基於jQuery的AJAX二級聯動，用Struts2整合AJAX【非數據庫版】
$.ajax(
{
type:"POST",
url:"${pageContext.request.contextPath}/findCityByProvinceRequest?id="+newDate().getTime(),
data:{"province":province},
success:function(backData,textStatus,ajax){}
}
);
注意：這裏每個key值不能亂寫
|
<select id="province"> <option>選擇省份</option> <option>廣東</option> <option>湖南</option> </select> <select id="city"> <option>選擇城市</option> </select> |
|
<script type="text/javascript"> $("#province").change(function(){ //刪除原城市下拉框中的內容，除第一項外 $("#city option:gt(0)").remove(); var province = $("#province option:selected").text(); if("選擇省份" != province){ $.ajax({ "type":"POST", "url":"${pageContext.request.contextPath}/findCityByProvince?time="+new Date().getTime(), "sendData":{"province":province}, "success":function(backData,textStatus,ajax){ //js對象 var city = backData.cityList; //jquery對象 var $city = $(city); //each() $city.each(function(){ //this表示每個城市 var $option = $("<option>" + this + "</option>"); $("#city").append( $option ); }); } }); } }); </script> |
|
public class ProvinceCityAction extends ActionSupport{ private String province;//廣東 public void setProvince(String province) { this.province = province; } public String findCityByProvince() throws Exception { cityList = new ArrayList<String>(); if("廣東".equals(province)){ cityList.add("湛江"); cityList.add("汕頭"); }else if("湖南".equals(province)){ cityList.add("邵陽"); cityList.add("瀏陽"); } return "ok"; } private List<String> cityList; public List<String> getCityList() { return cityList; } /** * var backData = { * "cityList":["邵陽","瀏陽"] * } */ } |
|
<struts>
<package name="timePackage" extends="json-default" namespace="/">
<global-results> <result name="ok" type="json"/> </global-results>
<!-- 獲取服務端時間 --> <action name="loadTimeRequest" class="cn.itcast.javaee.js.time.TimeAction" method="loadTimeMethod"/>
<!-- 檢查用戶名和密碼是否存在 --> <action name="checkRequest" class="cn.itcast.javaee.js.register.RegisterAction" method="checkMethod"/>
<!-- 根據省份查詢城市 --> <action name="findCityByProvince" class="cn.itcast.javaee.js.provincecity.ProvinceCityAction" method="findCityByProvince"/>
</package>
</struts> |