JavaScript教程:jQuery Ajax跨域调用
来源:学生作业帮助网 编辑:作业帮 时间:2024/05/13 00:47:46 Javascript
今天来给大家展示一下如何利用jquery进行ajax的跨域调用。文中只给出了两个方法,其实解决ajax的跨域调用问题还有其他方法的,但是我没有研究,所以也就不多说了,主要跟大家说说利用jquery的方法进行ajax跨域调用。
这里我们需要用到JQuery.getScript(url, callback)方法,url是脚本文件的URL路径,callback函数在脚本资源已被加载和求值后调用的回调函数。
文中最后会给大家提供一个演示实例下载文件,下载之后直接在浏览器中运行就可以了。
下面来具体看看如何利用jQuery.getScript()方法进行ajax跨域调用的。在演示DEMO中,我用到了Jquery/Ajax/JSON/PHP操作完全实例
中的php文件。
先来看看HTML代码:
01
02
id="letter2">03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
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
10
11 ");
12 $.getScript("http://www.skygq/ci/jquery_ajax_json_php/search_server_2.html?letter="+$$.val(),function(){
13 if (json.length > 0){
14 var result = "";
15 $.each(json,function(index,entry){
16 result += "
17
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";
Javascript