jQuery Ajax跨域调用

网络整理 - 07-26

今天来给大家展示一下如何利用jquery进行的跨域调用。文中只给出了两个方法,其实解决ajax的跨域调用问题还有其他方法的,但是我没有研究,所以也就不多说了,主要跟大家说说利用jquery的方法进行ajax跨域调用。

这里我们需要用到JQuery.getScript(url, callback)方法,url是脚本文件的URL路径,callback函数在脚本资源已被加载和求值后调用的回调函数。
文中最后会给大家提供一个演示实例下载文件,下载之后直接在浏览器中运行就可以了。

下面来具体看看如何利用jQuery.getScript()方法进行ajax跨域调用的。在演示DEMO中,我用到了Jquery/Ajax/ON/PHP操作完全实例
中的php文件。

先来看看HTML代码:


01 <img id="ajax_image" src="/css/img/ajax_image.gif" style="position:absolute;z-index:10;display:none;" border="0"/> 

02 <select id="letter2"> 

03     <option value="">请选择首字母</option> 

04     <option value="A">A</option> 

05     <option value="B">B</option> 

06     <option value="C">C</option> 

07     <option value="D">D</option> 

08     <option value="E">E</option> 

09     <option value="F">F</option> 

10     <option value="G">G</option> 

11     <option value="H">H</option> 

12     <option value="I">I</option> 

13     <option value="J">J</option> 

14     <option value="K">K</option> 

15     <option value="L">L</option> 

16     <option value="M">M</option> 

17     <option value="N">N</option> 

18     <option value="X">X</option> 

19 </select> 

20 <select id="server2"> 

21     <option value="">等待你选择首字母</option> 

22 </select>
Jquery代码:


01 $(function(){ 

02     $("#letter2").change(function(e){ 

03         var $$ = $(this); 

04         if ($$.val() != ''){ 

05             var $ajax_image = $("#ajax_image"); 

06             var position = $$.offset(); 

07             $ajax_image.css({"top":position.top,"left":position.left}).show(); 

08             $("#server2").empty().append(" 

09 <OPTION value="">正在调用数据...</OPTION> 

10   

11 "); 

12             $.getScript("?letter="+$$.val(),function(){ 

13                 if (json.length > 0){ 

14                     var result = ""; 

15                     $.each(json,function(index,entry){ 

16                         result += " 

17 <OPTION value='"+entry.id+"'>"+entry.name+"</OPTION> 

18   

19 "; 

20                     }); 

21                     $("#server2").empty().append(result); 

22                 }else{ 

23                     alert("未找到数据!"); 

24                 } 

25                 $ajax_image.hide(); 

26             }) 

27         } 

28     }) 

29 });
最后再来看看php代码:(PS:php我用的是CI框架)

view sourceprint?
01 //取得参数 

02 $letter = $this->input->get('letter'); 

03 //查询数据 

04 $server_list = $this->db->from('wow_server')->like('name',$letter,'after')->get(); 

05 $return_result = array(); 

06 if ($server_list->num_rows() > 0){ 

07     foreach($server_list->result() as $server_obj){ 

08         $return_result[] = array( 

09                      'id'   => $server_obj->id, 

10             'name'  => $server_obj->name 

11         ); 

12     } 

13 } 

14 sleep(1); 

15 $json_result = json_encode($return_result); 

16 echo "var json = $json_result";