通过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、效果展示

相关推荐
爱上妖精的尾巴2 分钟前
5-41 WPS JS宏 数组迭代基础测试与双数组迭代的使用方法测试
前端·javascript·wps
Tisfy7 分钟前
“豆包聊天搜索” —— 直接在Chrome等浏览器地址栏开启对话
前端·chrome·豆包
Data_agent7 分钟前
京东商品价格历史信息API使用指南
java·大数据·前端·数据库·python
weixin_440730509 分钟前
HTML中的css和js的书写样式
javascript·css·html
大学生资源网17 分钟前
基于Vue的网上购物管理系统的设计与实现(java+vue+源码+文档)
java·前端·vue.js·spring boot·后端·源码
diudiu_3323 分钟前
XSS跨站脚本攻击
前端·xss
终极前端开发协会23 分钟前
【web前端 - 齐枭飞】乾坤【qiankun】应用,主项目与子项目交互详细代码,里面有详细代码,可直接粘贴过去 直接应用 ,
前端·前端框架·交互
闲蛋小超人笑嘻嘻38 分钟前
localStorage用法详解
前端
Swift社区42 分钟前
用 RN 的渲染模型,反推 Vue 列表的正确拆分方式
前端·javascript·vue.js
Mr_chiu42 分钟前
微前端从入门到精通:Vue开发者的大型应用架构演进指南
前端·架构