jsonp应用

2024-05-10 22:18

文章标签 应用 jsonp

本文主要是介绍jsonp应用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

服务器端数据源：

<?php

header('Content-type: application/json');//获取回调函数名

$jsoncallback= htmlspecialchars($_REQUEST['jsoncallback']);//json数据

$json_data= '["customername1","customername2"]';//输出jsonp格式的数据

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

<!DOCTYPE html>

<html>

<head>
<title>JSONP 实例</title>
<script src="jquery-1.7.2.min.js"></script>
<script>
$(function(){
   $.getJSON("http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?",function(data){ //?jsoncallback=?这里如果没有的话，运行成功，但是会提示“已阻止跨源请求：同源策略禁止读取位于 http://www.runoob.com/try/ajax/jsonp.php 的远程资源。（原因：CORS 头缺少 'Access-Control-Allow-Origin'）。Line 0”这个错误。
       var html = '<ul>';
       for(var i = 0; i < data.length; i++)
       {
           html += '<li>' + data[i] + '</li>';
       }
       html += '</ul>';
       $("#divCustomers").html(html);
   });
});

</script>
</head>
<body>
<div id="divCustomers"></div>
</body>

</html>

或者是

<div id="divCustomers"></div> //必须放在js代码前面，否则找不到这个控件

//放在head中的JS代码会在页面加载完成之前就读取，而放在body中的JS代码，会在整个页面加载完成之后读取
<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>