MW211 EXIT

devlog
GETパラメータ(3)いろいろ
2022年12月17日
いろいろあるようだ。

GETパラメータを書き換える方法。
┌──────────────────────────────────────┐
│history.pushState(null, null, '?key1=val1&key2=val2');                      │
├──────────────────────────────────────┤
│history.pushState(null, null, location.pathname + '?key1=val1&key2=val2');  │
├──────────────────────────────────────┤
│history.pushState(null, null, '?' + new URLSearchParams({                   │
│    'key1'  :'val1',                                                        │
│    'key2'  :'val2',                                                        │
│}).toString());                                                             │
├──────────────────────────────────────┤
│history.pushState(null, null, location.pathname + '?' + new URLSearchParams({
│    'key1'  :'val1',                                                        │
│    'key2'  :'val2',                                                        │
│}).toString());                                                             │
├──────────────────────────────────────┤
│const url = new URL(location.href.replace(/\?.*$/, ''));                    │
│url.searchParams.set('key1', 'val1');  // .append()でもOK                   │
│url.searchParams.set('key2', 'val2');  // .append()でもOK                   │
│history.pushState(null, null, url);                                         │
└──────────────────────────────────────┘

GETパラメータをクリアする方法。
┌──────────────────────────────────────┐
│history.pushState(null, null, location.pathname);                           │
├──────────────────────────────────────┤
│history.pushState(null, null, location.href.replace(/\?.*$/, ''));          │
└──────────────────────────────────────┘
分類:JavaScript
JavaScript/GETパラメータ(2)生成
2022年12月16日
(jQueryを用いているが)「id="id"」の値が変わった場合に
表示中のURLに埋め込む方法。
┌──────────────────────────────────────┐
│$('#id').on('change', function() {                                          │
│    //----------------------------------------------------------------------│
│    //  (案1)リロードする場合                                               │
│    //----------------------------------------------------------------------│
│    if ($('#id').val() == '') {                                             │
│        location.href = location.href.replace(/\?.*$/, '');                 │
│    } else {                                                                │
│        location.href = location.href.replace(/\?.*$/, '')                  │
│                      + '?id=' + encodeURI($('#id').val());                 │
│    }                                                                       │
│    //----------------------------------------------------------------------│
│    //  (案2)URLだけ書き換える場合                                          │
│    //----------------------------------------------------------------------│
│    if ($('#id').val() == '') {                                             │
│        history.pushState(null, null, location.pathname);                   │
│    } else {                                                                │
│        history.pushState(null, null, `?id=${encodeURI($('#id').val())}`);  │
│    }                                                                       │
│    //----------------------------------------------------------------------│
│});                                                                         │
└──────────────────────────────────────┘
これで、値を変更した場合に、URLも変化するので
そのURLを用いることができる。
分類:JavaScript
JavaScript/GETパラメータ(1)読込
2022年12月15日
URLの「~?id=値」もしくは「~&id=値」を読み込む関数。
┌──────────────────────────────────────┐
│function GetGetParam() {                                                    │
│    const params = location.search.substring(1).split('&');                 │
│    for (let i = 0; params[i]; i++) {                                       │
│        let kv = params[i].split('=');                                      │
│        if (kv[0] == 'id') {                                                │
│            return decodeURI(kv[1]);                                        │
│        }                                                                   │
│    }                                                                       │
│    return null;                                                            │
│}                                                                           │
└──────────────────────────────────────┘
これを表示時(初期処理)にて読み込んで処理を行えばよい。(以下はjQueryの場合)
┌──────────────────────────────────────┐
│$(function() {                                                              │
│    const param = GetGetParam();                                            │
│    if (param) {                                                            │
│        // 処理(param);                                                     │
│    }                                                                       │
│});                                                                         │
└──────────────────────────────────────┘
分類:JavaScript
前へ 1 次へ