小白教程
所有教程
关于
Search
172.69.59.25
172.69.59.25
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“JQuery JSONP”的源代码
本页内容
上一节:
JQuery_noConflict()_方法
下一节:
JQuery_实例
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:jQuery JSONP}}[[Category:jQuery 教程|30]] = JSONP 教程 = 本章节我们将向大家介绍 JSONP 的知识。 Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据。 为什么我们从不同的域(网站)访问数据需要一个特殊的技术( JSONP )呢?这是因为同源策略。 同源策略,它是由 Netscape 提出的一个著名的安全策略,现在所有支持 JavaScript 的浏览器都会使用这个策略。 == JSONP 应用 == === 1. 服务端 JSONP 格式数据 === 如客户想访问 : '''https://www.xiaobai.wang/try/ajax/jsonp.php?jsoncallback=callbackFunction'''。 假设客户期望返回数据:["customername1","customername2"]。 真正返回到客户端的数据显示为: callbackFunction(["customername1","customername2"])。 服务端文件 jsonp.php 代码为: == jsonp.php 文件代码 == <sample title="" desc="" lang="html" hererun="1"> <?php header('Content-type: application/json'); //获取回调函数名 $jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']); //json数据 $json_data = '["customername1","customername2"]'; //输出jsonp格式的数据 echo $jsoncallback . "(" . $json_data . ")"; ?> </sample> === 2. 客户端实现 callbackFunction 函数 === <sample title="" desc="" lang="html" hererun="1"> <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> </sample> === 页面展示 === <sample title="" desc="" lang="html" hererun="1"> <div id="divCustomers"></div> </sample> === 客户端页面完整代码 === <sample title="" desc="" lang="html" hererun="1"> <!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="https://www.xiaobai.wang/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script> </body> </html> </sample> == jQuery 使用 JSONP == 以上代码可以使用 jQuery 代码实例: <sample title="" desc="" lang="html" hererun="1"> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JSONP 实例</title> <script src="https://cdn.static.xiaobai.wang/libs/jquery/1.8.3/jquery.js"></script> </head> <body> <div id="divCustomers"></div> <script> $.getJSON("https://www.xiaobai.wang/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> </sample>
返回至“
JQuery JSONP
”。
上一节:
JQuery_noConflict()_方法
下一节:
JQuery_实例