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

相关文章
|
2月前
|
缓存 JavaScript 前端开发
高效打造跨平台桌面应用:Electron加载服务器端JS
【9月更文挑战第17天】Electron 是一个基于 Chromium 和 Node.js 的开源框架,允许使用 HTML、CSS 和 JavaScript 构建跨平台桌面应用。加载服务器端 JS 可增强应用灵活性,实现代码复用、动态更新及实时通信。通过 HTTP 请求、WebSocket 或文件系统可实现加载,但需注意安全性、性能和兼容性问题。开发者应根据需求选择合适方法并谨慎实施。
129 3
|
2月前
|
前端开发
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
|
7天前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
Next.js和Nuxt.js在优化CSS和JavaScript加载方面提供了多种策略和工具。Next.js通过代码拆分、图片优化和特定的CSS/JavaScript优化措施提升性能;Nuxt.js则通过代码分割、懒加载、预渲染静态页面、Webpack配置和服务端缓存来实现优化。两者均能有效提高应用性能。
|
14天前
|
JavaScript 前端开发
.js方法参数argument
【10月更文挑战第26天】`arguments` 对象为JavaScript函数提供了一种灵活处理参数的方式,能够满足各种不同的参数传递和处理需求,在实际开发中具有广泛的应用价值。
32 7
|
1月前
|
JavaScript 前端开发 UED
JavaScript 地址信息与页面跳转
JavaScript 地址信息与页面跳转
60 1
|
2月前
|
JavaScript 前端开发
JavaScript基础知识-函数的参数
关于JavaScript函数参数基础知识的介绍。
27 4
JavaScript基础知识-函数的参数
|
2月前
|
JavaScript 前端开发
JavaScript 函数参数
JavaScript 函数参数
31 3
|
1月前
|
JavaScript 前端开发 UED
JavaScript 地址信息与页面跳转
JavaScript 地址信息与页面跳转
37 0
|
2月前
|
前端开发 JavaScript
前端JS截取url上的参数
文章介绍了两种前端JS获取URL参数的方法:手动截取封装和使用URLSearchParams。
49 0
|
3月前
|
JavaScript 前端开发
JavaScript 地址信息与页面跳转及跳转传参
JavaScript 地址信息与页面跳转及跳转传参
34 1