当前位置： 首页 > news >正文

php+JavaScript实现callback跨域请求jsonp数据

news 2025/11/6 15:35:13

摘要

JSONP 是 JSON with Padding 的缩写，是一种解决跨域数据获取的方案。由于浏览器的同源策略限制，不同域名之间的前端JS代码不能相互访问到对方的数据，JSONP通过script标签的特性，实现在不同域名的网页间传递数据。

其原理是在客户端页面上定义一个回调函数 (callback)，然后通过script标签向外部服务器请求数据，并将定义好的回调函数名称作为参数放在url请求地址里，服务器成功接收请求后，使用该参数将数据传递给定义好的回调函数并返回，客户端页面中定义好的回调函数接收参数后进行处理。

正常的AJAX请求

$.ajax({url: "https://qq.com/getdata/",success: function(res) {console.log(res)}
});

如果跨域请求，浏览器会报错：

跨域：例如你访问页面的域名是 https://baidu.com/getdata/，但是ajax请求的是 https://qq.com/getdata/ ,虽然都是getdata，但是其域名不一样，浏览器会拒绝请求。

在这里插入图片描述

这样的情况下，你通过ajax是无法获得请求数据的。

如何解决这个问题？jsonp就可以解决。

JSONP数据源代码示例

数据源即ajax请求的接口，其返回的是由括号括起来的json数据。服务端需要根据请求中的回调函数名称callback，将用户数据包装在函数调用中。

假设是：https://www.qq.com/callbackData/index.php

<?php// 页面编码header("Content-type:application/json");// 数据源$data = array(array('title' => '90后考上公职3个月开始贪污获刑3年','url' => 'https://baijiahao.baidu.com/s?id=1780086209787359686'),array('title' => '男子闪婚后闪离 24万彩礼要回8万','url' => 'http://dzb.hxnews.com/news/kx/202310/19/2138573.shtml'),array('title' => '神舟十七号船箭组合体转运至发射区','url' => 'https://baijiahao.baidu.com/s?id=1780150004201916038&wfr=spider&for=pc'),array('title' => '以色列要求本国公民立即离开土耳其','url' => 'https://baijiahao.baidu.com/s?id=1780107306390790504&wfr=spider&for=pc'),array('title' => '好莱坞将翻拍《你好李焕英》','url' => 'https://baijiahao.baidu.com/s?id=1780164746410232029&wfr=spider&for=pc'));// 返回结果$result = array('datalist' => $data,'code' => 200,'msg' => '获取成功');// 输出callback$resultCallback = json_encode($result);echo $_GET['callback'] . "(" . $resultCallback . ")";?>

ajax请求

<html><head><title>jsonp请求示例</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover"><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script></head><body><div id="app"></div><script>$.ajax({url: "https://www.qq.com/callbackData/index.php",dataType: "jsonp",jsonpCallback: "handleJSONPResponse",success: function(res) {console.log(res)}});</script></body>
</html>

结果：

在这里插入图片描述

通过 dataType: "jsonp" 就可以成功请求到数据。

作者

TANKING

相关文章：

php+JavaScript实现callback跨域请求jsonp数据

摘要 JSONP 是 JSON with Padding 的缩写&#xff0c;是一种解决跨域数据获取的方案。由于浏览器的同源策略限制&#xff0c;不同域名之间的前端JS代码不能相互访问到对方的数据&#xff0c;JSONP通过script标签的特性&#xff0c;实现在不同域名的网页间传递数据。 其原理是…...

编程日记 2023/10/27 8:33:34

荣电集团与钕希科技签署全面战略合作

10月26日&#xff0c;荣电集团&#xff08;以下简称荣电&#xff09;与钕希科技南京有限公司&#xff08;以下简称钕希科技&#xff09;今天在合肥市签署全面战略合作协议&#xff0c;联合进军混合现实&#xff08;Mixed Reality&#xff0c;以下简称MR&#xff09;空间计算高科…...

编程日记 2023/10/27 8:32:33

C语言_文件_进程_进程间通讯 常用函数/命令 + 实例

文件相关命令&#xff1a; ps -aux|grep init? //搜索包含init名称的进程 top //linux下的资源管理器&#xff08;动态&#xff09;//open 返回的int 是给后面的读/写/光标移动 用的fd&#xff0c;没有open就不能进行后面的操作&#xff1b; int op…...

编程日记 2023/10/27 8:31:31

力扣第406题 根据身高重建队列 c++ 贪心思维

题目 406. 根据身高重建队列 中等 相关标签 贪心 树状数组 线段树 数组 排序 假设有打乱顺序的一群人站成一个队列&#xff0c;数组 people 表示队列中一些人的属性&#xff08;不一定按顺序&#xff09;。每个 people[i] [hi, ki] 表示第 i 个人的身高为 hi &am…...

编程日记 2023/10/27 8:30:29

postgresSQL 数据库本地创建表空间读取本地备份SQL文件

使用pgAdmin4&#xff0c;你安装PG得文件夹****/16/paAdmin 4 /runtime/pgAdmin4.exe 第一步&#xff1a;找到Tablespaces 第二步&#xff1a;创建表空间名称 第三步&#xff1a;指向数据文件 第四步&#xff1a;找到Databases&#xff0c;创建表空间 第五步&#xff1a;输入数…...

编程日记 2023/10/27 8:29:28

贝锐花生壳内网穿透推出全新功能，远程业务连接更安全

贝锐旗下内网穿透兼动态域名解析品牌花生壳目前推出了全新的“访问控制”功能&#xff0c;可精确设置访问权限&#xff0c;充分保障信息安全&#xff0c;满足更多用户安全远程访问内网服务的需求。 通过这一功能&#xff0c;可实现指定时间、IP、地区等条件下才能远程访问映射的…...

编程日记 2023/10/27 8:28:28

NIO和BIO编程

一、网络通信编程基本常识 1、什么是Socket&#xff1f; Socket是应用层与TCP/IP协议族通信的中间软件抽象层&#xff0c;它是一组接口&#xff0c;一般由操作系统提供。 2、短连接 短连接是指socket建立连接之后传输数据确定接收完后关闭连接 3、长连接 长连接是指建立so…...

编程日记 2023/10/27 8:27:27

嵌入式系统设计师考试笔记之操作系统基础复习笔记二

目录 3、任务管理 &#xff08;1&#xff09;嵌入式操作系统的任务管理可以分为 &#xff08;2&#xff09;进程 &#xff08;3&#xff09;线程 &#xff08;4&#xff09;任务 &#xff08;5&#xff09;任务的创建与中止 &#xff08;6&#xff09;任务的状态任务有三…...

编程日记 2023/10/27 8:26:26

读图数据库实战笔记01_初识图

1. 图论 1.1. 起源于莱昂哈德欧拉在1736年发表的一篇关于“哥尼斯堡七桥问题”的论文 1.2. 要解决这个问题&#xff0c;该图需要零个或两个具有奇数连接的节点 1.3. 任何满足这一条件的图都被称为欧拉图 1.4. 如果路径只访问每条边一次&#xff0c;则该图具有欧拉路径 1.5…...

编程日记 2023/10/27 8:25:25

K-Means和KNN

主要区别 从无序 —> 有序 从K-Means —> KNN KNN&#xff1a;监督学习&#xff0c;类别是已知的&#xff0c;对已知分类的数据进行训练和学习&#xff0c;找到不同类的特征&#xff0c;再对未分类的数据进行分类。K-Means&#xff1a;无监督学习&#xff0c;事先不知道…...

编程日记 2023/10/27 8:24:23

【Python】【Flask】flask_login的初始化

【背景】 想要更高效地用现有的Flask_login包来实现用户管理方面的常用功能会话管理等。不想再手搓了。 【要点】 首先引入flask_login from flask_login import LoginManager, login_user, login_required, logout_user,current_user然后进行app级别的设置和初始化 login…...

编程日记 2023/10/27 8:23:22

Spring Cloud之API网关（Gateway）

目录 API网关 好处 解决方案 Gateway 简介 特征 核心概念 Route(路由) Predicate(断言) Filter(过滤器) 工作流程 Route(路由) 路由配置方式 1.yml配置文件路由 2.bean进行配置 3.动态路由 动态路由 Predicate(断言) 特点 常见断言 示例 Filter(过滤器) …...

编程日记 2023/10/27 8:22:21

nodejs+vue 电子书阅读系统

本文首先介绍了电子书阅读系统的发展背景与发展现状&#xff0c;然后遵循软件常规开发流程&#xff0c;首先针对系统选取适用的语言和开发平台&#xff0c;随着网络技术的不断发展&#xff0c;多媒体技术应用渐渐的出现在教育领域中&#xff0c;电子书阅读已经成为社会的一个热…...

编程日记 2023/10/27 8:21:20

百度文心一言4.0抢先体验教程！

&#x1f341; 展望&#xff1a;关注我, AI学习之旅上&#xff0c;我与您一同成长&#xff01; 一、 引言 想快速体验文心一言4.0&#xff0c;但又觉得技术难度太高&#xff1f;别担心&#xff0c;我来手把手教你&#xff01; &#x1f680; 10月17日&#xff0c;文心一言4.0…...

编程日记 2023/10/27 8:20:17

单目3D目标检测 方法综述——直接回归方法、基于深度信息方法、基于点云信息方法

本文综合整理单目3D目标检测的方法模型&#xff0c;包括&#xff1a;基于几何约束的直接回归方法&#xff0c;基于深度信息的方法&#xff0c;基于点云信息的方法。万字长文&#xff0c;慢慢阅读~ 直接回归方法 涉及到模型包括&#xff1a;MonoCon、MonoDLE、MonoFlex、CUPNet…...

编程日记 2023/10/27 8:19:16

oracle，CLOB转XML内存不足，ORA-27163: out of memory ORA-06512: at “SYS.XMLTYPE“,

通过kettle采集数据时&#xff0c;表输入的组件&#xff0c;查询报错。 ORA-27163: out of memory ORA-06512: at “SYS.XMLTYPE”, line 272 ORA-06512: at line 1 通过 ALTER SESSION SET EVENTS ‘31156 trace name context forever, level 0x400’; 修改会话配置 或直接修改…...

编程日记 2023/10/27 8:18:15

PHP与mysql数据库交互

PHP与mysql数据库交互 文章目录 PHP与mysql数据库交互方法速查建立与Mysql链接捕获连接错误SQL语句的执行SQL 错误SQL语句执行结果集对象方法速查 案例 方法速查 函数名 作用 mysqli_connect() 与MySQL 数据库建立连接。 mysqli_close() 关闭与MYSQL 数据库建…...

编程日记 2023/10/27 8:17:14

【广州华锐视点】VR飞行员驾驶模拟实训系统

VR飞行员驾驶模拟实训系统是一种基于虚拟现实技术的航空装备仿真测试技术&#xff0c;可以用于飞行员、乘务员和机务人员的训练。该系统可以模拟真实的飞行环境&#xff0c;包括天气、地形、飞机性能等&#xff0c;使被试者能够在虚拟环境中进行飞行操作&#xff0c;从而提高其…...

编程日记 2023/10/27 8:16:13

太烂的牌也要打完只为自己也不是为了其他什么原因。

day17_io02 1.上课代码敲一遍 2.读取一个文件&#xff0c;这个文件中有随机的一些数字字符&#xff0c;统计这些数字有几个偶数&#xff0c;几个奇数&#xff0c;并且追加写入到该文件末尾。 例如&#xff1a; a.txt文件&#xff1a; 3241256364789629090126581212515 奇数&…...

编程日记 2023/10/27 8:15:12

SDL窗口创建以及简单显示（1）

项目创建步骤 1. 使用Qt Creator创建一个C项目 2. 将SDL库文件放到源文件目录下 在项目pro文件中添加库文件 win32{INCLUDEPATH $$PWD/SDL2-2.0.10/includeLIBS $$PWD/SDL2-2.0.10/lib/x86/SDL2.lib } 使用SDL创建一个窗口 #include <stdio.h>#include <SDL.h>…...

编程日记 2023/10/27 8:14:11

AI-调查研究-01-正念冥想有用吗？对健康的影响及科学指南

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2025/11/5 6:33:45

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架&#xff0c;用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录&#xff0c;以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

编程新知 2025/11/6 15:33:23

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题&#xff1a; 下面创建一个简单的Flask RESTful API示例。首先&#xff0c;我们需要创建环境&#xff0c;安装必要的依赖&#xff0c;然后…...

编程新知 2025/10/28 12:40:10

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

编程新知 2025/10/29 17:53:07

Zustand 状态管理库：极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库&#xff0c;特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

编程新知 2025/10/15 17:59:36

从零实现STL哈希容器：unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

编程新知 2025/11/1 20:53:34

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

编程新知 2025/11/3 19:22:42

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

编程新知 2025/10/17 17:04:15

Redis数据倾斜问题解决

Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中&#xff0c;部分节点存储的数据量或访问量远高于其他节点&#xff0c;导致这些节点负载过高&#xff0c;影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...

编程新知 2025/11/1 3:09:34

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

编程新知 2025/10/30 1:32:29