Как лучше всего отправить объект в качестве параметра запроса URL-адреса браузера в javascript - PullRequest
Новая
       85

Как лучше всего отправить объект в качестве параметра запроса URL-адреса браузера в javascript

0 голосов
/ 07 мая 2020

Я работаю над проектом в javascript, где пользователь может добавлять несколько фильтров, углубляться в иерархию и т.д. c для поиска данных. После того, как пользователь детализирует, добавляет фильтры и получает некоторые результаты, я хочу, чтобы пользователь мог поделиться этими результатами как URL-адресом с кем-то еще. Теперь поисковый запрос будет сложным объектом, и я хочу отправить этот запрос как часть URL-адреса браузера. Я знаю, что есть несколько способов сделать это. Но каков наилучший способ?

Ниже приведен пример запроса 

{
    "category": 1,
    "categoryDetails": {
        "id": 1,
        "name": "category 321"
    },
    "start": "2020-03-20",
    "end": "2020-05-05",
    "filters": [{
        "key": "viewby",
        "value": "something",
        "label": "something else"
    }, {
        "key": "color",
        "value": "0",
        "label": "black"
    }, {
        "key": "color",
        "value": "1",
        "label": "blue"
    }, {
        "key": "color",
        "value": "2",
        "label": "white"        
    }, {
        "key": "tags",
        "value": "cl",
        "label": "clean"
    }, {
        "key": "tags",
        "value": "wi",
        "label": "winter"
    }]
}

Я знаю, что могу преобразовать объект json в строку и отправить его 

url = `/search?query="{\"category\":1,\"categoryDetails\":{\"id\":1,\"name\":\"category 321\"},\"start\":\"2020-03-20\",\"end\":\"2020-05-05\",\"filters\":[{\"key\":\"viewby\",\"value\":\"something\",\"label\":\"something else\"},{\"key\":\"color\",\"value\":\"0\",\"label\":\"black\"},{\"key\":\"color\",\"value\":\"1\",\"label\":\"blue\"},{\"key\":\"color\",\"value\":\"2\",\"label\":\"white\"},{\"key\":\"tags\",\"value\":\"cl\",\"label\":\"clean\"},{\"key\":\"tags\",\"value\":\"wi\",\"label\":\"winter\"}]}"{\"key\":\"tags\",\"value\":\"winter\",\"label\":\"winter\"}]}"

Или преобразовать его в строку base64 

url = `search?query=ewogICAgImNhdGVnb3J5IjogMSwKICAgICJjYXRlZ29yeURldGFpbHMiOiB7CiAgICAgICAgImlkIjogMSwKICAgICAgICAibmFtZSI6ICJjYXRlZ29yeSAzMjEiCiAgICB9LAogICAgInN0YXJ0IjogIjIwMjAtMDMtMjAiLAogICAgImVuZCI6ICIyMDIwLTA1LTA1IiwKICAgICJmaWx0ZXJzIjogW3sKICAgICAgICAia2V5IjogInZpZXdieSIsCiAgICAgICAgInZhbHVlIjogInNvbWV0aGluZyIsCiAgICAgICAgImxhYmVsIjogInNvbWV0aGluZyBlbHNlIgogICAgfSwgewogICAgICAgICJrZXkiOiAiY29sb3IiLAogICAgICAgICJ2YWx1ZSI6ICIwIiwKICAgICAgICAibGFiZWwiOiAiYmxhY2siCiAgICB9LCB7CiAgICAgICAgImtleSI6ICJjb2xvciIsCiAgICAgICAgInZhbHVlIjogIjEiLAogICAgICAgICJsYWJlbCI6ICJibHVlIgogICAgfSwgewogICAgICAgICJrZXkiOiAiY29sb3IiLAogICAgICAgICJ2YWx1ZSI6ICIyIiwKICAgICAgICAibGFiZWwiOiAid2hpdGUiICAgICAgICAKICAgIH0sIHsKICAgICAgICAia2V5IjogInRhZ3MiLAogICAgICAgICJ2YWx1ZSI6ICJjbCIsCiAgICAgICAgImxhYmVsIjogImNsZWFuIgogICAgfSwgewogICAgICAgICJrZXkiOiAidGFncyIsCiAgICAgICAgInZhbHVlIjogIndpIiwKICAgICAgICAibGFiZWwiOiAid2ludGVyIgogICAgfV0KfQ==

Есть ли что-то лучше? Какие передовые методы используются при этом?

1 Ответ

0 голосов
/ 07 мая 2020

что угодно, но лучше избегать косой черты с использованием функции encodeURI. 

const params = {
    "category": 1,
    "categoryDetails": {
        "id": 1,
        "name": "category 321"
    },
    "start": "2020-03-20",
    "end": "2020-05-05",
    "filters": [{
        "key": "viewby",
        "value": "something",
        "label": "something else"
    }, {
        "key": "color",
        "value": "0",
        "label": "black"
    }, {
        "key": "color",
        "value": "1",
        "label": "blue"
    }, {
        "key": "color",
        "value": "2",
        "label": "white"        
    }, {
        "key": "tags",
        "value": "cl",
        "label": "clean"
    }, {
        "key": "tags",
        "value": "wi",
        "label": "winter"
    }]
};

const url = `/search?query=${encodeURI(JSON.stringify(params))}`;

/search?query=%7B%22category%22:1,%22categoryDetails%22:%7B%22id%22:1,%22name%22:%22category%20321%22%7D,%22start%22:%222020-03-20%22,%22end%22:%222020-05-05%22,%22filters%22:%5B%7B%22key%22:%22viewby%22,%22value%22:%22something%22,%22label%22:%22something%20else%22%7D,%7B%22key%22:%22color%22,%22value%22:%220%22,%22label%22:%22black%22%7D,%7B%22key%22:%22color%22,%22value%22:%221%22,%22label%22:%22blue%22%7D,%7B%22key%22:%22color%22,%22value%22:%222%22,%22label%22:%22white%22%7D,%7B%22key%22:%22tags%22,%22value%22:%22cl%22,%22label%22:%22clean%22%7D,%7B%22key%22:%22tags%22,%22value%22:%22wi%22,%22label%22:%22winter%22%7D%5D%7D

нет разницы между json или base64, просто удобство для вас, они оба закодированы данные.

...