rest接口如何适应jsonp的方案

我的要做的事很简单，在html中，跨域调用一个rest接口，
后端接口实现使用Node（语言无关），rest接口都是返回json数据的，如果不在页面上进行任何处理，是不可以在页面是使用的。
直接给出方案，前端使用jquery，只需要将dataType改成jsonp，
其他的就和普通的axaj无差别了。前端代码如下：

let url = "http://localhost:8888/dish/jsonp";

    $.ajax({
        type: "get",
        async: false,
        url: url,
        dataType: "jsonp",
        jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
        success: function (json) {
            console.log(json);
        },
        error: function () {
            console.log('fail');
        }
    });

如果这时候后端不做改变，直接返回JSON数据，控制台要报错的，因为那样的话后端并没有返回调用函数。

// dish RESTful CURD操作
//普通rest
router.get('/dish', function (req, res) {
    log.d('controller', '/dish', '');
    dishDAO.list(function (result) {
        res.send(result);
    });
});
//适应jsonp的接口
router.get('/dish/jsonp', function (req, res) {
    //获取函数名
    let callback = req.query.callback;
    dishDAO.list(function (result) {
        let json = JSON.stringify(result);
        //模拟函数调用
        let fn = callback+"("+json+")";
        res.send(fn);
    });
});

调用成功：
在这里插入图片描述

做任何项目，从维护的角度，都是代码越少越好，能把代码写出来的从来不是高手，这是作为一个coder的基础，把代码写少的能力，需要大量的时间来积累经验。
合二为一

// dish RESTful CURD操作
router.get('/dish', function (req, res) {
    log.d('controller', '/dish', '');
    let callback = req.query.callback;
    //有回调表示jsonp
    if(callback){
        dishDAO.list(function (result) {
            let json = JSON.stringify(result);
            //模拟函数调用
            let fn = callback+"("+json+")";
            res.send(fn);
        });
    }else{
        dishDAO.list(function (result) {
            res.send(result);
        });
    }
});

到这里，一个jsonp的rest接口改造就完成了，主要是对jsonp 原理的理解，本来实现跨域请求的方式就是通过script 的src属性来完成的，白话讲就是两个js脚本文件，一个里面写了接口调用返回值处理函数fn，另一个直接使用从服务器发一个函数调用过来，fn（data）,data就是调用接口的返回值。然后jQuery的作用就是添加第二个调用script标签，并在success中执行后续逻辑处理。

rest接口如何适应jsonp的方案

rest接口如何适应jsonp的方案

猜你喜欢