JavaScript はリンク ジャンプを使用して配列オブジェクト データ型のメソッドを渡します

フロントエンドでは、パラメータを渡すためにリンクを使用する必要がある場合があります。基本的なデータ型の転送は比較的簡単ですが、参照データ型を渡すのはより面倒です。ただし、sessionStorage または localStorage を使用してページ パラメータの転送を実現することもできます。の場合、多端末パラメータ転送が実現できません。例えば、PC側のページでQRコードが生成され、携帯電話側で開いて閲覧する必要がありますが、携帯電話からのリクエストが必要な場合があります。入力時にバックグラウンドからデータを取得し、このときにパラメーターが使用されます。ページ間で参照データ型を渡す方法を共有します。これにより、QR コードのパラメーターの受け渡しも実現できます。

まず、基本的なデータ型の通常の転送について理解します。

ジャンプ パラメータの転送とは、ページがジャンプするときに URL パスにデータを結合し、一緒に別のページにジャンプすることを指します。ここでの結合に注意してください。戻り値は文字列の形式になります。

JavaScriptのジャンプページメソッド

window.location.href = 'http://www.baidu.com'; // 通过改变location.href来实现页面跳转 常用
window.location.replace('http://www.baidu.com'); // 通过location.replace替换当前页面路径来实现页面跳转
window.location.assign('http://www.baidu.com'); // 通过location.assign加载新文档来实现页面跳转

違いに注意してください:
href は現在のページにジャンプしますが、ブラウザの戻るボタンは引き続きクリックできます。
置換は現在のページのパスを置き換え、ブラウザの戻るボタンは有効になりません
。URL は次のとおりである必要があります。絶対パス。それ以外の場合、ページはリダイレクトできません。IE8 より前のバージョンでは、URL の長さが 2083 文字を超えると、location.assign() メソッドの呼び出しは失敗します。また、一部のブラウザでは、次の後に location.assign() を呼び出します。ページが読み込まれたため、ページがちらつく可能性があります

パラメータを渡すJavaScriptルート

ブラウザのアドレスリンクを参照してルーティングパラメータを使用することができます。 「 ? 」以降のパラメータは「 & 」で区切られています。

// 单传值
window.location.href = 'http://www.baidu.com?1';
window.location.replace('http://www.baidu.com?1');
window.location.assign('http://www.baidu.com?1');
// 传键值对
window.location.href = 'http://www.baidu.com?id=1';
window.location.replace('http://www.baidu.com?id=1');
window.location.assign('http://www.baidu.com?id=1');
// 多个参数
window.location.href = 'http://www.baidu.com?id=1&value=asdf';
window.location.replace('http://www.baidu.com?id=1&value=asdf');
window.location.assign('http://www.baidu.com?id=1&value=asdf');

これらは単純なデータ型です。参照データ型を渡す必要がある場合、またはデータに中国語の文字が含まれている場合は、最初に JSON.stringify() メソッドを使用してデータを変換する必要があります。

let str = '张三';
let json_str = JSON.stringify(str);// 转换为json格式
//
window.location.href = encodeURL('http://www.baidu.com?id=1&value=' + json_str);
//
window.location.replace(encodeURL('http://www.baidu.com?id=1&value=' + json_str));
//
window.location.assign(encodeURL('http://www.baidu.com?id=1&value=' + json_str));

JavaScript ルーティングはパラメータを受け取ります

let str = window.location.search; //获取链接中传递的参数
let params = str.substring(str.indexOf("=") + 1);
dataJson = JSON.parse(decodeURI(params));
console.log("dataJson :", dataJson);

// 或者
let data = new URLSearchParams(window.location.search);
console.log(JSON.parse(data.get('id')));
console.log(JSON.parse(data.get('value')));

ここでは、より簡単な 2 番目の方法をお勧めします。

転送オブジェクト

方法は上で説明しましたが、以下は例です:
ページ ジャンプのデモ:

let arr = {
    
    
	name: 'zz',
	sex: '男',
	age: 11
}
let datajson = JSON.stringify(arr);
// 跳转页面，这里需要大家自己将页面路径进行修改
window.location.href = encodeURI('accept.html?datajson=' + datajson);

パラメーターのデモを受信します。

let dataJson;
let str = window.location.search; //获取链接中传递的参数
let arr = str.substring(str.indexOf("=") + 1);
dataJson = $.parseJSON(decodeURI(arr));
console.log("dataJson :", dataJson);
// 或者

let data = new URLSearchParams(window.location.search);
console.log(JSON.parse(data.get('datajson')));

効果：