Asynchronous submission of Ajax Testing

Today I tested the $. Ajax () method:

$ ("A"). Click (function (){
$. Ajax ({
URL: "myjsp. jsp ",
Type: "Get ",
Success: function (MSG ){
$ ("Body"). append (MSG );
}

The parameter URL is the target address source, type: Is the request submission type, and success: function is the callback function, this method can directly upload the JSP page or HTML page as MSG and add it to the body tag!

There is another

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

$. Post ("test. cgi ", {name:" John ", time:" 2 "}, function (data) {alert (" data loaded: "+ Data );});
Method, except for the submission method:
URL:Send request address.
Data(Optional): Key/value parameter to be sent.
Callback(Optional ):Callback function when sending successfully.
Type(Optional): The returned content format is XML, HTML, script, JSON, text, and _ default.
For example:$.get("index.jsp", { name: "John",age:"22" },
function(data){
alert( data);
  });

There is also jquery. getjson (URL,[Data],[Callback]) Method
The test method is to read the cities in each province and province from JSON and load them into two select tags.
The data in the citys. JSON file is:
[{"Name": "Beijing", "Cities": ["Xicheng", "Dongcheng", "Chongwen", "Xuanwu", "Chaoyang", "Haidian ", "Fengtai", "Shijingshan", "Mentougou", "Fangshan", "Tongzhou", "Shunyi", "Daxing", "Changping", "Pinggu", "Huairou ", "Miyun", "Yanqing"] },{ "name": "Tianjin", "Cities": ["Qingyang", "Hedong", "Hexi", "Nankai ", "Hebei", "Hongqiao", "Tanggu", "hanggu", "Dagang", "dongli", "Xiqing", "bei Chen", "Jinnan", "Wuqing ", "baodi", "Jinghai", "Ninghe", "Jixian", "Development Zone"] },{ "name": "Hebei", "Cities": ["Shijiazhuang ", "Qinhuangdao", "Langfang", "Baoding", "Handan", "Tangshan", "Xingtai", "Hengshui", "Zhangjiakou", "Chengde", "Cangzhou ", "Hengshui"] },{ "name": "Shanxi", "Cities": ["Taiyuan", "Datong", "Changzhi", "Jinzhong", "Yangquan ", "Shuozhou", "Yuncheng", "Linfen"] },{ "name": "Inner Mongolia", "Cities": ["Hohhot", "Chifeng", "Tongliao ", "xilingol", "Xingan"] },{ "name": "Liaoning", "Cities": ["Dalian", "Shenyang", "Anshan", "Fushun ", "Yingkou", "Jinzhou", "Dandong", "Chaoyang", "Liaoyang", "Fuxin", "Tieling", "Panjin", "Benxi ", "Huludao"] },{ "name": "Jilin", "Cities": ["Changchun", "Jilin", "Siping", "Liaoyuan", "Tonghua ", "Yanji", "Baicheng", "Liaoyuan", "Songyuan", "linjiang", "Hunchun"] },{ "name": "Heilongjiang", "Cities ": ["Harbin", "Qiqihar", "Daqing", "Mudanjiang", "Hegang", "Jiamusi", "Suihua"] },{ "name": "Shanghai ", "Cities": ["Pudong", "Yangpu", "Xuhui", "Jingan", "Luwan", "Huangpu", "Putuo", "Zhabei ", "Hongkou", "Changning", "Baoshan", "Minhang", "Jiading", "Jinshan", "Songjiang", "Qingpu", "Chongming", "Fengxian ", "Nanhui"] },{ "name": "Jiangsu", "Cities": ["Nanjing", "Suzhou", "Wuxi", "Changzhou", "Yangzhou ", "Xuzhou", "Nantong", "Zhenjiang", "Taizhou", "Huai 'an", "Lianyungang", "Suqian", "Yancheng", "Huai Yin", "Mu Yang ", "Zhangjiagang"] },{ "name": "Zhejiang", "Cities": ["Hangzhou", "Jinhua", "Ningbo", "WenZhou", "Jiaxing ", "Shaoxing", "Lishui", "Huzhou", "Taizhou", "Zhoushan", "Quzhou"] },{ "name": "Anhui", "Cities ": ["Hefei", "Maanshan", "Bengbu", "Huangshan", "Wuhu", "Huainan", "Tongling", "Fuyang", "xuancheng ", "Anqing"] },{ "name": "Fujian", "Cities": ["Fuzhou", "Xiamen", "Quanzhou", "Zhangzhou", "Nanping ", "Longyan", "Putian", "Sanming", "Ningde"] },{ "name": "Jiangxi", "Cities": ["Nanchang", "Jingdezhen ", "Shangrao", "Pingxiang", "Jiujiang", "Ji 'an", "Yichun", "Yingtan", "Xinyu", "Ganzhou"] },{ "name ": "Shandong", "Cities": ["Qingdao", "Jinan", "Zibo", "Yantai", "tai'an", "Linyi", "Rizhao ", "Dezhou", "Weihai", "Dongying", "Heze", "Jining", "Weifang", "Zaozhuang", "Liaocheng"] },{ "name ": "Henan", "Cities": ["Zhengzhou", "Luoyang", "Kaifeng", "Pingdingshan", "Puyang", "Anyang", "xuchang ", "Nanyang", "Xinyang", "Zhoukou", "Xinxiang", "Jiaozuo", "Sanmenxia", "Shangqiu"] },{ "name": "Hubei ", "Cities": ["Wuhan", "Xiangfan", "Xiaogan", "Shiyan", "Jingzhou", "Huangshi", "Yichang", "Huanggang ", "Enshi", "Ezhou", "Jianghan", "suizao", "jingsha", "Xianning"] },{ "name": "Hunan", "Cities ": ["Changsha", "Xiangtan", "Yueyang", "Zhuzhou", "Huaihua", "Yongzhou", "Yiyang", "Zhangjiajie", "Changde ", "Hengyang", "Xiangxi", "Shaoyang", "loudi", "Chenzhou"] },{ "name": "Guangdong", "Cities": ["Guangzhou ", "Shenzhen", "Dongguan", "Foshan", "Zhuhai", "Shantou", "Shaoguan", "Jiangmen", "Meizhou", "Jieyang", "Zhongshan ", "Heyuan", "Huizhou", "Maoming", "Zhanjiang", "Yangjiang", "Chaozhou", "yunfu", "Shanwei", "Chaoyang", "Zhaoqing ", "Shunde", "Qingyuan"] },{ "name": "Guangxi", "Cities": ["Nanning", "Guilin", "Liuzhou", "Wuzhou ", "Laibin", "Guigang", "Yulin", "Hezhou"] },{ "name": "Hainan", "Cities": ["Haikou ", "Sanya"] },{ "name": "Chongqing", "Cities": ["Yuzhong", "dadukou", "Jiangbei", "Shapingba", "jiulongpo ", "South Bank", "Beibei", "wansheng", "shuangqiao", "yubei", "banan", "Wanzhou", "Fuling", "Qianjiang ", "Changshou"] },{ "name": "Sichuan", "Cities": ["Chengdu", "dazhou", "Nanchong", "Leshan", "Mianyang ", "Deyang", "Neijiang", "Suining", "Yibin", "Bazhong", "Zigong", "Kangding", "Panzhihua"] },{ "name ": "Guizhou", "Cities": ["Guiyang", "Zunyi", "Anshun", "Southwestern Guizhou", "Duyun"] },{ "name": "Yunnan ", "Cities": ["Kunming", "Lijiang", "Zhaotong", "Yuxi", "Lincang", "Wenshan", "Honghe", "Chuxiong ", "Dali"] },{ "name": "Tibet", "Cities": ["Lhasa", "Nyingchi", "Shigatse", "Changdu"]}, {"name": "Shaanxi", "Cities": ["Xi'an", "Xianyang", "yan'an", "Hanzhong", "Yulin", "Shangnan ", "Lueyang", "Yijun", "linyou", "Baihe"] },{ "name": "Gansu", "Cities": ["Lanzhou", "Jinchang ", "Tianshui", "Wuwei", "wei", "Pingliang", "Jiuquan"] },{ "name": "Qinghai", "Cities": ["Huangnan ", "Hainan", "Xining", "Haidong", "haixi", "Haibei", "Guoluo", "Yushu"] },{ "name": "Ningxia ", "Cities": ["Yinchuan", "Wu Zhong"] },{ "name": "Xinjiang", "Cities": ["Urumqi", "Hami ", "Kashgar", "bayingol", "Changji", "Yili", "Altay", "Karamay", "bortala"] },{ "name": "Hong Kong ", "Cities": ["Middle West", "Wan Chai District", "East District", "South District", "Kowloon-youqiwang district", "Kowloon-shenshui Po District ", "Kowloon-Kowloon City District", "Kowloon-Wong Tai Sin District", "Kowloon-Kwun Tong District", "New Territories-North District", "New Territories-Grand Hyatt district", "New Territories-Sha Tin District ", "New Territories-Sai Kuang district", "New Territories-Tsuen Wan District", "New Territories-Tuen Mun District", "New Territories-Yuen Long District", "New Territories-Kwai Tsing District", "New Territories-islands"]}, {"name": "Macao", "Cities": ["huadi Matang district", "San Andoni Hall district", "lobby district", "wangde Hall district ", "Wind shun Tang district", "Jia Mo Tang district", "San Francisco Tong District", "Lu Yi City"]}]
Each braces can be considered as an object, each of which is the attribute name, followed by a value, and each [] is considered as an array.
The JS Code for testing is:
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> ");
})
}
})
})
});
The body in HTML is:
<Select name = "Province">
</SELECT>
<Br/>
<Select name = "city">
</SELECT>
Another method: jqueryload (URL,[Data],[Callback])

URL string

The URL of the HTML webpage to be loaded.

Data(Optional)Map, string

Key/value data sent to the server. In jquery 1.3, you can also accept a string.

Callback(Optional)Callback

Callback function when loading is successful.

$ (Function (){

$ ("A"). Click (function (){

$ ("Div"). Load ("Top. jsp ");

});

})

Here, the. Load ("") can be used to store the entire page, or the filter selector can be used to select only one of the selectors, such

$ ("Div"). Load ("Top. jsp. myclass"); only one class tag in top. jsp is loaded!

Asynchronous submission of Ajax Testing