js-JSONP

最新推荐文章于 2024-03-09 18:24:48 发布

莫兮是我

最新推荐文章于 2024-03-09 18:24:48 发布

阅读量197

点赞数

分类专栏：前端 JS WEB 文章标签： ajax json js

本文链接：https://blog.csdn.net/u013362192/article/details/114994732

版权

前端同时被 3 个专栏收录

67 篇文章 0 订阅

订阅专栏

59 篇文章 0 订阅

订阅专栏

WEB

50 篇文章 1 订阅

订阅专栏

js-JSONP 目录

文章目录

前言
代码展示

前言

JSONP是JSON with Padding的简写，在web服务上流行的一种JSON变体
包在一个函数调用里
格式：回调和数据
回调：页面接收到响应后调用的函数，动态指定
数据：参数传递给回调函数的JSON数据

http://xxx/?callback=handleResponse

动态创建<script>，并指定跨域url实现

代码展示

`main.js`

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;
}

`jsonp.php`

<?php
header('Content-type: application/json');
//获取回调函数名
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
//json数据
$json_data = '["customername1","customername2"]';
//输出jsonp格式的数据
echo $jsoncallback . "(" . $json_data . ")";
?>

客户端完整页面代码

<!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.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script>
</body>
</html>

莫兮是我

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js-JSONP

js-JSONP 目录文章目录前言代码展示`main.js``jsonp.php`客户端完整页面代码前言JSONP是JSON with Padding的简写，在web服务上流行的一种JSON变体包在一个函数调用里格式：回调和数据回调：页面接收到响应后调用的函数，动态指定数据：参数传递给回调函数的JSON数据http://xxx/?callback=handleResponse动态创建<script>，并指定跨域url实现代码展示main.jsfunction c
复制链接

扫一扫