跨域问题之jsonp的实现

前端之家收集整理的这篇文章主要介绍了跨域问题之jsonp的实现前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

jsonp是一种json数据的使用方式,可以实现不同域名之间的请求和发送数据。

客户端实现方式:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <Meta charset="UTF-8">
  5. <title>Document</title>
  6. <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
  7. <script type="text/javascript"> var flightHandler = function(data){ alert(data); } var url = "http://119.29.176.18/jsonp.PHP?jsoncallback=flightHandler"; // 创建script标签,设置其属性 var script = document.createElement('script'); script.setAttribute('src',url); // 把script标签加入head,此时调用开始 document.getElementsByTagName('head')[0].appendChild(script); </script>
  8. </head>
  9. <body>
  10.  
  11. </body>
  12. </html>

服务器端实现方式:

  1. <?PHP header('Content-type: application/json'); //获取回调函数 $jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']); //json数据 $json_data = '["customername1","customername2"]'; //输出jsonp格式的数据 echo $jsoncallback . "(" . $json_data . ")"; ?>

jquery实现客户端:

  1. jQuery(document).ready(function(){
  2. $.ajax({
  3. type: "get",async: true,url: "http://119.29.176.18/jsonp.PHP",dataType: "jsonp",jsonp: "jsoncallback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
  4. success: function(json){
  5. alert(json);
  6. },error: function(){
  7. alert('fail');
  8. }
  9. });
  10. });

不正确之处还望指正。

猜你在找的Json相关文章