ajax跨域请求示例及注意事项

[HtmlCssJs] 2024-03-29 圈点467

摘要:ajax跨域请求是指其请求诉网圵不是本地的。比如跨域的请求“http://www.xoxxoo.com/index.php”,而本地的一般是相对或者是绝对路径文件如“index.php”“/index.php”。ajax跨域的情况相对比较复杂,需要特定的方式方法来进行跨域请求。如下的ajax跨域请求的示例。

ajax跨域请求是指其请求诉网圵不是本地的。比如跨域的请求“http://www.xoxxoo.com/index.php”,而本地的一般是相对或者是绝对路径文件如“index.php”“/index.php”。


ajax跨域的情况相对比较复杂,需要特定的方式方法来进行跨域请求。如下的ajax跨域请求的示例。


前端请求文件需要包含jquery,和js的文件内容如下:


<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script>

$(document).ready(function(){

$('#start').click(function(){

longurl = $("input[id='longurl']").val();

$.ajax({

type :"get",

async:false,

url  :"http://127.0.0.1/ajax.php",

data :{id: longurl},

dataType: "jsonp",

jsonp:"callbackfun",//传递给处理页面的jsonp的参数名称,也就是变量名(默认为:callback)

jsonpCallback:"jsonpCallback",//传递给处理页面的jsonp的参数的值。这里将调用回调函数jsonpCallback,同时与success/error同时生效。

//将生成如:http://127.0.0.1/dwn.php?callbackfun=jsonpCallback&id=dd&_=1489936482135 的get请求。

success: function(a) {

alert(a.a);

return false;

},

error: function(a) {

alert(a.b);

return false;

//alert("失败!!");

}

});

});

});


function jsonpCallback(data) //回调函数

{

    //alert(data.a);

}

</script>


ajax请求页面的ajax.php文件内容如:

<?php

$callbackfun = $_GET["callbackfun"];

$id = $_GET["id"];

echo $callbackfun."({a:'$id',b:90})";

?>



这样即可正常的进行ajax跨域进行请求了。

ajax  跨域  

感谢反馈,已提交成功,审核后即会显示