欢迎来到Doc100.Net免费学习资源知识分享平台!
您的位置:首页 > 程序异常 >

<二>jquery浜嬩欢鍜宩query涓殑ajax

更新时间: 2014-01-05 01:53:48 责任编辑: Author_N1

 

<2>jQuery浜嬩欢鍜宩Query涓殑Ajax
鎺ョ潃涓婇潰涓€绡囩户缁€傚叾瀹瀓query鐨勫唴瀹硅窡瀹㈡埛绔痡avascript鍐呭鍩烘湰鏄竴涓€瀵瑰簲鐨勩€?

涓夈€乯query 浜嬩欢
褰撶敤鎴锋祻瑙堥〉闈㈡椂锛屾祻瑙堝櫒浼氬椤甸潰浠g爜杩涜瑙i噴鎴栫紪璇戙€傝繖涓繃绋嬪疄璐ㄦ槸浜嬩欢椹卞姩鐨勶紝鍗抽〉闈㈠湪鍔犺浇鏃舵墽琛屼竴涓猯oad浜嬩欢锛屽湪杩欎釜浜嬩欢涓疄鐜版祻瑙堝櫒缂栬瘧椤甸潰浠g爜鐨勮繃绋嬨€?

1. jquery浜嬩欢瀵硅薄
闇€瑕佺煡閬撶殑鏈€閲嶈鐨勪竴浠朵簨鎯呮槸锛?strong>姣忎釜浜嬩欢澶勭悊绋嬪簭閮戒紶鍏ヤ竴涓猨query浜嬩欢瀵硅薄浣滀负绗竴涓弬鏁?/span>锛岃瀵硅薄鐨勫瓧娈垫彁渚涗簡涓庤浜嬩欢鐩稿叧鐨勮缁嗕俊鎭紙濡傞紶鏍囨寚閽堢殑鍧愭爣锛夈€傞€氬父锛岃皟鐢ㄤ簨浠跺鐞嗙▼搴忔椂鍙甫鏈変簨浠跺璞¤繖涓敮涓€鍙傛暟锛屽鏋滅敤trigger()鏄惧紡瑙﹀彂浜嬩欢锛屽彲浠ヤ紶鍏ラ澶栫殑鍙傛暟鏁扮粍锛岃繖浜涘弬鏁板湪绗竴涓璞″弬鏁颁箣鍚庝紶閫掔粰浜嬩欢澶勭悊绋嬪簭銆?
Jquery閫氳繃瀹氫箟鑷繁鐨凟vent瀵硅薄鏉?strong>闅愯棌娴忚鍣ㄤ箣闂寸殑瀹炵幇宸紓銆侸query浜嬩欢瀵硅薄鍙浠3c鏍囧噯涓烘爣鍑嗭紝鍚屾椂涔熷疄鐜颁簡涓€浜涘疄闄呯殑浜嬩欢鏍囧噯銆侸query浼氬皢涓€涓嬫墍鏈夊瓧娈典粠鍘熺敓Event瀵硅薄涓鍒跺埌jquery瀵硅薄涓婏紙灏界瀵逛簬鐗瑰畾浜嬩欢绫诲瀷鏉ヨ鏈変簺瀛楁鍊间负undefined锛夛細



1. 浜嬩欢鏈哄埗
涓ユ牸鏉ヨ锛屼簨浠跺湪瑙﹀彂鍚庤鍒嗕负涓や釜闃舵锛堝墠闈㈠鎴风javascript閮ㄥ垎璇村埌鏄笁涓樁娈碉紝涓€鎹曡幏锛屼簩鍝嶅簲锛屼笁鍐掓场锛夈€備竴鏄崟鑾凤紝鍙︿竴涓垯鏄啋娉★紙bubbling锛夈€備絾閬楁喚鐨勬槸澶у鏁版祻瑙堝櫒骞朵笉鏄兘鏀寔鎹曡幏闃舵锛?strong>jquery涔熶笉鏀寔銆傚洜姝ゅ湪浜嬩欢瑙﹀彂鍚庡線寰€鎵ц鍐掓场杩囩▼銆傛墍璋撶殑鍐掓场鍏跺疄灏辨槸浜嬩欢鎵ц鐨勯『搴忋€?
浠g爜涓彲浠ヤ娇鐢ㄤ簨浠剁殑stopPropagation()鏂规硶闃绘浜嬩欢鐨勫啋娉¤繃绋嬶紝杩樺彲浠ラ€氳繃璇彞return false瀹炵幇鍋滄浜嬩欢鐨勫啋娉°€?
濡傦細
$(鈥渂ody, div, #button鈥?.click(function(event){
鈥?
event.stopPropagation(); // 闃绘鍐掓场杩囩▼銆?
})

2. 椤甸潰杞藉叆浜嬩欢ready(), OnLoad()
Jquery鐨剅eady鍜宩avascript鐨刼nLoad浜嬩欢鍦?strong>鎵ц鏃堕棿涓?/strong>鏈夊尯鍒€?
1锛塷nLoad鏂规硶蹇呴』鏄〉闈腑鍏ㄩ儴鍏冪礌瀹屽叏鍔犺浇鍒版祻瑙堝櫒鍚庢墠瑙﹀彂锛屽鏋滈〉闈腑鐨勫浘鐗囪繃澶氭垨杩囧ぇ鍒欒绛塐nLoad()鏂规硶鎵ц瀹屾瘯鐢ㄦ埛鎵嶈兘杩涜鍏朵粬鎿嶄綔锛?
2锛塲query鐨剅eady鏂规硶鍙绛夐〉闈㈢殑dom妯″瀷鍔犺浇瀹屾瘯灏变細鎵ц銆侸query鑴氭湰鍔犺浇鍒伴〉闈㈡椂锛屼細璁剧疆涓€涓猧sReady鏍囪锛岀敤浜庣洃鍚〉闈㈠姞杞界殑杩涘害锛屽綋閬囧埌鎵цready()鏂规硶鏃讹紝閫氳繃鏌ョ湅isReady鏄惁琚缃紝濡傛灉鏈璁剧疆璇存槑椤甸潰骞舵湭鍔犺浇瀹屾垚锛屽湪姝ゆ儏鍐典笅锛屽皢鏈畬鎴愮殑閮ㄥ垎鐢ㄤ竴涓暟缁勭紦瀛樿捣鏉ワ紝鍏ㄩ儴鍔犺浇瀹屾垚鍚庡啀灏嗘湭瀹屾垚鐨勯儴鍒嗛€氳繃缂撳瓨涓€涓€鎵ц銆?

3. 缁戝畾浜嬩欢
1锛?(鈥渂utton鈥?.click(function(){
鈥?
});

2) 閫氳繃bind鏂规硶缁戝畾銆?/strong>
bind(type, [data], fn);鍏朵腑type鍙互鏄痗lick, mousemove绛夛紝涔熷彲浠ユ槸鑷畾涔変簨浠讹紝data鍙€夛紝鏄紶缁欏洖璋冨嚱鏁扮殑鏁版嵁锛屼綔涓篹vent.data灞炴€у€间紶閫掔粰浜嬩欢瀵硅薄锛宖n灏辨槸鍥炶皟鍑芥暟銆?
1) 濡傦細$(鈥?button鈥?.bind(鈥渃lick鈥? function(){
鈥?
});
甯﹀彲閫夊弬鏁帮細
$(鈥?button鈥?.bind(鈥渃lick鈥? {msg:message}, function(event){
    $(鈥?divTip鈥?.show().html(event.data.msg);
})



杩樺彲浠?strong>鍚屾椂缁戝畾澶氫釜浜嬩欢
锛屽:
$(鈥減鈥?.bind(鈥渁 b鈥? fn); // 浜嬩欢a鍜宐涔嬮棿鐢ㄧ┖鏍奸殧寮€锛岄兘缁戝畾鍒癴n澶勭悊鏂规硶涓娿€?

2) bind杩樺彲浠ラ€氳繃鏄犲皠鐨勬柟寮忕粦瀹氬嚱鏁般€?/strong>
$(鈥?txt鈥?.bind({
focus:function(){
鈥?
},
change:function(){
鈥?
}
})

3) 杩樺彲浠ユ寚瀹氬懡鍚嶇┖闂?/strong>锛屼簨浠跺搷搴斿彧鍦ㄦ寚瀹氱殑鍛藉悕绌洪棿鍐呮湁鏁堛€傝繖鍦ㄦā鍧楀寲寮€鍙戜腑寰堥噸瑕併€?
鍦ㄧ粦瀹氫簨浠跺鐞嗗櫒鍒板懡鍚嶇┖闂存椂鍙渶瑕佸湪浜嬩欢鍚庡姞涓婄偣锛?锛夊拰鍛藉悕绌洪棿鍗冲彲锛屽锛?
       $(鈥渁鈥?.bind(鈥渕ouseover.myMod鈥? fn); //myMode涓哄懡鍚嶇┖闂?
       $(鈥渁鈥?.bind(鈥渕ouseover.myModA.myModB鈥? fn); //myModeA鍜宮yMOdeB涓哄懡鍚嶇┖闂?缁戝畾鍒颁袱涓懡鍚嶇┖闂?

$(鈥渁鈥?.unbind(鈥渕ouseover.myMod鈥?;// 瑙g粦甯﹀懡鍚嶇┖闂寸殑浜嬩欢銆?

4. 鍒囨崲浜嬩欢hover(), toggle()
鍦╦query涓紝鏈変袱涓柟娉曠敤浜庝簨浠剁殑鍒囨崲锛屼竴涓槸hover()锛屽彟涓€涓槸toggle()銆?
1) hover()
hover()鏂规硶鍙互浣垮厓绱犲湪榧犳爣鎮仠鍜岄紶鏍囩Щ鍑虹殑浜嬩欢涓繘琛屽垏鎹紝瀹為檯浣跨敤涓彲浠ラ€氳繃jquery涓殑浜嬩欢mouseenter鍜宮oulseleave杩涜鏇挎崲銆?
$(鈥渁鈥?.hover(function(){}, function(){})
鍜?
$(鈥渁鈥?.mouseenter(function(){}) + $(鈥渁鈥?.mouseleave(function(){})
鏄瓑浠风殑銆?

2) toggle()
toggle()鏂规硶鍙互渚濇璋冪敤N涓寚瀹氱殑鍑芥暟锛岀洿鍒版渶鍚庝竴涓嚱鏁帮紝鐒跺悗閲嶅瀵硅繖浜涘嚱鏁拌疆鐣皟鐢ㄣ€?

5. 绉婚櫎浜嬩欢 unbind()
Unbind([type], [fn]), 鍙傛暟type鏄Щ闄ょ殑浜嬩欢绫诲瀷锛屽鈥渃heck鈥濃€漜lick鈥? fn涓洪渶瑕佺Щ闄ょ殑浜嬩欢澶勭悊鍑芥暟銆傚鏋滆鏂规硶涓嶅甫鍙傛暟鍒欑Щ闄ゆ墍鏈夌粦瀹氱殑浜嬩欢銆?

6. 瑙﹀彂浜嬩欢 trigger(), click()

褰撶敤鎴蜂娇鐢ㄩ紶鏍囷紝閿洏鎴栬Е鍙戝叾浠栦簨浠剁被鍨嬫椂锛屾敞鍐岀殑浜嬩欢澶勭悊绋嬪簭浼氳嚜鍔ㄨ皟鐢ㄣ€傜劧鑰屽鏋滆兘鎵嬪姩瑙﹀彂浜嬩欢鏈夋椂浼氬緢鏈夌敤銆傛墜鍔ㄨЕ鍙戜簨浠?strong>鏈€绠€鍗曠殑鏂规硶
鏄笉甯﹀弬鏁拌皟鐢ㄤ簨浠舵敞鍐岀殑鍝嶅簲鏂规硶銆傚锛宑lick().

   鍚屾椂娉ㄦ剰锛宩query鐨勪簨浠惰Е鍙戞満鍒舵槸鍚屾鐨?/strong>锛屼笉娑夊強浜嬩欢闃熷垪銆傚綋瑙﹀彂涓€浠朵簨浠舵椂锛屽湪璋冪敤鐨勮Е鍙戞柟娉曡繑鍥炰箣鍓嶏紝浜嬩欢澶勭悊绋嬪簭浼氱珛鍒昏皟鐢ㄣ€?

   Jquery瀹氫箟浜嗕竴涓洿閫氱敤鐨則rigger()鏂规硶銆傞€氬父锛岃皟鐢╰rigger()鏃朵細浼犲叆浜嬩欢绫诲瀷瀛楃涓蹭綔涓虹涓€涓弬鏁般€備笌bind(),unbind()涓嶅悓锛屽湪浼犲叆鐨勫瓧绗︿覆涓笉鑳芥寚瀹氬涓簨浠剁被鍨嬨€傝繕鍙互浼犲叆Event瀵硅薄浣滀负绗竴涓弬鏁帮紝濡傛灉浼犲叆鐨勬槸jquery浜嬩欢瀵硅薄锛岃瀵硅薄浼氱洿鎺ヤ紶閫掔粰瑙﹀彂鐨勫鐞嗙▼搴忋€傚鏋滀紶鍏ョ殑鏄櫘閫氬璞★紝浼氬垱寤轰竴涓柊鐨刯query Event瀵硅薄锛屾櫘閫氬璞$殑灞炴€т細娣诲姞鍒版柊瀵硅薄涓€傝繖鏍凤紝鍙互寰堝鏄撲紶閫掗澶栨暟鎹粰浜嬩欢澶勭悊绋嬪簭銆?

缁欎簨浠跺鐞嗙▼搴忎紶閫掗澶栨暟鎹殑鍙︿竴绉嶆柟寮忔槸锛屽湪鎵嬪姩瑙﹀彂浜嬩欢鏃讹紝缁檛rigger()浼犲叆绗簩涓弬鏁般€傜浜屼釜鍙傛暟浼氭垚涓烘瘡涓Е鍙戠殑浜嬩欢澶勭悊绋嬪簭鐨勭浜屼釜鍙傛暟銆傚鏋滀紶鍏ユ暟缁勪綔涓虹浜屼釜鍙傛暟锛屾暟缁勭殑姣忎竴椤逛細浣滀负鐙珛鍙傛暟浼犻€掔粰瑙﹀彂鐨勫鐞嗙▼搴忋€?

7. 鍏朵粬浜嬩欢one()
1) one()鏂规硶鏄负鎵€閫夌殑鍏冪礌缁戝畾鍙Е鍙戜竴娆$殑澶勭悊鍑芥暟锛歰ne(type, [data], fn).
2) trigger(type, [data])鏄湪鎵€閫夋嫨鐨勫厓绱犱笂瑙﹀彂鎸囧畾绫诲瀷鐨勪簨浠躲€傚彲閫夊弬鏁癲ata鐨勭敤娉曡窡bind鏂规硶涓€鏍枫€?

鍥涖€乯query涓殑ajax
鍦╳eb搴旂敤缂栫▼鎶€鏈腑锛宎jax寰堟祦琛岋紝瀹冧娇鐢╤ttp鑴氭湰鏉ユ寜闇€鍔犺浇鏁版嵁锛岃€屼笉闇€瑕佸埛鏂版暣涓〉闈€?

Ajax鏄?strong>Asynchronous JavaScript and XML
鐨勭缉鍐欙紝鍏舵牳蹇冩槸閫氳繃XMLHttpRequest瀵硅薄锛屼互涓€绉嶅紓姝ョ殑鏂瑰紡锛屽悜鏈嶅姟鍣ㄥ彂閫佹暟鎹姹傦紝骞堕€氳繃璇ュ璞℃帴鏀惰繑鍥炵殑鏁版嵁銆?

涓嶄娇鐢╦query锛屼娇鐢╦avascript涔熷彲浠ヨ揪鍒板悓鏍风殑鐩殑锛屽墠闈€婅剼鏈寲XMLHttpRequest銆嬫椂浠嬬粛杩囷紝闇€瑕佸嚑涓楠わ紝鍏堝疄渚嬪寲XMLHttpRequest瀵硅薄锛屽啀缁檕pen鏂规硶璁剧疆鍙傛暟锛屽啀璁剧疆璇锋眰澶达紝璁剧疆onreadystatechange鍝嶅簲鍑芥暟锛屾渶鍚庣敤send鍙戦€併€備絾浣跨敤jquery灏辫兘绠€鍖栧緢澶氥€?

1. load()鏂规硶
浼犵粺鐨刯avascript涓紝浣跨敤XMLHttpRequest瀵硅薄寮傛鍔犺浇鏁版嵁锛岃€屽湪jQuery涓紝浣跨敤load()鏂规硶鍙互鍚屾牱鍔犺浇锛岃娉曟牸寮忥細
load(url, [data], [callback])

鍏朵腑锛屽弬鏁皍rl涓鸿鍔犺浇鐨勯〉闈㈠湴鍧€锛屽彲閫夊弬鏁癧data]琛ㄧず鍙戦€佸埌鏈嶅姟鍣ㄧ殑鏁版嵁锛屾牸寮忎负key/value銆傚彲閫夊弬鏁癱allback琛ㄧず鍔犺浇鎴愬姛鍚庯紝杩斿洖鑷冲姞杞介〉鐨勫洖璋冨嚱鏁般€?

鍏充簬璋冪敤鑰咃細濡傛灉缁戝畾缁檞indow瀵硅薄锛屽垯浼氬湪鎵€鏈夊唴瀹瑰姞杞藉悗瑙﹀彂锛屽寘鎷獥鍙o紝妗嗘灦锛屽璞″拰鍥惧儚銆傚鏋滅粦瀹氬湪鍏冪礌涓婏紝鍒欏綋鍏冪礌鐨勫唴瀹瑰姞杞藉畬姣曞悗瑙﹀彂銆?

娉ㄦ剰:鍙湁褰撳湪杩欎釜鍏冪礌瀹屽叏鍔犺浇瀹屼箣鍓嶇粦瀹歭oad鐨勫鐞嗗嚱鏁?鎵嶄細鍦ㄤ粬鍔犺浇瀹屽悗瑙﹀彂銆傚鏋滀箣鍚庡啀缁戝畾灏辨案杩滀笉浼氳Е鍙戜簡銆傛墍浠?span style="color: red;">涓嶈
鍦?(document).ready()閲岀粦瀹歭oad浜嬩欢锛屽洜涓簀Query浼氬湪鎵€鏈塂OM鍔犺浇瀹屾垚鍚庡啀缁戝畾load浜嬩欢銆?

load鏄墍鏈塲query宸ュ叿涓渶绠€鍗曠殑锛屽悜瀹冧紶鍏rl锛屽畠浼氬紓姝ュ姞杞借url鐨勫唴瀹癸紝鐒跺悗灏嗗唴瀹规彃鍏ユ瘡涓€涓€変腑鍏冪礌涓紝鏇挎崲鎺夊凡缁忓瓨鍦ㄧ殑浠讳綍鍐呭銆傚锛?
// 姣忛殧60绉掑姞杞藉苟鏄剧ず鏈€鏂扮殑鐘舵€佹姤鍛?
setInterval(function(){ $(鈥?status鈥?.load(鈥渟tatus_report.html鈥?;}, 60000);

load鏂规硶涓婇潰鎻愬埌杩囪窡ready()姣旇緝銆?strong>濡傛灉浼犵粰璇ユ柟娉曠殑绗竴涓弬鏁版槸鍑芥暟鑰屼笉鏄瓧绗︿覆锛屽垯load()鏂规硶鏄簨浠跺鐞嗙▼搴忔敞鍐屾柟娉曡€屼笉鏄疉jax鏂规硶銆?/strong>
濡傛灉鍙兂鏄剧ず琚姞杞芥枃妗g殑涓€閮ㄥ垎锛屽彲浠ュ湪url鍚庨潰娣诲姞绌烘牸(绌烘牸鏄繀椤荤殑)鍜屼竴涓猨query閫夋嫨鍣紝褰搖rl鍔犺浇瀹屾垚鍚庯紝jquery浼氱敤鎸囧畾鐨勯€夋嫨鍣ㄦ潵浠庡姞杞藉ソ鐨刪tml涓€夊彇闇€瑕佹樉绀虹殑閮ㄥ垎锛堟敞鎰忚繖涓€夋嫨鍣ㄦ槸浠庨渶瑕佽鍔犺浇url鐨勫唴瀹逛腑閫夊彇锛夈€傚锛?
// 鍔犺浇骞舵樉绀哄ぉ姘旈鍛婄殑娓╁害閮ㄥ垎
$(鈥?temp鈥?.load(鈥渨heather_report.html  #temperature鈥?;


闄や簡蹇呴』鐨剈rl鍙傛暟锛宭oad鏂规硶杩樻帴鏀朵袱涓彲閫夊弬鏁帮紝绗竴涓〃绀烘暟鎹紝鍙互杩藉姞鍒皍rl鍚庨潰锛屾垨鑰呬笌璇锋眰涓€璧峰彂閫併€傚鏋滀紶鍏ョ殑鏄瓧绗︿覆鍒欎細杩藉姞鍒皍rl鍚庨潰锛堟斁鍒扳€?鈥濇垨鈥?amp;鈥濆悗闈級锛屽鏋滀紶鍏ュ璞★紝璇ュ璞′細琚浆鍖栦负涓€涓敤鈥?amp;鈥濆垎闅旂殑鍚?鍊煎鍚庝笌璇锋眰涓€璧峰彂閫侊紙瀵硅薄杞寲涓哄瓧绗︿覆鐨勫叿浣撶粏鑺傚湪涓嬮潰鐨刯Query.getJSON()鏃朵細鎻忚堪锛夈€傞€氬父鎯呭喌涓嬶紝load()鏂规硶鍙戦€乭ttp get璇锋眰锛屼絾鏄鏋滀紶鍏ユ暟鎹璞★紝鍒欎細鍙戦€乸ost璇锋眰銆?

Load()鏂规硶鐨勫彟涓€涓彲閫夊弬鏁版槸涓€涓洖璋冨嚱鏁般€傚綋ajax璇锋眰鎴愬姛鎴栨湭鎴愬姛锛屼互鍙妘rl鍔犺浇瀹屾瘯骞舵彃鍏ラ€変腑鍏冪礌鏃讹紙濡傛灉璇锋眰鎴愬姛锛夛紝浼氳皟鐢ㄨ鍥炶皟鍑芥暟銆傚鏋滄病鏈夋寚瀹氫换浣曟暟鎹紝鍥炶皟鍑芥暟鍙互浣滀负绗簩鍙傛暟浼犲叆锛屽惁鍒欙紝蹇呴』鏄涓変釜鍙傛暟銆?

鍦╦query瀵硅薄鐨勬瘡涓€涓厓绱犱笂閮戒細璋冪敤鍥炶皟鍑芥暟锛屽苟涓旀瘡娆¤皟鐢ㄩ兘浼氫紶鍏ヤ笁涓弬鏁帮細娌″姞杞絬rl鐨勫畬鏁村唴瀹癸紝鐘舵€佺爜瀛楃涓诧紝浠ュ強鐢ㄦ潵鍔犺浇璇rl鐨刋MLHttpRequest瀵硅薄銆傚叾涓姸鎬佸弬鏁版槸jquery鐨勭姸鎬佺爜锛屼笉鏄痟ttp鐨勭姸鎬佺爜銆?

2. ajax宸ュ叿鍑芥暟
jquery鐨勫叾浠朼jax楂樼骇宸ュ叿涓嶆槸鏂规硶锛岃€屾槸鍑芥暟锛屽彲浠ラ€氳繃jquery鎴?鐩存帴璋冪敤锛岃€屼笉鏄湪jquery瀵硅薄涓婅皟鐢╦Qquery.getScript()鍔犺浇骞舵墽琛孞avaScript浠g爜鏂囦欢銆俲Query.getJSON()鍔犺浇url锛屽皢鍏惰В鏋愪负JSON锛屽苟灏嗙粨鏋滀紶閫掔粰鎸囧畾鐨勫洖璋冨嚱鏁般€傝繖涓や釜鍑芥暟閮戒細璋冪敤涓€涓洿閫氱敤鐨剈rl鑾峰彇鍑芥暟锛歫Query.get()銆傛渶鍚庯紝jQuery.post()鍜宩Query.get()寰堢被浼硷紝鍙槸鎵ц鐨勬槸http Post璇锋眰銆備笌load()鏂规硶涓€鏍凤紝鎵€鏈夎繖浜涘嚱鏁伴兘鏄紓姝ョ殑锛氬湪浠讳綍鏁版嵁鍔犺浇鍓嶄粬浠氨浼氳繑鍥炶皟鐢ㄨ€呭姞杞界粨鏋滃垯閫氳繃璋冪敤鎸囧畾鐨勫洖璋冨嚱鏁版潵閫氱煡銆?

1锛?jquery.getScript()
璇硶鏍煎紡锛?
$.getScript(url, [callback])

绗竴涓弬鏁版槸javascript浠g爜鏂囦欢鐨剈rl銆傚畠浼氬紓姝ュ姞杞芥枃浠讹紝鍔犺浇瀹屾垚鍚庡湪鍏ㄥ眬浣滅敤鍩熸墽琛岃浠g爜銆備粬鑳藉悓鏃堕€傜敤浜庡悓婧愬拰璺ㄦ簮鑴氭湰銆?
// 浠庡叾浠栨湇鍔″櫒鍔ㄦ€佸姞杞借剼鏈?
jQuery.getScript(鈥渉ttp://example.com/js/widget.js鈥?;
鍙互浼犲叆鍥炶皟鍑芥暟浣滀负绗簩涓弬鏁帮紝鍦ㄨ繖绉嶆儏鍐典笅锛宩Query浼氬湪浠g爜鍔犺浇鍜屾墽琛屽畬鎴愬悗璋冪敤涓€娆¤鍥炶皟鍑芥暟銆?

// 鍔犺浇涓€涓被搴擄紝骞跺湪鍔犺浇瀹屾垚鏃剁珛鍒讳娇鐢ㄥ畠
jQuery.getScript(鈥渏s/jquery.my_plugin.js鈥? function(){
    $(鈥榙iv鈥?.my_plugin();
});
jQuery.getScript()閫氬父浼氫娇鐢╔MLHttpRequest瀵硅薄鏉ヨ幏鍙栬鎵ц鐨勮剼鏈唴瀹广€備絾瀵逛簬璺ㄥ煙璇锋眰锛堣剼鏈瓨鏀惧湪涓庡綋鍓嶆枃妗d笉涓€鏍风殑鏈嶅姟鍣ㄤ笂锛夛紝jQuery浼氫娇鐢?lt;script>鍏冪礌鏉ュ姞杞借剼鏈€傚湪鍚屾簮鎯呭喌涓嬶紝鍥炶皟鍑芥暟鐨勭涓€涓弬鏁版槸鑴氭湰鐨勬枃鏈唴瀹癸紝绗簩涓弬鏁版槸鈥漵uccess鈥濈姸鎬佺爜锛岀涓変釜鍙傛暟鍒欐槸鐢ㄦ潵鑾峰彇鑴氭湰鍐呭鐨刋MLHttpRequest瀵硅薄銆傚湪鍚屾簮鎯呭喌涓嬶紝jQuery.getScript()鍑芥暟鐨勮繑鍥炲€间篃鏄XMLHttpRequest瀵硅薄锛岃法婧愯姹備笉瀛樺湪XMLHttpRequest瀵硅薄锛屽苟涓旇剼鏈殑鍐呭鑾峰彇涓嶅埌锛岃繖绉嶆儏鍐典笅锛屽洖璋冨嚱鏁扮殑绗竴涓拰绗笁涓弬鏁版槸undefined锛宩Query.getScript()鐨勮繑鍥炲€间篃鏄痷ndefined銆?

娉ㄦ剰锛?/strong>浼犻€掔粰jquery.getScript()鐨勫洖璋冨嚱鏁颁粎鍦ㄨ姹傛垚鍔熷畬鎴愭椂鎵嶄細琚皟鐢ㄣ€傚鏋滈渶瑕佸湪鍙戠敓閿欒浠ュ強鎴愬姛鏃堕兘寰楀埌閫氱煡锛屽垯闇€瑕佷娇鐢ㄥ簳灞傜殑jquery.ajax()鍑芥暟銆傚叾浠栦笁涓伐鍏峰嚱鏁颁篃鏄姝ゃ€?
2锛?jQuery.getJSON()
getJSON()涓巊etScript()绫讳技锛屽畠浼氳幏鍙栨枃鏈紝鐒跺悗澶勭悊涓€涓嬪啀璋冪敤鍥炶皟鍑芥暟锛屽尯鍒槸jQuery.getJSON()鑾峰彇鍒版枃鏈悗涓嶄細灏嗗叾褰撳仛鑴氭湰鎵ц锛岃€屼細灏嗗叾瑙f瀽涓篔SON(浣跨敤jQuery.parseJSON()鍑芥暟).
璇硶鏍煎紡锛?
$.getJSON(url, [data], [callback])

getJSON()鍙湁鍦ㄤ紶鍏ヤ簡鍥炶皟鍙傛暟鏃舵墠鏈夌敤锛屽綋鎴愬姛鍔犺浇url浠ュ強灏嗗唴瀹规垚鍔熻В鏋愪负JSON鍚庯紝瑙f瀽缁撴灉浼氫綔涓虹涓€涓弬鏁颁紶鍏ュ洖璋冨嚱鏁颁腑銆備笌jQuery.getScript()涓€鏍凤紝鍥炶皟鍑芥暟鐨勭浜屼釜鍜岀涓変釜鍙傛暟鏄€渟uccess鈥濈姸鎬佺爜鍜孹MLHttpRequest瀵硅薄銆?
涓巎Query.getScript()涓嶅悓锛宩Query.getJSON()鎺ュ彈涓€涓彲閫夌殑鏁版嵁瀵硅薄鍙傛暟锛屽氨鍜屼紶鍏oad()鏂规硶涓€鏍枫€傚鏋滀紶鍏ユ暟鎹埌jQuery.getJSON()涓紝璇ユ暟鎹繀椤绘槸绗簩涓弬鏁帮紝鍥炶皟鍑芥暟鏄涓変釜銆傚鏋滀笉浼犲叆浠讳綍鏁版嵁锛屽垯鍥炶皟鍑芥暟鏄浜屼釜鍙傛暟銆傚鏋滄暟鎹椂瀛楃涓诧紝鍒欎粬浼氳娣诲姞鍒皍rl鐨勨€?鈥濇垨鈥?amp;鈥濆悗闈€傚鏋滄暟鎹槸涓€涓璞★紝鍒欏畠杞寲涓哄瓧绗︿覆锛岀劧鍚庢坊鍔犲埌url涓娿€?

濡傛灉浼犻€掔粰jQuery.getJSON()鐨?strong>url鎴栨暟鎹瓧绗︿覆鍦ㄦ湯灏炬垨鈥?amp;鈥濆瓧绗﹀墠鍚湁鈥?锛熲€濆瓧绗︿覆锛屽垯琛ㄦ槑杩欐槸涓€涓?span style="color: red;">JSONP璇锋眰
銆俲Query浼氬垱寤轰竴涓洖璋冨嚱鏁帮紝骞剁敤璇ュ洖璋冨嚱鏁扮殑鍑芥暟鍚嶆浛鎹㈡帀鈥??鈥濆悗闈㈢殑鈥?鈥濄€傛帴鐫€jquery.getJSON()鐨勮涓哄氨浼氭兂璇锋眰鑴氭湰鏂囦欢涓€鏍凤紝鑰屼笉鏄疛SON瀵硅薄銆傜敱浜嶫SONP琚綋鍋氳剼鏈潵澶勭悊锛屽洜姝よ繖鎰忓懗鐫€JSON鏍煎紡鐨勬暟鎹彲浠ヨ法鍩熻姹傘€?


3锛?jQuery.get()鍜宩Query.post()
璇硶鏍煎紡锛?
$.get(url, [data], [callback], [type])

jQuery.get()鍜宩Query.post()鑾峰彇鎸囧畾url鐨勫唴瀹癸紝濡傛灉鏈夋暟鎹殑璇濓紝杩樺彲浠ヤ紶鍏ユ寚瀹氭暟鎹紝鏈€鍚庡垯灏嗙粨鏋滀紶閫掔粰鎸囧畾鐨勫洖璋冨嚱鏁般€俲Query.get()浣跨敤http get璇锋眰瀹炵幇锛宩Query.post()浣跨敤http post璇锋眰锛屽叾浠栦袱鑰呴兘涓€鏍枫€?
涓巎Query.getJSON()涓€鏍凤紝杩欎袱涓柟娉曚篃鎺ュ彈鐩稿悓鐨勪笁涓弬鏁帮紝蹇呴』鐨剈rl锛屽彲閫夌殑鏁版嵁瀛楃涓叉垨瀵硅薄锛屼互鍙婁竴涓妧鏈笂鍙€変絾瀹為檯鎬讳細浣跨敤鐨勫洖璋冨嚱鏁般€傝皟鐢ㄧ殑鍥炶皟鍑芥暟浼氳浼犲叆涓変釜鍙傛暟锛氱涓€涓弬鏁版槸杩斿洖鐨勬暟鎹紝绗簩涓弬鏁版槸鈥渟uccess鈥濆瓧绗︿覆锛岀涓変釜鍒欐槸XMLHttpRequest瀵硅薄锛堝鏋滄湁鐨勮瘽锛夛細
jQuery.get(鈥渄ebug.txt鈥? alert);

闄や簡涓婇潰鎻忚堪鐨勪笁涓弬鏁帮紝杩樻湁涓や釜鏂规硶鎺ュ彈鍙€夌殑绗洓涓弬鏁帮紝璇ュ弬鏁版寚瀹氳璇锋眰鏁版嵁鐨勭被鍨嬨€傜鍥涗釜鍙傛暟浼氬奖鍝嶅湪浼犲叆鍥炶皟鍑芥暟鍓嶆暟鎹殑澶勭悊銆侺oad()鏂规硶鏄敤鈥漢tml鈥濈被鍨嬨€俲Query.getScript鏄敤鈥渟cript鈥濈被鍨嬶紝jQuery.getJSON()鍒欎娇鐢ㄢ€渏son鈥濈被鍨嬨€備笌涓婇潰杩欎簺涓撶敤鍑芥暟鐩告瘮锛宩query.get()鍜宩query.post()鏇寸伒娲伙紝鍙互鎸囧畾浣跨敤鐨勭被鍨嬶紝鏈夊叚绉嶇被鍨嬪彲閫夈€?




濡傛灉璋冪敤jquery.get(),jquery.post()鎴杍query.ajax()鍑芥暟鏃舵病鏈夋寚瀹氫互涓婄被鍨嬩腑鐨勪换浣曚竴涓紝jquery浼氭鏌ttp鍝嶅簲涓殑Content-Type澶淬€傚鏋滃ご閮ㄤ俊鎭寘鍚€渪ml鈥濆瓧绗︿覆锛屽垯浼犲叆鍥炶皟鍑芥暟涓殑鏄痻ml鏂囨。锛涘鏋滃寘鍚€渏son鈥濆瓧绗︿覆锛屽垯鏁版嵁琚В鏋愭垚JSON骞舵妸瑙f瀽鍚庣殑瀵硅薄浼犵粰鍥炶皟鍑芥暟锛涘鏋滃寘鍚€渏avascript鈥濆瓧绗︿覆锛屽垯鏁版嵁琚綋鍋氳剼鏈墽琛屻€傚鏋滀互涓婇兘涓嶇鍚堬紝鍒欐暟鎹細琚綋鍋氱函鏂囨湰澶勭悊銆?


4锛?jquery.ajax()鍑芥暟
jquery鎵€鏈堿jax宸ュ叿鏈€鍚庨兘浼氳皟鐢╦Query.ajax()銆傛鍑芥暟鍙帴鍙椾竴涓弬鏁帮細涓€涓€夐」瀵硅薄锛岃瀵硅薄鐨勫睘鎬ф寚瀹歛jax璇锋眰濡備綍鎵ц銆傚jQuery.getScript(url, callback)涓庝互涓媕Query.ajax()鐨勮皟鐢ㄧ瓑浠凤細
jQuery.ajax({
  type:鈥滸ET鈥?  // http璇锋眰鏂规硶
  url:url,  // 瑕佽幏鍙栨暟鎹殑url
  data:null,  // 涓嶇粰url娣诲姞浠讳綍鏁版嵁
  dataType:鈥漵cript鈥?  // 涓€鏃﹁幏鍙栨暟鎹紝绔嬪埢褰撳仛鑴氭湰鎵ц
  success:callback // 瀹屾垚鍚庤皟鐢ㄨ鍑芥暟
});
上一篇:上一篇
下一篇:下一篇

 

随机推荐程序问答结果

 

 

如对文章有任何疑问请提交到问题反馈,或者您对内容不满意,请您反馈给我们DOC100.NET论坛发贴求解。
DOC100.NET资源网,机器学习分类整理更新日期::2014-01-05 01:53:48
如需转载,请注明文章出处和来源网址:http://www.doc100.net/bugs/t/2711/
本文WWW.DOC100.NET DOC100.NET版权所有。