jQuery Ajax跨域调用
今天来给大家展示一下如何利用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";