js实现页面跳转与参数获取加载

简介: 作者主页:https://www.couragesteak.com/

1 页面跳转

location.replace("/search?q=" + keyword);

2 获取请求详细信息

let url = window.location.href; //获取当前窗口的Url;  结果:http://127.0.0.1:8081/search?q=Python
let host = window.location.host;//获取当前窗口的主机名;   结果:127.0.0.1:8081
let port = window.location.port; //获取当前窗口的端口; 结果:8081
let pathname = window.location.pathname;//获取当前窗口的路径 ; 结果:/search
let URL = document.URL;//获取当前文档的Url;结果:http://127.0.0.1:8081/search?q=Python
let search1 = window.location.search;//获取参数;结果:?q=Python
let origin = window.location.origin;//获取来源地址;结果:http://127.0.0.1:8081
let protocol = window.location.protocol;//获取协议;结果:http:

console.log("-------------")
console.log(url)
console.log(host)
console.log(port)
console.log(pathname)
console.log(URL)
console.log(search1)
console.log(origin)
console.log(protocol)

3 获取携带参数

函数

//key(需要检索的键) url(传入的需要分割的url地址,例:?id=2&age=18)
function getSearchString(key, Url) {
    var str = Url;
    str = str.substring(1, str.length); // 获取URL中?之后的字符(去掉第一位的问号)
    // 以&分隔字符串,获得类似name=xiaoli这样的元素数组
    var arr = str.split("&");
    var obj = new Object();
    // 将每一个数组元素以=分隔并赋给obj对象
    for (var i = 0; i < arr.length; i++) {
        var tmp_arr = arr[i].split("=");
        obj[decodeURIComponent(tmp_arr[0])] = decodeURIComponent(tmp_arr[1]);
    }
    return obj[key];
}

调用

let search = window.location.search;
let q = getSearchString('q', search); //结果:云原生
console.log(q)
$("#keyword").val(q)

参考地址:
https://blog.csdn.net/Neil_clip/article/details/120972562

相关文章
|
6天前
|
JavaScript 前端开发
JavaScript 地址信息与页面跳转及跳转传参
JavaScript 地址信息与页面跳转及跳转传参
15 1
|
6天前
|
JavaScript 前端开发 UED
JavaScript 地址信息与页面跳转
JavaScript 地址信息与页面跳转
|
16天前
|
编解码 缓存 算法
Three.js如何降低3D模型的大小以便更快加载
为加快600MB的3D模型在Three.js中的加载速度,可采用多种压缩方法:1) 减少顶点数,使用简化工具或LOD技术;2) 压缩纹理,降低分辨率或转为KTX2等格式;3) 采用高效文件格式如glTF 2.0及draco压缩;4) 合并材质减少数量;5) 利用Three.js内置优化如BufferGeometry;6) 按需分批加载模型;7) Web Workers后台处理;8) 多模型合并减少绘制;9) 使用Texture Atlas及专业优化工具。示例代码展示了使用GLTFLoader加载优化后的模型。
64 12
|
6天前
|
JavaScript
js怎样控制浏览器前进、后退、页面跳转
js怎样控制浏览器前进、后退、页面跳转
13 0
|
12天前
|
资源调度 JavaScript 前端开发
如何大幅减少 Vue.js 中的包大小和加载时间,提升用户体验!
如何大幅减少 Vue.js 中的包大小和加载时间,提升用户体验!
|
1月前
|
JavaScript 前端开发 网络架构
JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 (剩余参数)、拓展运算符、对象与数组的解构赋值】
JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 (剩余参数)、拓展运算符、对象与数组的解构赋值】
39 1
|
27天前
|
监控 JavaScript 前端开发
Node中的AsyncLocalStorage 使用问题之Node.js内部模块和外部模块的加载的问题如何解决
Node中的AsyncLocalStorage 使用问题之Node.js内部模块和外部模块的加载的问题如何解决
|
2月前
|
JavaScript
JS获取浏览器地址栏的多个参数值的任意值
JS获取浏览器地址栏的多个参数值的任意值
28 3
|
1月前
|
存储 资源调度 前端开发
JavaScript 使用axios库发送 post请求给后端, 给定base64格式的字符串数据和一些其他参数, 使用表单方式提交, 并使用onUploadProgress显示进度
使用 Axios 发送包含 Base64 数据和其他参数的 POST 请求时,可以通过 `onUploadProgress` 监听上传进度。由于整个请求体被视为一个单元,所以进度可能不够精确,但可以模拟进度反馈。前端示例代码展示如何创建一个包含 Base64 图片数据和额外参数的 `FormData` 对象,并在上传时更新进度条。后端使用如 Express 和 Multer 可处理 Base64 数据。注意,实际进度可能不如文件上传精确,显示简单加载状态可能更合适。
136 0
|
1月前
命令行加载特效 【cli-spinner.js】 实用教程
命令行加载特效 【cli-spinner.js】 实用教程
17 0