原生js请求ajax时关于隐藏url上的参数处理方法记录

忙碌的一年又一年，好久没来看我的博客了，充实的时光总是让我成长，这一年又积累了很多新技能新知识新视野，今天好不容易有点空闲，赶紧记录一下刚刚给人解决的小问题吧。

 

 下面直接上我给的解决方案哈：

核心思路就是把参数以post方式传输；用到的具体知识点如下：

1. 封装模拟类函数

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中的参数被隐藏
}

测试结果：

可以观察到百度上方地址栏没有带上参数；

如果用下方的方式传参时，跳转到百度以后上面地址栏会带参数：

测试结果：