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

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

news 2025/9/19 17:40:10

摘要

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

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

编程新知 2025/9/17 11:41:14

练习（含atoi的模拟实现,自定义类型等练习）

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

编程新知 2025/9/13 17:46:22

条件运算符

C中的三目运算符&#xff08;也称条件运算符&#xff0c;英文&#xff1a;ternary operator&#xff09;是一种简洁的条件选择语句&#xff0c;语法如下&#xff1a; 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true&#xff0c;则整个表达式的结果为“表达式1”…...

编程新知 2025/9/19 12:51:08

C++ 求圆面积的程序（Program to find area of a circle）

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

编程新知 2025/9/13 0:44:14

算法笔记2

1.字符串拼接最好用StringBuilder&#xff0c;不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...

编程新知 2025/9/13 17:42:29

Linux 中如何提取压缩文件 ？

Linux 是一种流行的开源操作系统&#xff0c;它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间&#xff0c;使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的&#xff0c;要在 …...

编程新知 2025/9/17 5:53:09

git: early EOF

macOS报错&#xff1a; Initialized empty Git repository in /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core/.git/ remote: Enumerating objects: 2691797, done. remote: Counting objects: 100% (1760/1760), done. remote: Compressing objects: 100% (636/636…...

编程新知 2025/7/14 0:13:22

Java求职者面试指南：Spring、Spring Boot、Spring MVC与MyBatis技术解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、Spring MVC与MyBatis技术解析 一、第一轮基础概念问题 1. Spring框架的核心容器是什么&#xff1f;它的作用是什么&#xff1f; Spring框架的核心容器是IoC&#xff08;控制反转&#xff09;容器。它的主要作用是管理对…...

编程新知 2025/7/17 8:16:30

【Post-process】【VBA】ETABS VBA FrameObj.GetNameList and write to EXCEL

ETABS API实战：导出框架元素数据到Excel 在结构工程师的日常工作中，经常需要从ETABS模型中提取框架元素信息进行后续分析。手动复制粘贴不仅耗时，还容易出错。今天我们来用简单的VBA代码实现自动化导出。 🎯 我们要实现什么？ 一键点击，就能将ETABS中所有框架元素的基…...

编程新知 2025/9/7 8:47:02

Android写一个捕获全局异常的工具类

项目开发和实际运行过程中难免会遇到异常发生&#xff0c;系统提供了一个可以捕获全局异常的工具Uncaughtexceptionhandler&#xff0c;它是Thread的子类&#xff08;就是package java.lang;里线程的Thread&#xff09;。本文将利用它将设备信息、报错信息以及错误的发生时间都…...

编程新知 2025/9/9 10:05:51