ModifyAjaxResponse，修改ajax请求返回值，前后端调试之利器

转载作者：我是一只小鸟更新时间：2023-06-26 22:31:10

1、概要

先看图。

。

京豆多的离谱，你的第一想法肯定是：按F12修改了网页元素。

没那么简单，你看支持刷新的。

。

肯定还是假的，通过 Fiddler 或 Wireshark 等抓包工具修改了响应包；或者干脆改了本地host文件，指向了一个自己写的页面...... 。

这些都太麻烦了，如果能在当前网页上拦截这个请求，并修改返回值，那才是最简单的。

2、尝试

一个简单的ajax请求。

                          
                            <!
                          
                          
                            DOCTYPE html
                          
                          
                            >
                          
                          
                            <
                          
                          
                            html 
                          
                          
                            lang
                          
                          
                            ="en"
                          
                          
                            >
                          
                          
                            <
                          
                          
                            head
                          
                          
                            >
                          
                          
                            <
                          
                          
                            meta 
                          
                          
                            charset
                          
                          
                            ="UTF-8"
                          
                          
                            >
                          
                          
                            <
                          
                          
                            meta 
                          
                          
                            http-equiv
                          
                          
                            ="X-UA-Compatible"
                          
                          
                             content
                          
                          
                            ="IE=edge"
                          
                          
                            >
                          
                          
                            <
                          
                          
                            meta 
                          
                          
                            name
                          
                          
                            ="viewport"
                          
                          
                             content
                          
                          
                            ="width=device-width, initial-scale=1.0"
                          
                          
                            >
                          
                          
                            <
                          
                          
                            title
                          
                          
                            >
                          
                          test
                          
                            </
                          
                          
                            title
                          
                          
                            >
                          
                          
                            </
                          
                          
                            head
                          
                          
                            >
                          
                          
                            <
                          
                          
                            body
                          
                          
                            >
                          
                          
                            <
                          
                          
                            div
                          
                          
                            >
                          
                          
                            <
                          
                          
                            input 
                          
                          
                            type
                          
                          
                            ="button"
                          
                          
                             value
                          
                          
                            ="get_data"
                          
                          
                             id
                          
                          
                            ="xhr_get"
                          
                          
                            >
                          
                          
                            </
                          
                          
                            div
                          
                          
                            >
                          
                          
                            <
                          
                          
                            div
                          
                          
                            >
                          
                          
                            <
                          
                          
                            p
                          
                          
                            >
                          
                          id -> 
                          
                            <
                          
                          
                            span 
                          
                          
                            id
                          
                          
                            ="id"
                          
                          
                            ></
                          
                          
                            span
                          
                          
                            ></
                          
                          
                            p
                          
                          
                            >
                          
                          
                            <
                          
                          
                            p
                          
                          
                            >
                          
                          title -> 
                          
                            <
                          
                          
                            span 
                          
                          
                            id
                          
                          
                            ="title"
                          
                          
                            ></
                          
                          
                            span
                          
                          
                            ></
                          
                          
                            p
                          
                          
                            >
                          
                          
                            <
                          
                          
                            p
                          
                          
                            >
                          
                          userId -> 
                          
                            <
                          
                          
                            span 
                          
                          
                            id
                          
                          
                            ="userId"
                          
                          
                            ></
                          
                          
                            span
                          
                          
                            ></
                          
                          
                            p
                          
                          
                            >
                          
                          
                            <
                          
                          
                            p
                          
                          
                            >
                          
                          body -> 
                          
                            <
                          
                          
                            span 
                          
                          
                            id
                          
                          
                            ="body"
                          
                          
                            ></
                          
                          
                            span
                          
                          
                            ></
                          
                          
                            p
                          
                          
                            >
                          
                          
                            </
                          
                          
                            div
                          
                          
                            >
                          
                          
                            <
                          
                          
                            script 
                          
                          
                            src
                          
                          
                            ='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'
                          
                          
                            ></
                          
                          
                            script
                          
                          
                            >
                          
                          
                            <
                          
                          
                            script 
                          
                          
                            type
                          
                          
                            ="text/javascript"
                          
                          
                            >
                          
                          
                            
        $(
                          
                          
                            '
                          
                          
                            #xhr_get
                          
                          
                            '
                          
                          
                            ).on(
                          
                          
                            '
                          
                          
                            click
                          
                          
                            '
                          
                          
                            , 
                          
                          
                            function
                          
                          
                             () {
            $.ajax({
                url: 
                          
                          
                            '
                          
                          
                            https://jsonplaceholder.typicode.com/posts/1
                          
                          
                            '
                          
                          
                            ,
                type: 
                          
                          
                            '
                          
                          
                            GET
                          
                          
                            '
                          
                          
                            ,
                success: 
                          
                          
                            function
                          
                          
                             (data) {
                    $(
                          
                          
                            '
                          
                          
                            #id
                          
                          
                            '
                          
                          
                            ).text(data.id);
                    $(
                          
                          
                            '
                          
                          
                            #title
                          
                          
                            '
                          
                          
                            ).text(data.title);
                    $(
                          
                          
                            '
                          
                          
                            #userId
                          
                          
                            '
                          
                          
                            ).text(data.userId);
                    $(
                          
                          
                            '
                          
                          
                            #body
                          
                          
                            '
                          
                          
                            ).text(data.body);
                }
            });
        });
    
                          
                          
                            </
                          
                          
                            script
                          
                          
                            >
                          
                          
                            </
                          
                          
                            body
                          
                          
                            >
                          
                          
                            </
                          
                          
                            html
                          
                          
                            >

运行起来，点下按钮看看。

。

如何拦截这个ajax请求并修改返回内容呢?

可以实现一个自定义的构造函数重写默认的XMLHttpRequest构造函数，使其在触发实际事件之前重写响应即可。按F12在控制台向页面注入代码试试。

。

再次点击按钮，页面已经渲染到新的值了。

由此证明，这条路是行的通的，但是不能每次都按F12注入，应该做到自动注入，并把所有拦截规则维护起来。

3、Chrome插件

浏览器插件最适合做这个了，新建一个Chrome插件，命名：ModifyAjaxResponse 。

manifest.json 。

                          
                            {
    
                          
                          "manifest_version": 3
                          
                            ,
    
                          
                          "name": "ModifyAjaxResponse"
                          
                            ,
    
                          
                          "description": "Modify response text of ajax requests"
                          
                            ,
    
                          
                          "version": "1.4.0"
                          
                            ,
    
                          
                          "content_scripts"
                          
                            : [
        {
            
                          
                          "matches"
                          
                            : [
                
                          
                          "<all_urls>"
                          
                            
            ],
            
                          
                          "js"
                          
                            : [
                
                          
                          "content_scripts.js"
                          
                            
            ],
            
                          
                          "run_at": "document_start"
                          
                            
        }
    ]
}

"run_at": "document_start"，页面加载之前就注入 content_scripts.js，看看其内容。

                            const script = document.createElement('script'
                            
                              );
script.setAttribute(
                            
                            'type', 'text/javascript'
                            
                              );
script.setAttribute(
                            
                            'src', chrome.runtime.getURL('dist/pageInjectScript.js'
                            
                              ));
document.documentElement.appendChild(script);

向每个页面动态加载 pageInjectScript.js，用来重写默认的 XMLHttpRequest 构造函数，实现拦截页面 ajax请求的。打开博客园测试一下。

。

可见 pageInjectScript.js 已经加载进来了，这个不是博客园服务器返回的，而是通过Chrome插件注入到页面上的。

还差一个维护所有拦截规则的页面。使用 Chrome API 自带的存储 chrome.storage.local 保存即可。看看最终效果。

。

至此，可以指哪打哪，随意修改页面展示内容了。

。

4、总结

本插件当然不是改京豆数量自嗨用的，实际用途和开发初衷是：前后端对接接口，前端利用本插件，可以快速得到不同的返回值。

注:

1）本方法仅重写XMLHttpRequest构造函数，F12网络面板里看到的还是原始返回值，但代码可以获取修改后的值；。

2）非开发时间请关闭插件，避免向页面注入无用js 。

5、相关阅读

修改Ajax返回内容。

油猴脚本重写fetch和xhr请求。

ajax-interceptor 。

6、下载

源码： https://github.com/oppoic/ModifyAjaxResponse 。

Chrome 商店： https://chrome.google.com/webstore/detail/modifyajaxresponse/odpiadnfijfeggnnodoaaphkkjkmpnia 。

注：访问不了 Chrome 商店的话，下载源码本地加载src目录。

最后此篇关于ModifyAjaxResponse，修改ajax请求返回值，前后端调试之利器的文章就讲到这里了,如果你想了解更多关于ModifyAjaxResponse，修改ajax请求返回值，前后端调试之利器的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！。

文章推荐：自己动手实现rpc框架(一)实现点对点的rpc通信

文章推荐：【从零开始学微服务】03.软件架构的演化过程

MSSQL监控数据库的DDL操作(创建，修改，删除存储过程，创建，修改，删除表等)
前言：有时候，一个数据库有多个帐号，包括数据库管理员，开发人员，运维支撑人员等，可能有很多帐号都有比较大的权限，例如DDL操作权限(创建，修改，删除存储过程，创建，修改，删除表等），账户多了，管理
c - 下面的代码有什么问题？预期 X 由线程 Func 1 修改，随后 X 由线程 Func 2 修改
这个问题已经有答案了: Condition variable deadlock (2 个回答) 已关闭 5 年前。在研究多线程时，我编写了以下代码，但在屏幕上没有观察到输出。我在这里做错了什么？我期
修改.htaccess实现301域名重定向示例分享
复制代码代码如下: <IfModule mod_rewrite.c> RewriteEngineOn RewriteBase/ #将www.zzvips.com跳转到www.zzv
修改.htaccess实现子目录绑定示例分享
复制代码代码如下: <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / # 把 www.zzvips.com
修改 Gateway和DNS的vbs脚本
复制代码代码如下: Const T_GATEWAY = "1.1.1.1" '网关 Const T_NEWDNS1 = "2.2.2.2" 'DNS1
ElasticSearch学习2 - 查询、修改
0. 修改索引大文本字段支持排序 PUT http://localhost:9200/lrc_blog/_mapping //请求体 { "properties": { "title": { "t
javascript - 修改 DOM
仅 react 当状态发生变化时重新渲染 . 那么为什么我会直接看到我对真实 DOM 所做的更改呢？我知道我正在修改真实的 DOM，但是当我根本没有改变状态时触发重新渲染的是什么。 import R
swiftui - 修改@FetchRequest
Xcode beta 5 推出 @FetchRequest对于 SwiftUI。我有一个 View ，它有一个 @FetchRequest . NSFetchRequest是在管理器中创建的，该管理
php - 修改/编译开源项目源代码的最佳方法是什么？
关闭。这个问题需要更多 focused .它目前不接受答案。想改进这个问题？更新问题，使其仅关注一个问题 editing this post . 7年前关闭。 Improve this questi
PHP preg_replace 修改
我有一个表达式[text][id]应替换为链接 text 解决方案是( id 是整数) $s = preg_replace("/\[([^\]]+)(\]*)\]\[([0-9]+)\]/","$1$
svn - 如何防止文件在颠覆中被提交/修改？
我在 repo 中有一个文件，我不想让任何人更新。我能做什么？最佳答案你想要svn锁:http://www.linxit.de/svnbook/en/1.2/svn.ref.svn.c.lock
powershell - 修改/转换选择对象中的数据
说我有项目 list 。我想导出到csv，但在此之前我想做一些计算/修改。基本上，设置如下所示: PS C:\Files> gci Directory: C:\Files Mode
Java API 修改
我有一个非常简单的问题 - 是否可以修改 Java API 的源代码，例如Junit，JABX ？我知道这似乎是一个非常愚蠢的问题，但它一直困扰着我一段时间。最佳答案如果您可以掌握源代码，那么请
r - 修改/添加列到嵌套的tibble
我有一个带有变量/列的小标题，其中包括不同形状的小标题列表。我想为其中一个变量中的每个(子)标题添加一个变量/列。例如此类数据 library("tibble") aaa aaa # A tibb
Javascript url 修改
我有几个菜单，可以在单击时向当前链接添加变量。这是一个例子: 1 2 3 x y z 我的问题是，如果我选择“y”2次，它会添加“&cord=y”2次。相反，我希望它替
.net - 修改.NET服务安装程序的安装路径
我有两个项目:一个服务项目和一个服务安装程序项目。服务项目具有适合我的产品的装配信息。它包括公司信息和正确的服务名称。一旦服务实际安装，所有这些似乎都会被忽略。安装服务时，它使用在服务安装程序的ini
perl - 修改$_的时候会出错吗？
以下代码何时可能产生副作用？ @some = map { s/xxx/y/; $_ } @some; perlcritic 将其解释为危险的，因为例如: @other = map { s/xxx/y/
java - 修改.class文件
我想知道以下哪种解决方案更好:我想修改一些 .class 文件，我意识到有两种方法可以做到这一点: 反编译.class文件，修改它，最后再次编译。 - 直接用十六进制编辑器修改。谢谢最佳答案在这
java - 修改 addMouseListener()
这是我的按钮代码 onclick 我希望我的程序等待用户单击一个 JPanel，并且当用户单击 JPanel 时，它应该在控制台上打印其名称。此按钮代码未显示输出 JPopupMenu popu
java - 修改/设置从访问器方法返回的字符串
我正在使用一个具有“getName()”方法的特定 API。 getName() 返回一个字符串。是否可以修改该字符串？ API 中不包含修饰符方法，并且 String getName() 返回的是私

我是一只小鸟

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

ModifyAjaxResponse，修改ajax请求返回值，前后端调试之利器

1、概要

2、尝试

3、Chrome插件

4、总结

5、相关阅读

6、下载

首页

博学

6Ren·AI

商城

ModifyAjaxResponse，修改ajax请求返回值，前后端调试之利器

﻿1、概要

2、尝试

3、Chrome插件

4、总结

5、相关阅读

6、下载

1、概要