jsonp应用

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函数

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应用

最新文章

热门文章