您的位置：首页 > Web前端 > JavaScript

jsonp应用

2015-10-15 10:48 567 查看

服务器端数据源：

<?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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航