【JSONP】php和jsonp
JSONP
JSON with padding 是json的一种“使用模式”，可以解决跨域问题。
主要还是利用<scrip></scrip>标签可以不受跨域限制的特性。
1. 客户端(HTML)
写一个index.html文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
<span>客户列表</span>
<div id="customers_list"></div>
</div>
<script type="text/javascript"> function callbackFunction(result, methodName) { var html = '<ul>'; for (let i = 0; i < result.length; i++) { html += "<li>" + result[i] + "</li>"; } html += "</ul>"; document.getElementById("customers_list").innerHTML = html; } </script>
<script type="text/javascript" src="http://localhost/myApplication/demo.php?jsoncallback=callbackFunction"></script>
</body>
</html>
2. 服务端(PHP)
写一个php文件，叫demo.php，放在XAMPP的htdocs文件下，启动Apache，就可以访问http://localhost/myApplication/demo.php
<?php
header('Content-type: application/json');
//获取回调函数名
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
//json数据
$json_data = '["朱鹏基","杜勇","吉启乾"]';
//输出jsonp格式的数据
echo $jsoncallback . "(" . $json_data . ")";
?>
3. 客户端访问
如果Apache服务运行成功，用浏览器打开index.html，应该可以看到界面。
4. 动态加载script
主要是将原先写死的script标签改成动态添加标签
<script type="text/javascript" src="http://localhost/myApplication/demo.php?jsoncallback=callbackFunction"> </script>
<!-- 改成如下形式 -->
<script> // 动态获取 function getCustomers() { var s = document.createElement("script"); s.type = "text/javascript"; s.src = "http://localhost/myApplication/demo.php?jsoncallback=callbackFunction"; document.body.appendChild(s); } </script>
5. 后记
前端先写好回调函数，将函数名通过查询字符串传送给后端，后端返回的不直接是我们需要的数据，而是一个【回调函数调用数据，形如callback(result);】的字符串。最后相当于前端eval了script标签获取的字符串，也就是执行了callback(result);
深信服一面223人在聊
查看8道真题和解析
投递奥马冰箱等公司10个岗位 >