猿问

关于使用jsonp调用天气之类api的问题

比如我有一个天气预报的api,返回的值是

{
    "HeWeather5": [
        {
            "basic": {
                "city": "北京",
                "cnty": "中国",
                "id": "CN101010100",
                "lat": "39.90498734",
                "lon": "116.40528870",
                "update": {
                    "loc": "2017-08-03 17:50",
                    "utc": "2017-08-03 09:50"
                }
        }
========================================

这样没有callback的回调值,如果不使用jquery库而只使用js原生来实现jsonp的话,我无法回调函数,而且会出现SyntaxError: Unexpected token 错误。表明这个js文件的json写法有误。

但是我如果使用jquery的$.ajax来实现则不需要去设置回调函数名和jsonp是否有callback值,请问原生js难道无法做到这点吗?在网上搜索,大多数是告知修改服务器来添加callback,那么如果在前端考虑,不用jq如何正确获取呢?这里贴出代码。

原生:

var HeWeather5 = function (data){
    console.log(data);
};
var js=document.createElement("script");
js.src="https://free-api.heweather.com/v5/now?city=beijing&key=452970d722e14415bd7ac7eb391b0e11";
js.type="text/javascript";
document.getElementsByTagName("head")[0].appendChild(js);

jquery:

$(function () {
    $.ajax(
        {
            url:'https://free-api.heweather.com/v5/now?city=beijing&key=452970d722e14415bd7ac7eb391b0e11',
            type:'get',
            datatype:'jsonp',
            success:function (data) {
                var jsdata=eval(data);
                var msg=jsdata.HeWeather5[0];
                $("div").html("<ul>"+"<li>"+"您查询的地点为"+msg.basic.city+"</li>"+"<li>"+"天气"+msg.now.cond.txt+"</li>"+"<li>"+"温度"+msg.now.fl+"</li>"+"<li>"+"风向"+msg.now.wind.dir+"</li>")
            }
        }
    )
})


慕粉4118515
浏览 2483回答 1
1回答

拖鞋_

JSONP的原理 并不是AJAX原理是  动态在页面生成一个script 标签  这个标签的SRC设定为跨域请求的地址  获得数据后 解析JS拿到你想要的值
随时随地看视频慕课网APP
我要回答