ajax測試非同步提交

標籤：style   blog   http   color   io   os   ar   strong   檔案   

今天測試了$.ajax()方法：

   $("a").click(function(){
        $.ajax({
           url:"MyJsp.jsp",
           type:"GET",
           success:function(msg){
           $("body").append(msg);
         }

參數url是目標地址源，type:是請求提交類型，success:function是回呼函數，這個方法可以把jsp頁面或者html頁面直接當做msg傳過來添加到body標籤之後！

還有個

$.get("test.cgi", { name: "John", time: "2pm" },  function(data){    alert("Data Loaded: " + data);  });和

$.post("test.cgi", { name: "John", time: "2pm" },  function(data){    alert("Data Loaded: " + data);  });
方法，這裡除了提交方式不一樣，其他都一樣：
url:為發送請求地址。
data (可選)：待發送 Key/value 參數。
callback (可選):發送成功時回呼函數。
type (可選):返回內容格式，xml, html, script, json, text, _default。
如：$.get("index.jsp", { name: "John",age:"22" },
function(data){
alert( data);
  });

還有個jQuery.getJSON(url, [data], [callback])方法
測試方法是從json裡面讀取各個省份和省份下的城市載入到兩個select標籤裡
citys.json檔案裡的資料為：
[{"name":"北京","cities":["西城","東城","崇文","宣武","朝陽","海澱","丰台","石景山","門頭溝","房山","通州","順義","大興","昌平","平穀","懷柔","密雲","延慶"]},{"name":"天津","cities":["青羊","河東","河西","南開","河北","紅橋","塘沽","漢沽","大港","東麗","西青","北辰","津南","武清","寶坻","靜海","寧河","薊縣","開發區"]},{"name":"河北","cities":["石家莊","秦皇島","廊坊","保定","邯鄲","唐山","邢台","衡水","張家口","承德","滄州","衡水"]},{"name":"山西","cities":["太原","大同","長治","晉中","陽泉","朔州","運城","臨汾"]},{"name":"內蒙古","cities":["呼和浩特","赤峰","通遼","錫林郭勒","興安"]},{"name":"遼寧","cities":["大連","瀋陽","鞍山","撫順","營口","錦州","丹東","朝陽","遼陽","阜新","鐵嶺","盤錦","本溪","葫蘆島"]},{"name":"吉林","cities":["長春","吉林","四平","遼源","通化","延吉","白城","遼源","松原","臨江","琿春"]},{"name":"黑龍江","cities":["哈爾濱","齊齊哈爾","大慶","牡丹江","鶴崗","佳木斯","綏化"]},{"name":"上海","cities":["浦東","楊浦","徐匯","靜安","盧灣","黃浦","普陀","閘北","虹口","長寧","寶山","閔行","嘉定","金山","松江","青浦","崇明","奉賢","南匯"]},{"name":"江蘇","cities":["南京","蘇州","無錫","常州","揚州","徐州","南通","鎮江","泰州","淮安","連雲港","宿遷","鹽城","淮陰","沐陽","張家港"]},{"name":"浙江","cities":["杭州","金華","寧波","溫州","嘉興","紹興","麗水","湖州","台州","舟山","衢州"]},{"name":"安徽","cities":["合肥","馬鞍山","蚌埠","黃山","蕪湖","淮南","銅陵","阜陽","宣城","安慶"]},{"name":"福建","cities":["福州","廈門","泉州","漳州","南平","龍岩","莆田","三明","寧德"]},{"name":"江西","cities":["南昌","景德鎮","上饒","萍鄉","九江","吉安","宜春","鷹潭","新喻","贛州"]},{"name":"山東","cities":["青島","濟南","淄博","煙台","泰安","臨沂","日照","德州","威海","東營","荷澤","濟寧","濰坊","棗莊","聊城"]},{"name":"河南","cities":["鄭州","洛陽","開封","平頂山","濮陽","安陽","許昌","南陽","信陽","周口","新鄉","焦作","三門峽","商丘"]},{"name":"湖北","cities":["武漢","襄樊","孝感","十堰","荊州","黃石","宜昌","黃岡","恩施","鄂州","江漢","隨棗","荊沙","鹹寧"]},{"name":"湖南","cities":["長沙","湘潭","嶽陽","株洲","懷化","永州","益陽","張家界","常德","衡陽","湘西","邵陽","婁底","郴州"]},{"name":"廣東","cities":["廣州","深圳","東莞","佛山","珠海","汕頭","韶關","江門","梅州","揭陽","中山","河源","惠州","茂名","湛江","陽江","潮州","雲浮","汕尾","潮陽","肇慶","順德","清遠"]},{"name":"廣西","cities":["南寧","桂林","柳州","梧州","來賓","貴港","鬰林","賀州"]},{"name":"海南","cities":["海口","三亞"]},{"name":"重慶","cities":["渝中","大渡口","江北","沙坪壩","九龍坡","南岸","北碚","萬盛","雙橋","渝北","巴南","萬州","涪陵","黔江","長壽"]},{"name":"四川","cities":["成都","達州","南充","樂山","綿陽","德陽","內江","遂寧","宜賓","巴中","自貢","康定","攀枝花"]},{"name":"貴州","cities":["貴陽","遵義","安順","黔西南","都勻"]},{"name":"雲南","cities":["昆明","麗江","昭通","玉溪","臨滄","文山","紅河","楚雄","大理"]},{"name":"西藏","cities":["拉薩","林芝","日喀則","昌都"]},{"name":"陝西","cities":["西安","鹹陽","延安","漢中","榆林","商南","略陽","宜君","麟遊","白河"]},{"name":"甘肅","cities":["蘭州","金昌","天水","武威","張掖","平涼","酒泉"]},{"name":"青海","cities":["黃南","海南","西寧","海東","海西","海北","果洛","玉樹"]},{"name":"寧夏","cities":["銀川","吳忠"]},{"name":"新疆","cities":["烏魯木齊","哈密","喀什","巴音郭楞","昌吉","伊犁","阿勒泰","克拉瑪依","博爾塔拉"]},{"name":"香港","cities":["中西區","灣仔區","東區","南區","九龍-油尖旺區","九龍-深水埗區","九龍-九龍城區","九龍-黃大仙區","九龍-觀塘區","新界-北區","新界-大埔區","新界-沙田區","新界-西貢區","新界-荃灣區","新界-屯門區","新界-元朗區","新界-葵青區","新界-離島區"]},{"name":"澳門","cities":["花地瑪堂區","聖安多尼堂區","大堂區","望德堂區","風順堂區","嘉模堂區","聖方濟各堂區","路氹城"]}]
其中每個大括弧可以看作一個對象，每個：前邊是屬性名稱，後邊是值，每個[]看成一個數組。
測試js代碼為：
var data;
 $(function(){
 $.getJSON("citys.json",function(msg){
     data=msg;
     $.each(data,function(){
      $("select[name=province]").append("<option>"+this.name+"</option>");
      });
  
      $.each(data[0].cities,function(){
       $("select[name=city]").append("<option>"+this+"</option>");
       })      
    })
 $("select[name=province]").change(function(){         
              $.each(data,function(){
                  if(this.name==$("option:selected").val()){
                      $("select[name=city]").empty();
                      $.each(this.cities,function(){
                      $("select[name=city]").append("<option>"+this+"</option>");
                          })              
                  }
                  })
             })
 });
html裡的body裡為：
<select name="province">
    </select>
    <br/>
    <select name="city">
  </select>
還有個方法:jQueryload(url, [data], [callback])

url     String

待裝入 HTML 網頁網址。

data (可選)Map,String

發送至伺服器的 key/value 資料。在jQuery 1.3中也可以接受一個字串了。

callback (可選)Callback

載入成功時回呼函數。

$(function(){

 $("a").click(function(){

 $("div").load("top.jsp");

 

                 });

           })

這裡的.load(“”)裡面可以放整個頁面也可以用過濾選取器 只選擇載入其中一個選取器比如

$("div").load("top.jsp .myclass");只載入了其中top.jsp裡面的一個類標籤！

ajax測試非同步提交