【前端】在浏览器控制台,直接发Ajax请求
我们在日常的开发的过程中,经常需要前端测试发送请求测试一些数据。但是由于一些session,cookie的存在,我们无法在postman上创建一些会话。那么这样,我们就可以在浏览器上直接发送Ajax请求
XMLHttpRequest 是 AJAX 的基础。我们直接利用XMLHttpRequest构建请求。
function ajax(req){
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState===4){
req.success&&req.success(xhr.responseText,xhr.status);
}
}
req.method=req.method?req.method.toUpperCase():'GET';
var data=null;
var url=req.url;
if(req.data){
var arg='';
for(var n in req.data){
arg+=n+'='+encodeURIComponent(req.data[n])+'&'
}
arg=arg.slice(0,-1);
if(req.method==='GET'){
url=url+'?'+arg;
}else{
data=arg;
}
}
if(req.headers){
for(var h in req.headers){
var v=req.headers[h];
xhr.setRequestHeader(h,v);
}
}
xhr.open(req.method,url);
xhr.send(data);
}
// 再进行访问
ajax({url:"https://i.cnblogs.com/api/user",method:"GET",data:{},headers:{},success:function(res){console.log(res)}})

【前端】在浏览器控制台,直接发Ajax请求的更多相关文章
- JS 点击元素发ajax请求 打开一个新窗口
JS 点击元素发ajax请求 打开一个新窗口 经常在项目中会碰到这样的需求,点击某个元素后,需要发ajax请求,请求成功以后,开发需要把链接传给前端(或者说请求成功后打开新窗口),前端需要通过新窗口打 ...
- chrome 等浏览器不支持本地ajax请求的问题
chrome 等浏览器不支持本地ajax请求的问题 XMLHttpRequest cannot load file:///D:/WWW/angularlx/ui-router-test/templat ...
- springmvc 前端 发ajax请求的几种方式
一.传json单值或对象 1.前端 var data = {'id':id,'name':name}; $.ajax({ type:"POST", url:"user/s ...
- [Web 前端] 如何在React中做Ajax 请求?
cp from : https://segmentfault.com/a/1190000007564792 如何在React中做Ajax 请求? 首先:React本身没有独有的获取数据的方式.实际上, ...
- react生命周期函数的应用-----1性能优化 2发ajax请求
知识点1:每次render其实就会将jax的模板生成一个虚拟dom,跟上一个虚拟dom进行比对,通过diff算法找出不同,再更新到真实dom上去. 1性能优化 每次父组件render一次(除了第一次初 ...
- 如何解决chrome 等浏览器不支持本地ajax请求的问题
XMLHttpRequest cannot load file:///D:/WWW/angularlx/ui-router-test/template/content.html. Cross orig ...
- chrome 等浏览器不支持本地ajax请求,的问题
XMLHttpRequest cannot load file:///D:/WWW/angularlx/ui-router-test/template/content.html. Cross orig ...
- 解决火狐浏览器发送jquery的ajax请求无效的问题
今天遇到这样一个问题: 页面在chrome下发送ajax的请求是没有问题的,但是在firfox下无效. 代码大致如下: //前面省略 <form> ..... <button cla ...
- 当可以设置src时,不必发ajax请求,如果没有参数设置src即可
var params = (function(obj){ var string = []; for(var key in obj){ string.push(window.encodeURI(key) ...
随机推荐
- Lepton 无损压缩原理及性能分析
作者:vivo 互联网数据库团队- Li Shihai 本文主要介绍无损压缩图片的概要流程和原理,以及Lepton无损压缩在前期调研中发现的问题和解决方案. 一.从一个游戏开始 1.1 游戏找茬 请拿 ...
- osx系统使用技巧 -- 虚拟机virtualbox
p.p1 { margin: 0; font: 18px Menlo; color: rgba(255, 255, 255, 1); background-color: rgba(102, 130, ...
- CSS进阶内容—盒子和阴影详解
CSS进阶内容 在学习了CSS基本知识之后,我们需要进一步了解CSS,因此写下了这篇文章 当然如果没有学习之前的知识,可以到我的主页中查看之前的文章:秋落雨微凉 - 博客园 CSS三大特性 首先我们先 ...
- Python语法糖,提升编程幸福感!!!
转载请注明出处️ 作者:测试蔡坨坨 原文链接:caituotuo.top/a52bc938.html 大家好,我是测试蔡坨坨. 今天,我们来盘点一下Python中的那些语法糖. 什么是语法糖?语法糖不 ...
- 一个豆瓣电影Top250爬虫
一个爬虫 这是我第一次接触爬虫,写的第一个爬虫实例. https://movie.douban.com/top250 模块 import requests #用于发送请求 import re #使用正 ...
- typescript关于postgres数据库的API封装
文章结构 1 新建 postgres.ts 文件 2 配置文件说明 3 依赖引用说明 4 API使用示例 1 新建 postgres.ts 文件,代码如下: imp ...
- 高级数据结构学习笔记 / Data Structure(updating)
树状数组 查询操作:O(logn) 修改操作:O(logn) #define lowbit(x) (x & -x) int tr[N]; // 树状数组 // 添加c个大小为x的数值 vo ...
- python常用功能模块
路径相关:os.pathlib Windows注册表相关:winreg 系统cpu.内存.线程相关:psutil 文件.文件夹处理:shutil 解析和生成ini文件:ConfigParser:(co ...
- Nuget打包并上传教程
一.准备 1 . 下载 Download NuGet.exe 2 . windows 系统下设置环境变量 path中 或者 在dos 命令窗口下cd转到 nuget.exe 所在目录,这里为了每次使用 ...
- 一文搞懂│php 中的 DI 依赖注入
目录 什么是 DI / 依赖注入 依赖注入出现的原因 简单的依赖注入 高阶的依赖注入 依赖注入的应用 依赖注入高阶优化 什么是 DI / 依赖注入 依赖注入DI 其实本质上是指对类的依赖通过构造器完成 ...