获取url参数转为对象

最新推荐文章于 2024-03-08 10:23:07 发布

牛先森家的牛奶

最新推荐文章于 2024-03-08 10:23:07 发布

阅读量2.1k

点赞数 3

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_42681295/article/details/106908160

版权

JavaScript 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

获取到的url参数转为对象

把字符串转为对象


    // 把字符串转化为对象
    var str = 'id=1&name=zhangsan&age=18&className=2003'
    // {id:1,name:zhangsan,age:18,className:2003}
    // 先把字符串转化为 数组
    var arr = str.split('&');
    // arr = ['id=1','name=zhangsan','age=18','className=2003']

    var obj = {};
    for (var i = 0; i < arr.length; i++) {
      // arr[i].split('=')  ['id',1]
      var newArr = arr[i].split('=');
      // ['id','1']  ['name':'zhangsan']
      obj[newArr[0]] = newArr[1];
    }
    console.log(obj);

把对象转为字符串


   // 把对象转化为字符串
    var obj1 = {
      id: 1,
      name: 'zhangsan',
      age: 18,
      className: 2003
    }
    // 'id=1&name=zhangsan&age=18&className=2003'
    var str1 = '';
    // 遍历对象
    for (var key in obj1) {
      str1 += key + '=' + obj1[key] + '&';
    }
    // 去掉最后一个 & 
    console.log(str1.substr(0, str1.length - 1));

把代码封装为函数调用

封装字符串转为对象函数


    var str = 'id=1&name=fqniu&age=25&workName=frontEnd'
    
    // strUrlObj 为字符串转为对象的函数名
    function strUrlObj(string) {
      // 去掉字符串中的 & 的数组
      let strArray = string.split('&')
      //console.log(strArray)  //["id=1", "name=fqniu", "age=25", "workName=frontEnd"]
      // 定义一个空对象
      let obj = {}
      for (let i = 0; i < strArray.length; i++) {
        // 定义一个新的数组来接收 去掉字符串中的 = 的数组
        let newArray = strArray[i].split('=')
        // console.log(newArray)
        // 然后遍历添加每个数组中对应的数据 添加到对象中
        obj[newArray[0]] = newArray[1]
      }
      return obj
    }
    console.log(strUrlObj(str))
    //{id: "1", name: "fqniu", age: "18",workName: "frontEnd"}

在这里插入图片描述

封装对象转为字符串函数


   var obj = {
      id: 1,
      name: 'fqniu',
      age: 25,
      workName: 'frontEnd'
    }
    
    // objUrlStr 为对象转为字符串的函数名
    function objUrlStr() {
      // 定义一个空的字符串
      let newStr = ''
      // 遍历对象里面的数据
      for (let key in obj) {
        newStr += key + '=' + obj[key] + '&';
      }
      // 记得去掉最后一个 & 
      newStr = newStr.substr(0, newStr.length - 1)
      return newStr
    }

    console.log(objUrlStr(obj))
    // id=1&name=fqniu&age=25&workName=frontEnd

获取url

  location 对象 中的属性和方法
  提供一些属性个方法 操作浏览器地址
  【1】href  获取 或 设置浏览器的地址
  【2】search 获取 或 设置参数
  【3】hash 获取 或 设置 哈希值

  【4】reload() 刷新页面
  【5】replace('地址') 用这个地址替换当前的地址


    // 获取url的参数
    // ?id=1&name=fqniu&age=25&workName=frontEnd  
    // 需要转换为对象 {id: "1", name: "fqniu", age: "18",workName: "frontEnd"}
    var strUrl = location.search;
    // console.log(strUrl)
    // substring(start) 当只有一个 参数的时候 ，表示从start索引位置开始截取到最后
    strUrl = strUrl.substring(1) //截取的是?之后的所有字符
    var arrUrl = strUrl.split('=') //['id','1']
    var objUrl = {}; //把数组转换成对象
    objUrl[arrUrl[0]] = arrUrl[1]; //{id:1}


    // 拿id的属性值 去数据库匹配数据
    var res = goodlist.filter(function (item, index) {
      return item.id == objUrl.id
    })

    // res就是 根据id匹配=拿到的数据
    // 把数据渲染到页面

说个商品详情页和列表页的案例

列表页

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    ul,
    li {
      list-style: none;
    }
    ul {
      display: flex;
      border: 1px solid red;
      justify-content: space-evenly;
      padding: 10px 0;
    }
    ul li {
      width: 24%;
      border: 1px solid #ccc;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 10px 0;
      cursor: pointer;
    }
    ul li img {
      width: 90%;
    }
    ul li p {
      width: 90%;
      margin: 5px;
    }
  </style>
</head>

<body>
  <ul id="goods">
    <!-- <li class="goods1"><img src="../images/g1.jpg">
            <p>姓名：阿联酋美女1号</p>
            <p>价格：20</p>
            <p>年龄：20</p>
        </li> -->
  </ul>
  <script>
    /*
        列表页：主要用来显示一系列商品
        详情页：主要用来显示一个商品的详细信息
        联系：点击列表页中的商品 跳转到 详情页
        商品有 成千上万，但是详情页只有 一个
        详情显示的数据  是根据 我在列表页点击商品 带过去的 参数来决定的
     */

    //  所有的的数据都是 从后台数据库取出来的，假设 goodlist 就是 数据库
    var goodlist = [
      { id: 111, url: '../images/g1.jpg', name: '阿联酋美女1号', price: 1998, age: 20 },
      { id: 22, url: '../images/g2.jpg', name: '阿联酋美女2号', price: 98, age: 18 },
      { id: 3325, url: '../images/g3.jpg', name: '阿联酋美女3号', price: 998, age: 22 },
      { id: 4, url: '../images/g4.jpg', name: '阿联酋美女4号', price: 9.8, age: 24 },
      { id: 5, url: '../images/g3.jpg', name: '阿联酋美女5号', price: 9888, age: 18 }
    ]

    // 循环遍历 数据 ，然后渲染到页面中 
    goodlist.forEach(function (item, index) {
      // 把id的值添加到 li标签 idx 的值
      goods.innerHTML += '<li idx="' + item.id + '" class="goods1"><img src="' + item.url + '">' +
        '<p>姓名：' + item.name + '</p>' +
        '<p>价格：' + item.price + '</p>' +
        '<p>年龄：' + item.age + '</p>' +
        '</li>'
    })
    // 点击商品跳转到 详情页
    // 给每一个商品元素绑定点击事件
    // 先获取元素
    var list = document.getElementsByTagName('li');
    // list.forEach is not a function  报错信息
    // 要么函数名写错
    // 要么list没有这个函数
    // list是伪数组 伪数组不能使用跟数组的方法，所以不能使用forEach
    // list.forEach(function (item, index) {
    //     item.onclick = function () {
    //         console.log(1);
    //     }
    // })
    for (var i = 0; i < list.length; i++) {
      // list[i].idx = i;
      list[i].onclick = function () {
        // 获取标签中的属性 getAttribute
        // console.log(this.getAttribute('idx'));

        // 跳转到详情页 还需要把点击商品中的一些唯一信息传递过去
        open('03.详情页.html?id=' + this.getAttribute('idx'));
        // location.href = '03.详情页.html'
        // location.replace('03.详情页.html')
      }
    }
  </script>
</body>

</html>

详情页

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>商品的详情页</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #box {
      width: 300px;
      height: 300px;
      background: #ccc;
      margin: 0 auto;
    }

    button {
      width: 80px;
      height: 50px;
      background: skyblue;
      border: 0;
      position: fixed;
      right: 0px;
      top: 200px;
    }
  </style>
</head>

<body>
  <div id="box">
    <!-- <div>
      <img src="./images/g1.jpg" alt="">
    </div>
    <p>名字：阿联酋美女1号</p>
    <p>价格：1998</p>
    <p>年龄：20</p> -->
  </div>
  <button id="btn">回到首页</button>
  <script>
    /*
      拿到 列表页传过来的 参数 ，根据参数 去数据库中取对应的数据
    */
    // 相当于数据库的数据
    var goodlist = [
      { id: 111, url: './images/g1.jpg', name: '阿联酋美女1号', price: 1998, age: 20 },
      { id: 222, url: './images/g2.jpg', name: '阿联酋美女2号', price: 98, age: 18 },
      { id: 335, url: './images/g3.jpg', name: '阿联酋美女3号', price: 998, age: 22 },
      { id: 456, url: './images/g4.jpg', name: '阿联酋美女4号', price: 9.8, age: 24 },
      { id: 567, url: './images/g3.jpg', name: '阿联酋美女5号', price: 9888, age: 18 }
    ]

    // 获取url的参数
    var strUrl = location.search; //?id=111&name=阿联酋美女1号  转换为{id:111,name:'阿联酋美女1号}

    // 怎么才能从字符串中 只拿到 111 呢
    // substring(start) 当只有一个 参数的时候 ，表示从start索引位置开始截取到最后
    strUrl = strUrl.substring(1) //截取的是?之后的所有字符
    var arr = strUrl.split('=') //['id','111']
    var obj = {}; //把数组转换成对象
    obj[arr[0]] = arr[1]; //{id:111}
    // 拿id的属性值 去数据库匹配
    var res = goodlist.filter(function (item, index) {
      return item.id == obj.id
    })
    console.log(res)

    // res就是 根据id匹配=拿到的数据
    // 把数据渲染到页面

    var box = document.querySelector('#box')
    console.log(box)
    box.innerHTML = ` <div>
      <img src="${res[0].url}" alt="">
        </div>
        <p>名字：${res[0].name}</p>
        <p>价格：${res[0].price}</p>
        <p> 年龄：${res[0].age}</p>`

    // 回到首页
    var btn = document.querySelector('#btn')
    btn.onclick = function () {
      open('02.商品的列表页.html', '_self')
    }
  </script>

</body>

</html>