html 跳转页面传参、点击获取DOM参数

 

虽然现在前端框架已经很多，尤其是几大流行框架，比如Vue，React，Angular 等，已经去DOM化，但是还是有很多公司仍在使用 HTML + CSS + JS 。

这里记载一下用到的HTML传参 问题。

一、页面之间传参：

HTML 页面跳转可以直接通过，给 href 赋值

      $(document).on('click', '.detail', function() {
        window.location.href = 'scorePage.html'
      })

? 传参

      $(document).on('click', '.detail', function() {
        window.location.href = `scorePage.html?id=${id}&name=${name}`;
      })

在新页面获取参数：

let url = location.search;
console.log(url); // ?id=44&name=guozheng

获取的参数要转化成json格式：封装一个函数

function getParams() {
  let obj = new Object();

  let url = location.search;
  if(url.indexOf('?') != -1) {
    let str = url.substr(1);
    let arrs = str.split('&');
    arrs.map(item => {
      obj[item.split('=')[0]] = item.split('=')[1]
    })
  }
  return obj;
}

这里返回的 obj 就是包含所有 参数的 一个对象。

二、获取 DOM 自定义的 属性值。

HTML 结构：

  <div class="box"></div>

js 代码：

这里模仿的是 后台获取数据 然后 拼接 DOM 结构，将数据已自定义属性的方式 绑定到 DOM上。

    let obj = {
      name: 'guozheng',
      id: 34,
      age: 27,
      sex: 'man'
    }

    let info = JSON.stringify(obj);

    let str = `<div id="test" class="title-name" name='guo' data-info=${info}>法律价值度</div>`

    $('.box').append(str);

    $('#test').on('click', function() {
      let info2 = $(this).attr('data-info');
      console.log(JSON.parse(info2)); // {name: "guozheng", id: 34, age: 27, sex: "man"}
    })