jsonp异步加载，调用

最新推荐文章于 2023-10-06 10:39:07 发布

ヽ错落不堪的年华。

最新推荐文章于 2023-10-06 10:39:07 发布

阅读量422

点赞数

CC 4.0 BY-SA版权

分类专栏：技术交流前端技术总结文章标签： json 异域调用前端封装函数服务端

本文链接：https://blog.youkuaiyun.com/qq_44777678/article/details/90758019

技术交流同时被 3 个专栏收录

107 篇文章

订阅专栏

技术总结

103 篇文章

订阅专栏

前端

97 篇文章

订阅专栏

客户端

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JSONP 客户端</title>
</head>
<body>
  <script>
    function jsonp (url, params, callback) {
      
      var funcName = 'jsonp_' + Date.now() + Math.random().toString().substr(2, 5)

      if (typeof params === 'object') {
        var tempArr = []
        for (var key in params) {
          var value = params[key]
          tempArr.push(key + '=' + value)
        }
        params = tempArr.join('&')
      }

      var script = document.createElement('script')
      script.src = url + '?' + params + '&callback=' + funcName
      document.body.appendChild(script)

      window[funcName] = function (data) {
        callback(data)

        delete window[funcName]
        document.body.removeChild(script)
      }
    }
    // uil:网址
    // params：键值对或对象
    // callback：回调函数

    // 调用Api演示
    jsonp('http://zhang.com/jsonp/server.php', {id:1}, function (res) {
      console.log(res)
    })
  </script>
</body>
</html>

php服务端

<?php
// 服务端
$conn = mysqli_connect('localhost', '用户名', '密码', '数据库名');

// 判断数据库连接是否成功
if(!$conn ){
  exit('数据库连接失败');
}

//查询数据
$query = mysqli_query($conn, 'select * from users');

if(!$query ){
  exit('查询数据失败');
}

// 循环把数据传给新的载体
while ($row = mysqli_fetch_assoc($query)) {
  $data[] = $row;
}

// 判断客户端采用的是 GET 请求
if (empty($_GET['callback'])) {
  header('Content-Type: application/json');
  echo json_encode($data);
  exit();
}

// 如果客户端采用的是 script 标记对我发送的请求
// 一定要返回一段 JavaScript
header('Content-Type: application/javascript');
$result = json_encode($data);

$callback_name = $_GET['callback'];

echo "typeof {$callback_name} === 'function' && {$callback_name}({$result})";