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

JSONP跨域

news 2025/6/22 17:08:31

1 概述

定义

json存在的意义：

不同类型的语言，都能识别json

JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的

image-20240731100716457

  • 跨域：浏览器A从服务器B获取的静态资源，包括Html、Css、Js，然后在Js中通过Ajax访问C服务器的静态资源或请求。即：浏览器A从B服务器拿的资源，资源中想访问服务器C的资源。
  • 同源策略：同一个请求协议(如：Http或Https)、同一个Ip、同一个端口，3个全部相同，即为同源。

2 demo

后端

<?php$arr=["name"=>"woniu","age"=>20];//把数组转成json字符串,$json = json_encode($arr);//输出echo $json;
?>

前端

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./jquery-3.4.1.min.js"></script>
</head>
<body><h1>前端</h1><script>$.getJSON("后端的地址",function(data){alert(JSON.stringify(data));})</script>
</body>
</html>

用户访问

192.168.190.134/woniu/demo31.html

查看控制台：

image-20240731102921872

解决方案

  • JSONP
  • CORS

3 JSONP

image-20240731105929545

image-20240731112347075

后端

<?php$arr=["name"=>"woniu","age"=>20];//把数组转成json字符串,$json = json_encode($arr);$callback = $_GET["callback"]; // 函数对象, 字符串//输出///echo $json;echo "$callback('$json')";
?>

前端

# 方法一：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./jquery-3.7.1.min.js"></script>
</head>
<body><h1>前端</h1><script>// function xxx(data){//     // 后端返回的data json//     console.log("999");// }</script><script>$.getJSON("http://192.168.190.133/wh069/demo31.php?callback=?",function(data){alert(JSON.stringify(data));// alert(JSON.parse(data));  // 反序列化 // json：序列化和反序列化})</script>
</body>
</html># 方法二：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./jquery-3.7.1.min.js"></script>
</head>
<body><h1>前端</h1><script>function xxx(data){// 后端返回的data jsonalert(JSON.stringify(data));}</script><script src="http://192.168.190.133/wh069/demo31.php?callback=xxx"></script>
</body>
</html>

相关文章：

JSONP跨域

1 概述 定义 json存在的意义&#xff1a; 不同类型的语言&#xff0c;都能识别json JSONP(JSON with Padding)是JSON的一种“使用模式”&#xff0c;可用于解决主流浏览器的跨域数据访问的问题。由于同源策略&#xff0c;一般来说位于 server1.example.com 的网页无法与不是 s…...

编程日记 2024/8/7 23:14:47

Linux--shell脚本语言—/—终章

一、shell函数 1、shell函数定义格式 参数说明&#xff1a; 1、可以带function fun() 定义&#xff0c;也可以直接fun() 定义,不带任何参数。 2、参数返回&#xff0c;可以显示加&#xff1a;return 返回&#xff0c;如果不加&#xff0c;将以最后一条命令运行结果&#xff…...

编程日记 2024/8/7 23:12:45

免费代理池是什么，如何使用代理IP进行网络爬虫？

互联网是一个庞大的数据集合体&#xff0c;网络信息资源丰富且繁杂&#xff0c;想要从中找到自己需要的信息要花费较多的时间。为了解决这个问题&#xff0c;网络爬虫技术应运而生&#xff0c;它的主要作用就是在海量的互联网信息中进行爬取&#xff0c;抓取有效信息并存储。然…...

编程日记 2024/8/7 23:11:44

CAN直接网络管理(20240805)

长安CAN网络管理规范 个人理解&#xff1a;管理CAN网络中各NM节点的工作模式&#xff08;状态&#xff09;&#xff1b; 1.术语定义 &#x1f449;节点地址&#xff1a;用于唯一标识网络中每个节点的单字节数字&#xff0c;取值范围是 0x00~0xFF。&#x1f449;状态迁移&#x…...

编程日记 2024/8/7 23:10:44

HTML5+CSS3笔记（Xmind格式）：第二天

Xmind鸟瞰图&#xff1a; 简单文字总结&#xff1a; 新增选择器&#xff1a; 1.选择相邻兄弟 2.属性选择器 3.结构性伪类选择器 4.整体结构类型 5.标签结构类型 6.指定子元素的序号 7.文本选择伪元素 8.表单中使用的状态伪类选择器 9.内容…...

编程日记 2024/8/7 23:08:42

视频压缩文件太大了怎么缩小？6个视频压缩技巧，速度收藏起来！

高清视频文件&#xff0c;尤其是那些以 1080p 和 720p 清晰度为特征的视频&#xff0c;通常都拥有相当大的体积&#xff0c;会占据大量计算机存储空间。因此&#xff0c;为了更好地将它们进行分享和存储&#xff0c;您可能需要对它们进行压缩&#xff0c;以减小它们的尺寸。然而…...

编程日记 2024/8/7 23:07:40

Python接口自动化测试数据提取分析：Jmespath

1、引言 在处理JSON数据时&#xff0c;我们常常需要提取、筛选或者变换数据。手动编写这些操作的代码不仅繁琐&#xff0c;而且容易出错。Python作为一个功能强大的编程语言&#xff0c;拥有丰富的库和工具来处理这些数据。今天&#xff0c;将介绍一个实用的Python库——JMESP…...

编程日记 2024/8/7 23:06:39

特种设备作业叉车司机题库及答案

1.在我们平时工作中&#xff0c;经常接触的汽油、柴油、机油、油棉纱、木材等均为() A、助燃物质 B、可燃物质 C、着火源 参考答案:B 2.叉车满载行驶时&#xff0c;如合成重心靠后() A、有利于纵向稳定 B、有利于横向稳定 C、纵向和横向均有利 参考答案:A 3.蓄电池车行驶中放…...

编程日记 2024/8/7 23:05:38

Linux 操作系统速通

一、安装虚拟机 1. VmWare 安装下载 vmware workstation pro 16 下载 win R 输入 ncpa.cpl 确保网卡正常 2. CentOS 系统下载 CentOS 系统下载 将 CentOS 系统安装到虚拟机 3. 查看虚拟机 IP 命令 ifconfig 4. finalShell 安装下载 finalShell 下载 输入用户名一般是 ro…...

编程日记 2024/8/7 23:04:37

IIS漏洞大全（附修复方法）

IIS6.0 IlS Server 在 Web 服务扩展中开启了 WebDAV&#xff0c;配置了可以写入的权限&#xff0c;造成任意文件上传。 漏洞复现 fofa:"llS-6.0" or 本地搭建2003 server 1)开启 WebDAV 和写权限: 做好准备工作后开启环境&#xff0c;然后我们去访问配置的IP&#…...

编程日记 2024/8/7 23:03:36

HarmonyOS笔记3：从网络数据接口API获取数据

面向HarmonyOS的移动应用一般采用MVVM模式&#xff08;见参考文献【1】&#xff09;&#xff0c;其中&#xff1a; M&#xff08;Model层)&#xff1a;模型层&#xff0c;存储数据和相关逻辑的模型。它表示组件或其他相关业务逻辑之间传输的数据。Model是对原始数据的进一步处理…...

编程日记 2024/8/7 23:01:34

Mac 下生成core dump

mac下生成core dump 使用ulimit -c查看ulimit设置,显示unlimited表示开启,显示0表示关闭,通过ulimit -c unlimited打开设置; 但是这个只在当前窗口有效果。如果需要变成系统全局设置。 就需要去改/etc/profile文件&#xff0c;打开&#xff0c;然后加上ulimit -c unlimited就可…...

编程日记 2024/8/7 23:00:33

详解Xilinx FPGA高速串行收发器GTX/GTP（1）--SerDes和GTX的关系

目录 1、SerDes和GTX的关系 2、传输总线的变化 2.1、从串行到并行 2.2、从并行又回到串行 文章总目录点这里：《FPGA接口与协议》专栏的说明与导航 1、SerDes和GTX的关系 Hold On，这个系列文章不是讲GTX收发器的吗？怎么一开始就扯到SerDes上了？GTX和SerDes之间有…...

编程日记 2024/8/7 22:55:28

golang实现Digest认证鉴权接口

什么是Digest认证鉴权接口？ Digest认证鉴权接口是一种基于摘要算法的身份验证方法，用于确保API请求的安全性。在实际应用中，常常使用HTTP协议的Digest认证鉴权接口来验证请求的合法性。下面是一种常见的Digest认证鉴权流程： 1. 客户端发送HTTP请求到服务器，请求接口资源…...

编程日记 2024/8/7 22:53:27

机房托管服务器说明

机房托管服务器是指将企业或个人的服务器放置到专业数据中心(IDC机房)进行管理和维护&#xff0c;由数据中心提供稳定、安全的运行环境以及网络连接等基础设施支持。rak小编为您整理发布机房托管服务器说明详细内容。 通过托管服务器到专业机房&#xff0c;企业能够享受到高性能…...

编程日记 2024/8/7 22:52:26

CookieMaker工作室合作开发C++项目十一：拟态病毒

&#xff08;注&#xff1a;本文章使用了“无标题技术”&#xff09; 一天&#xff0c;我和几个同事&#xff0c;平台出了点BUG&#xff0c;居然给我刷出了千年杀&#xff0c;同事看得瑕疵欲裂&#xff0c;发誓要将我挫骨扬灰—— &#xff08;游戏入口&#xff1a;和平精英31.…...

编程日记 2024/8/7 22:51:25

57、PHP 实现 从扑克牌中随机抽取5张牌，判断是不是一个顺子

题目&#xff1a; PHP 实现 从扑克牌中随机抽取5张牌&#xff0c;判断是不是一个顺子 描述&#xff1a; 即这5张牌是不是连续的2-10位数字本身&#xff0c;A为1&#xff0c;J为11&#xff0c;Q为12&#xff0c;K为13&#xff0c;而大小王可以看成任意数字。 解题思路&#xf…...

编程日记 2024/8/7 22:48:22

前端HTML+CSS查漏补缺——仿制百度搜索首页的一些思考

在像素模仿百度搜索首页的时候&#xff0c;在实现的时候&#xff0c;遇到了一些值得记录的点。 在这个过程中&#xff0c;也顺便看了看百度的源码&#xff0c;感觉很有意思。 对了&#xff0c;QQ截屏里面获取到的颜色&#xff0c;是不大正确的&#xff0c;会有点误差。 这是我…...

编程日记 2024/8/7 22:46:20

【Python】实现一个个人理财助手小程序

以下是一个简化的 Python 代码框架&#xff0c;以及如何实现上述功能点的基本思路&#xff0c;可以基于这个框架进一步开发和完善你的小程序。 以下是一个简化的 Python 代码框架&#xff0c;使用了基本的类和函数来模拟上述功能&#xff1a; import pandas as pd from crypt…...

编程日记 2024/8/7 22:45:19

【GCC】结合GPT4 延迟梯度学习2：延迟梯度的计算及阈值更新

上文，充分发现了 排队梯度延迟的重要性， 【GCC】结合GPT4 延迟梯度学习1：公式推导及理论分析 例如： 延迟梯度为正数时，是单位时间内的排队队列长度的“增长速度” 延迟梯度与 发送速率（接收速率？）有直接的关系。 因为有 观测误差、随机因素、噪声，所以要对延迟梯度进行…...

编程日记 2024/8/7 22:43:17

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的？

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

编程新知 2025/6/21 14:52:47

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目&#xff1a;3442. 奇偶频次间的最大差值 I 思路 &#xff1a;哈希&#xff0c;时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况&#xff0c;哈希表这里用数组即可实现。 C版本&#xff1a; class Solution { public:int maxDifference(string s) {int a[26]…...

编程新知 2025/6/21 14:17:58

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

编程新知 2025/6/21 16:43:12

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

编程新知 2025/6/22 9:15:24

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现，论文初版实现

摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序&#xff0c;以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务&#xff0c;提供稳定高效的数据处理与业务逻辑支持&#xff1b;利用 uniapp 实现跨平台前…...

编程新知 2025/6/20 11:37:48

今日学习：Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...

编程新知 2025/6/21 16:34:20

稳定币的深度剖析与展望

一、引言 在当今数字化浪潮席卷全球的时代&#xff0c;加密货币作为一种新兴的金融现象&#xff0c;正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而&#xff0c;加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下&#xff0c;稳定…...

编程新知 2025/6/20 12:51:17

（一）单例模式

一、前言 单例模式属于六大创建型模式，即在软件设计过程中，主要关注创建对象的结果，并不关心创建对象的过程及细节。创建型设计模式将类对象的实例化过程进行抽象化接口设计，从而隐藏了类对象的实例是如何被创建的，封装了软件系统使用的具体对象类型。 六大创建型模式包括…...

编程新知 2025/6/16 16:54:17

VSCode 使用CMake 构建 Qt 5 窗口程序

首先，目录结构如下图： 运行效果： cmake -B build cmake --build build 运行： windeployqt.exe F:\testQt5\build\Debug\app.exe main.cpp #include "mainwindow.h"#include <QAppli...

编程新知 2025/6/21 22:38:43

云原生时代的系统设计：架构转型的战略支点

&#x1f4dd;个人主页&#x1f339;&#xff1a;一ge科研小菜鸡-CSDN博客 &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; 一、云原生的崛起&#xff1a;技术趋势与现实需求的交汇 随着企业业务的互联网化、全球化、智能化持续加深&#xff0c;传统的 I…...

编程新知 2025/6/21 3:55:57