码迷,mamicode.com
首页 > Web开发 > 详细

jsonp应用

时间:2017-02-19 10:49:05      阅读:194      评论:0      收藏:0      [点我收藏+]

标签:call   ati   charset   res   返回   com   run   jsonp   eth   

1.服务端jsonp格式数据

如客户想访问 : http://www.runoob.com/try/ajax/jsonp.php?jsonp=callbackFunction。

假设客户期望返回JSON数据:["customername1","customername2"]。

真正返回到客户端的数据显示为: callbackFunction(["customername1","customername2"])。

服务端文件jsonp.php代码为:

<?php

header(‘Content-type:application/json‘);

//获取回调函数名

$jsoncallback = htmlspecialchars($_REQUEST[‘jsoncallback‘]);

//json数据

$json_data=‘["customername1","customername2"]‘;

//输出jsonp格式的数据

echo $jsoncallback . "(" . $json_data .")";

?>

2.客户端实现callbackFunction函数

<script type="text/javascript">

function callbackFunction(result,methodName)

{

 var html=‘<ul>‘;

  for(var i =0;i<result.length;i++){

    html+=‘<li>‘+result[i]+‘</li>‘;

}

  html+=‘</ul>‘;

  document.getElementById(‘divCustomers‘).innerHTML=html;

}

</script>

 

客户端实现的完整代码

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JSONP 实例</title> </head> <body> <div id="divCustomers"></div> <script type="text/javascript">
function callbackFunction(result, methodName) {
var html = <ul>;
for(var i = 0; i < result.length; i++) {
html += <li> + result[i] + </li>;
}
html += </ul>;
  document.getElementById(divCustomers).innerHTML = html;
}
</script> <script type="text/javascript" src="http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script> </body> </html>
以上代码可以用jquery实现
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JSONP 实例</title> <script src="http://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script> </head> <body> <div id="divCustomers"></div> <script>
$.getJSON("http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) { var html = <ul>; for(var i = 0; i < data.length; i++) { html += <li> + data[i] + </li>; } html += </ul>; $(#divCustomers).html(html); });
</script> </body> </html>

 

jsonp应用

标签:call   ati   charset   res   返回   com   run   jsonp   eth   

原文地址:http://www.cnblogs.com/maggie-pan/p/6414755.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!