通过ajax的jsonp方式实现跨域访问,并处理响应

一、场景描述

现有一个项目A,需要请求项目B的某个接口,并根据B接口响应结果A处理后续逻辑。

二、具体实现

1、前端

前端项目A发送请求,这里通过jsonp的方式实现跨域访问。

html 复制代码
       $.ajax({    
            url:'http://10.10.2.256:8280/ssoCheck',   //请求的url地址
            data:{'userId':'1'}, //参数
            dataType:"jsonp",   //返回格式为json
            type:"GET",   //请求方式
            jsonpCallback:"successCallBack"//回调方法

        });

注意,需要指定jsonp的回调方法jsonpcallback,这里我设置的回调方法名为successCallBack,所以相应的 要定义一个successCallBack方法。

html 复制代码
function successCallBack(data){
        //后端返回接口
       if (data && data.code == '200'){
          //自己逻辑
       }
    }

2、 后端

后端需要注意返回的json格式,必须严格返回 successCallBack({}) 格式的。

(successCallBack也就是前端配置的回调方法名),否则回调方法无法执行。

3、效果展示

相关推荐
Catherinemin1 小时前
CSS|07 标准文档流
前端·css
azjgkyjhg1 小时前
探索 Kinetica 数据库的强大功能:实时分析与生成式AI的完美结合
前端
乐闻x1 小时前
深入解析 Parcel:如何进行自定义配置
前端·javascript
白羊@2 小时前
多模块应用、发布使用第三方库(持续更新中)
服务器·前端·网络·harmonyos·鸿蒙·openharmony·第三方库
chengxuyuan666662 小时前
react前端框架
前端·javascript·vue.js
爱学英语的程序员2 小时前
前端面试题26 | npm 和 pnpm 有什么区别?
前端·npm·node.js
余生H2 小时前
bain.js(十二):RNN神经网络实战教程 - 音乐乐谱生成 -人人都是作曲家~
javascript·人工智能·rnn·神经网络·agi
小石潭记丶3 小时前
使用GIN实现操作数据库简单的web项目
前端·gin
一雨方知深秋3 小时前
购物车案例--分模块存储数据,发送请求数据渲染,底部总计数量和价格
前端·javascript·vue.js·axios·vuex·actions·mutations