十分钟搭建node服务器创建jsonp接口_怎么用服务器搭建接口-优快云博客

本文链接：https://blog.youkuaiyun.com/CS_DGD/article/details/105419454

ajax通过jsonp实现跨域现在变得尤为常见，如何搭建一个node服务器并创建一个jsonp接口呢？

搭建node服务器

注意点：这里的前端页面为了测试方便放在了static内，在正式开发时需要放在views内部

const Koa = require("koa");
const static = require("koa-static");
const Router = require("koa-router");

let app = new Koa();
let router = new Router();

app.use(static(__dirname+"/static"));

router.get("/",ctx=>{
    ctx.body= "hello world"
});

app.use(router.routes());
app.listen(3000)

前端创建jsonp接口

注意点：

切记先引入jsonp.js文件
接口是百度接口用来做测试，正式开发时问后端要接口

<body>
    <h1>百度搜索</h1>
    <input type="text" class="myInput">
    <div class="exchange"></div>
    <script src="jsonp.js"></script>
    <script>
        document.querySelector(".myInput").onblur = function(){
            
            ajax({
                // 引入数据接口，这里为百度接口用来做测试，正式开发时问后端要接口
                url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
                // 声明数据类型
                dataType:"jsonp",
                // 传入参数
                data:{
                    wd:this.value
                },
                // 上述代码请求成功后执行的函数
                success:function(res){
                    // 把服务器端反应过来的数据，以参数的形式接收到
                    console.log(res);
                    // 接收数据
                    let data = res.s;
					
					// ES5拼接下变为ES6 两种都可以，具体看自己需求
                    // let html = "<ul>";
                    // data.forEach(v => {
                    //     html += "<li>" + v + "</li>"
                    // });
                    // html += "</ul>";

                    // 遍历数据并把它赋值到页面
                    let html = "<ul>";
                    data.forEach(v => {
                        html += `<li>${v}</li>`
                    });
                    html += "</ul>";

                    document.querySelector(".exchange").innerHTML = html;
                }
            })
        }
    </script>
</body>