jsonp的实现

最新推荐文章于 2023-11-03 23:47:38 发布

Merlin~

最新推荐文章于 2023-11-03 23:47:38 发布

阅读量545

点赞数 1

分类专栏： js 文章标签： jsonp js

本文链接：https://blog.csdn.net/qq_25804071/article/details/70306434

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

jsonp实现

客户端

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsonp测试</title>
</head>
<body id="body">
<script>
    function get() {
        alert('开始调用');
        var theJ = document.createElement('script');
        theJ.setAttribute('src', 'http://tp5/index/index/index/?f=jsonP&name=jijuxie');
        var body = document.querySelector('#body');
        body.appendChild(theJ);
    }
    setTimeout(function () {
        get();
    }, 1000);
</script>
</body>
</html>

服务端

这里使用的是tp5框架

tp5/application/index/controller/index.php

<?php
namespace app\index\controller;

use think\Request;

class Index
{
    public function index()
    {
        $request = Request::instance();
        $theF = $request->param('f');//读取get参数
        $theName = $request->param('name');
        if ($request->isGet()&&!empty($theF)) {
            $return = ['code' => 0, 'message' => 'jsonp通信成功', 'data' => ['name' => $theName]];
            $return = $theF . "(" . json_encode($return) . ")";//拼接字符串成执行方法的样子
        } else {
            //这个地方可以返回一般json的模式，使这个接口通用jsonp和ajax和一般接口
//            $return = ['code' => 0, 'message' => 'ajax/api通信成功',  'data' => ['name' => $theName]];
            $return = ['code' => 1, 'message' => '使用了非jsonP', 'data' => []];
        }
        header('Content-Type: application/json; charset=utf-8');
        return $return;
    }
}

Merlin~

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jsonp的实现

jsonp实现客户端index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jsonp测试</title></head><body id="body"><script> function get() { alert('开始调用'); v
复制链接

扫一扫