Обратная функция $ .param () в JavaScript / jQuery

Question

Имеется следующая форма:

<form>
    <input name="foo" value="bar">
    <input name="hello" value="hello world">
</form>

Я могу использовать конструкцию $.param( .. ) для сериализации формы:

$.param( $('form input') )

=> foo=bar&hello=hello+world

Как я могу десериализовать вышеупомянутую строку с помощью JavaScript и получить обратно хэш?

Например,

$.magicFunction("foo=bar&hello=hello+world")

=> {'foo' : 'bar', 'hello' : 'hello world'}

Ссылка: jQuery.param( obj ).

Answer 1

Есть прекрасная однострочная строка на CSS-хитрости (оригинальный источник от Николас Ортенцио ):

function getQueryParameters(str) {
    return (str || document.location.search).replace(/(^\?)/,'').split("&").map(function(n){return n = n.split("="),this[n[0]] = n[1],this}.bind({}))[0];
}

По-настоящему умная часть заключается в том, как он использует объект this анонимной функции, добавляя пару ключ / значение для каждого из запросов в строке. Тем не менее, есть некоторые возможности для улучшения. Я изменил это немного ниже, со следующими изменениями:

1. Добавлена ​​обработка пустых строк и нестроковый ввод.

2. Обработанные строки в кодировке URI (%40 -> @ и т. Д.).

3. Удалено использование по умолчанию document.location.search, когда вход был пуст.

4. Изменено имя, сделано его более читабельным, добавлены комментарии.

function deparam(str) {
    // Uses an empty 'this' to build up the results internally
    function splitQuery(query) {
        query = query.split('=').map(decodeURIComponent);
        this[query[0]] = query[1];
        return this;
    }

    // Catch bad input
    if (!str || !(typeof str === 'string' || str instanceof String))
        return {};

    // Split the string, run splitQuery on each piece, and return 'this'
    var queries = str.replace(/(^\?)/,'').split('&');
    return queries.map(splitQuery.bind({}))[0];
}

Answer 2

Вот простой и компактный вариант, если вы хотите быстро получить параметры из запроса GET:

function httpGet() {
    var a={},b,i,q=location.search.replace(/^\?/,"").split(/\&/);
    for(i in q) if(q[i]) {b=q[i].split("=");if(b[0]) a[b[0]]=
    decodeURIComponent(b[1]).replace(/\+/g," ");} return a;
}

Преобразует

something?aa=1&bb=2&cc=3

в объект типа

{aa:1,bb:2,cc:3}

Answer 3

Я придумал это решение, которое ведет себя как функция .Net HttpUtility.ParseQueryString.

В результате параметры строки запроса сохраняются в свойствах в виде списков значений, так что qsObj["param"] будетбыть так же, как звонить GetValues("param") в .Net.

Надеюсь, вам понравится.JQuery не требуется.

var parseQueryString = function (querystring) {
    var qsObj = new Object();
    if (querystring) {
        var parts = querystring.replace(/\?/, "").split("&");
        var up = function (k, v) {
            var a = qsObj[k];
            if (typeof a == "undefined") {
                qsObj[k] = [v];
            }
            else if (a instanceof Array) {
                a.push(v);
            }
        };
        for (var i in parts) {
            var part = parts[i];
            var kv = part.split('=');
            if (kv.length == 1) {
                var v = decodeURIComponent(kv[0] || "");
                up(null, v);
            }
            else if (kv.length > 1) {
                var k = decodeURIComponent(kv[0] || "");
                var v = decodeURIComponent(kv[1] || "");
                up(k, v);
            }
        }
    }
    return qsObj;
};

Вот как его использовать:

var qsObj = parseQueryString("a=1&a=2&&b&c=3&d=&=e&");

Для предварительного просмотра результата в консоли просто введите:

JSON.stringify(qsObj)

Вывод:

"{"a":["1","2"],"null":["","b",""],"c":["3"],"d":[""],"":["e"]}"

Answer 4

Это моя версия в Coffeescript. Также работает для URL, как http://localhost:4567/index.html?hello=[%22world%22]&world=hello#/home

getQueryString: (url)->
    return null if typeof url isnt 'string' or url.indexOf("http") is -1

    split = url.split "?"

    return null if split.length < 2 
    path = split[1]

    hash_pos = path.indexOf "#"
    path = path[0...hash_pos] if hash_pos isnt -1

    data = path.split "&"
    ret = {}
    for d in data
      [name, val] = d.split "=" 
      name = decodeURIComponent name
      val = decodeURIComponent val
      try 
        ret[name] = JSON.parse val
      catch error
        ret[name] = val
    return ret

Answer 5

ответов может использовать немного jQuery элегантность:

(function($) {
var re = /([^&=]+)=?([^&]*)/g;
var decodeRE = /\+/g; // Regex for replacing addition symbol with a space
var decode = function (str) {return decodeURIComponent( str.replace(decodeRE, " ") );};
$.parseParams = function(query) {
    var params = {}, e;
    while ( e = re.exec(query) ) {
        var k = decode( e[1] ), v = decode( e[2] );
        if (k.substring(k.length - 2) === '[]') {
            k = k.substring(0, k.length - 2);
            (params[k] || (params[k] = [])).push(v);
        }
        else params[k] = v;
    }
    return params;
};
})(jQuery);

вилка на https://gist.github.com/956897

Answer 6

Создает сериализованное представление массива или объекта (может использоваться как строка запроса URL для запросов AJAX).

<button id='param'>GET</button> 
<div id="show"></div>
<script>
  $('#param').click(function () {
    var personObj = new Object();
    personObj.firstname = "vishal"
    personObj.lastname = "pambhar";
    document.getElementById('show').innerHTML=$.param(`personObj`));
  });
</script>
output:firstname=vishal&lastname=pambhar

Answer 7

Это действительно старый вопрос, но по мере того, как я пришёл - другие люди могут приходить на этот пост, и я хочу немного обновить эту тему. Сегодня не нужно делать нестандартные решения - есть интерфейс URLSearchParams .

var paramsString = "q=URLUtils.searchParams&topic=api";
var searchParams = new URLSearchParams(paramsString);

//Iterate the search parameters.
for (let p of searchParams) {
  console.log(p);
}

Единственное известное мне ограничение - эта функция не поддерживается в IE / Edge.

Answer 8

Вы можете использовать функцию .serializeArray() ( Link ) самого jQuery. Эта функция возвращает массив пары ключ-значение. Пример результата:

[
  { name: "id", value: "1" },
  { name: "version", value: "100" }
]