忙碌的一年又一年,好久没来看我的博客了,充实的时光总是让我成长,这一年又积累了很多新技能新知识新视野,今天好不容易有点空闲,赶紧记录一下刚刚给人解决的小问题吧。
下面直接上我给的解决方案哈:
核心思路就是把参数以post方式传输;用到的具体知识点如下:
- 封装模拟类函数
function HideParams(url,param){
//创建表单
let formDom = document.body.appendChild(document.createElement('form'));
//设置表单提交路径
formDom.action = url;
//处理要提交的参数
for (let property in param)
{
//创建隐藏表单域标签节点,在循环体里动态创建表单域可以实现多参数传输
let hideInput = document.createElement('input');
hideInput.type = 'hidden';
hideInput.name = property;
hideInput.value = param[property];
formDom.appendChild(hideInput);
}
this.eleForm = formDom;
if (!HideParams._initialized)
{
//在模拟类函数的原型链上添加post提交函数,以便调用提交要隐藏的参数
HideParams.prototype.post = function ()
{
this.eleForm.method = 'post';
debugger;//添加一个断点检查隐藏表单域是否创建成功。
this.eleForm.submit();
};
HideParams._initialized = true;
}
}
//最后在你需要触发请求的地方(这里采用点击函数触发)进行调用传参隐藏参数
function touchClick()
{
//location.href = "http://www.baidu.com?user_id=" + "a3is2d"; // 这是我们原来的写法,Url中会带有参数
//下面是调用我封装的类函数发起请求传输参数,这样就不会在url中看到参数信息了,本质就是将参数以post方式传输了,隐藏表单域使我们的节点不影响界面,依旧看不到其中的信息,当然在dom节点中是可以找到这些节点的。
new HideParams('http://www.baidu.com', { user_id: "a3is2d", user_name: '我测试呢' }).post(); // Url中的参数被隐藏
}
测试结果:
可以观察到百度上方地址栏没有带上参数;
如果用下方的方式传参时,跳转到百度以后上面地址栏会带参数:
测试结果: