zoukankan      html  css  js  c++  java
  • json解决ajax跨域的原理

    1. jsonp只能解决GET类型的ajax请求跨域问题
    2. jsonp请求不是ajax请求,而是一般的get请求
    3. 基本原理
      •   浏览器端:
        1.   动态生成<script>来请求后台接口(src就是接口的url)
        2.   定义好用于接受响应数据的函数(fn),并将函数名通过请求参数提交给后台(如:callback=fn)
      •   服务器端
        1.   接收到的请求处理产生结果数据后,返回一个函数调用的js代码,并将结果数据作为实参传入函数调用
      •   浏览器端
        1.   收到响应自动执行函数调用的js代码,也就是执行了提前定义好的回调函数,并得到了需要的结果数据
    /* 
    jsonp请求的接口请求函数
    */
      import jsonp from 'jsonp'
      import { message } from 'antd'
    
    export const reqWeather= (city)=>{
    
        return new Promise((resolve,reject) => {
            const url = `http://wthrcdn.etouch.cn/weather_mini?city=${city}`
            //发送jsonp请求
            jsonp(url,{},(err,data) =>{
                console.log('json()',err,data)
                //如果成功了
                if(!err&&data.status===1000){
                    const {date,type} = data.data.forecast[0]
                    resolve({date,type})
                }else{
                //如果失败了
                    message.error('获取天气信息失败')
                }
                
            })
        })
        
    }
    //reqWeather('武汉')
  • 相关阅读:
    冒泡排序
    最长回文子串
    两个排序数组的中位数
    Manacher算法解析
    绕过校园网WEB认证_iodine实现
    绕过校园网WEB认证_dns2tcp实现
    ajax跨域请求
    Vue实例生命周期
    组件化应用构建
    表单输入绑定
  • 原文地址:https://www.cnblogs.com/tommymarc/p/12063507.html
Copyright © 2011-2022 走看看