How to implement jump parameter passing in js

Method 1: window.open()
(Said before) window.open() jump page is to open a new window, which is the same as window.location difference.
The way to obtain parameters for the new page jumped using this method is to use the window.opener attribute to point to the window object of the original page (before jumping). Finally call the data you want to use.
Page a jumps to page b:

<html lang="en">

<head>
  <meta http-equiv="Content-type" content="text/html;charset=utf-8" />
  <title>页面a</title>
</head>

<body>
  <div>我是跳转前的页面a</div>
  <button onclick="goTo()">window.open()</button>
  <script>
    var data = ["abcd", "efg", 111];
    var id = 100001;

    function goTo() {
      window.open("b.html");
    }
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html;charset=utf-8" />
    <title>页面b</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
    <div>我是跳转成功页面！</div>
    <div id="showData"></div>
    <script>
    var data=window.opener.data;
    var id=window.opener.id;
    $("#showData").text(data);
    $("#showData").text(id);
    </script>
</body>

</html>

Method 2: window.location
Use the window.location.href="" attribute to jump, and jump directly to the current page. When we write this URL, we must also write the parameters passed as follows:
window.location.href="b.html?data=data&id=100001"
(? is used to connect the domain name and parameters; & is used to separate the two parameters)
Using window.location.search when accepting parameters on the jump page will return "?" in the URL. "and all parameters after it. Then operate on the passed data.
Page a jumps to page b:

<html lang="en">

<head>
  <title>页面a</title>
  <meta http-equiv="Content-type" content="text/html;charset=utf-8" />
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
  <div>我是跳转前的页面a</div>
  <input id="text1" type="text" />
  <input type="button" value="增加data" onclick="getData()" />
  <button onclick="goTo()">window.location.href</button>
  <script>
    var data = new Array();
    var id = 100001;
    var num = 123;

    function goTo() {
      window.location.href = "b.html?data=" + data + "&id=" + id + "&num=" + num;
      alert("跳转成功");
    }

    //查看并添加传递的data
    function getData() {
      let value = $("#text1").val();
      data.push(value);
      console.log(data);
    }
  </script>
</body>


</html>

On page b, it is relatively simple to receive one parameter, but it may be more troublesome to receive multiple parameters. You need to write a loop. What I specify here is that all the parameters accepted are put into the map, and the value of the map is specified as array.
Of course, you can also write the entire array or whatever, according to your own needs.

<!DOCTYPE html>
<html>

<head>
    <title>页面b</title>
    <meta http-equiv="Content-type" content="text/html;charset=utf-8" />
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
    <div>我是跳转成功页面！</div>
    <div id="showData"></div>
    <div id="showMap"></div>
    <script>
        var map=new Map();
        var receiveData = decodeURI(window.location.search);
        //只有一条数据时
        // var key=data.substring(data.indexOf("?")+1,data.indexOf("="));
        // var value=data.substring(data.indexOf("=")+1);
        // map.set(key,value);

        //多条数据时
        //在后面加个&是为了方便while循环
        receiveData=receiveData.substr(receiveData.indexOf("?")+1)+"&";
        //展示获取到的参数
        $("#showData").text(receiveData);
        while(receiveData!=""){
            let keyEnd=receiveData.indexOf("=");
            let valueStart=keyEnd+1;
            let valueEnd=receiveData.indexOf("&");
            //split()方法可以将字符串转为数组
            map.set(receiveData.substring(0,keyEnd),receiveData.substring(valueStart,valueEnd).split(","));
            //更新数据
            receiveData=receiveData.substr(valueEnd+1);
        }

        //循环输出map
        for(let [key,value] of map.entries()){
            console.log(key+":"+value);
        }
    </script>
</body>

</html>

There is a simpler way

The first page needs to be passed

window.location.href="search-one.html?"+val//跳转到自己需要的文件

Received on page 2

// 接取参数
let num = window.location.search.slice(1);
let arr = decodeURI(num)//使用decode将传递过来的参数进行拆解
console.log(arr);

The second method


//第一个页面事件传值
	<div class="one_child" onclick='tao(${JSON.stringify(res.data[i])})
//条转页面

function tao(s){
	console.log(s);
	let k=JSON.stringify(s)
	console.log(k);
	window.location.href='dianpuxiangqi.html?item='+k
}
//第二个页获取
// 获取URL中的查询字符串部分
var queryString = window.location.search;

// 创建URLSearchParams对象
var params = new URLSearchParams(queryString);

// 获取顶部导航栏中的值
var value = params.get('item');

console.log(value);
let kk=JSON.parse(value)
console.log(kk);

How to implement jump parameter passing in js

Guess you like