jsonp 原理和基本使用

Posted 2021-03-24 沁园芬芳

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jsonp 原理和基本使用相关的知识，希望对你有一定的参考价值。

该日记的使用教程方法为:

1:将html文件复制

2:在express官网上下载一个服务来响应请求的地址的,详情请看下面]

3:打开服务器的命令指令为:nodemon start

第一步:先写好基本的html文件,如下图所示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsop原理</title>
    <script src="https://cdn.bootcss.com/jquery/2.0.1/jquery.js"></script>
</head>
<body>
<button id="btn">点击获取资源</button>

</body>
<script>
    $("#btn").click(function () {
        var sc=document.createElement(\'script\');
        var url=\'http//localhost:3001/users\';
        sc.src=url;
        document.head.appendChild( sc );
        
    })
</script>
</html>

服务端的user.js的代码如下:

var express = require(\'express\');
var router = express.Router();

/* GET users listing. */
router.get(\'/\', function(req, res, next) {
  var container=req.query;
  console.log(container)
  var box=req.query.container
  console.log(box)
  var fn=box + \'("l am  from  server")\';
  res.send(fn);
  console.log(fn)

});

module.exports = router;

当在浏览器打开该文件的时候会出现找不到该网络的请求,和增加多了script标签,如下图所示: