Как получить доступ к сериализованным данным jQuery?

Как я могу получить доступ к данным, которые были "сериализованы" с помощью функции jQuery?

var test = $("form").serialize();

У меня есть эти данные...

url=hello+1&title=hello+1&content=abc

Как я могу получить значение "url"? - Я пробовал это...

console.log(test.url); 

Но я получаю undefined - я хочу получить результат как "hello+1"

Ответ 1

Метод сериализации только создает строку с кодировкой URL из формы, но это строка, т.е. вы не можете получить значение url или любое другое значение. Для этого вам нужно проанализировать строку в объекте. Вы можете проверить библиотеку: https://github.com/kflorence/jquery-deserialize

Однако было бы лучше, если бы вы просто выбрали поле, содержащее это значение, и получите его оттуда, т.е.

jQuery('input[name="url"]').val();

или если у вас есть идентификатор или класс в этом поле, вы можете использовать его как селектор.

P.S. Значение url равно "hello 1", как + пробелы кодируются в строках запроса.

Ответ 2

Метод serialize() предназначен для создания строки с кодировкой URL, обычно используемой для запросов AJAX на сервер. Это означает, что вы не можете получить доступ к строке как к объекту или массиву в традиционном смысле, вместо этого у вас есть два варианта для достижения желаемого результата...

(Этот вопрос может быть старым, но исходные ответы не отвечают на начальный вопрос и не дают много объяснений...)

Способ 1: Сериализовать массив

Первый метод и мой предпочтительный - использовать метод serializeArray() , это может быть полезным методом, если у вас есть несколько значений и вы хотите получить значение каждого, вместо того, чтобы явно выбирать каждый элемент, чтобы получить там значение.

Решение, подобное ниже, с использованием этого метода будет сериализовать выбранную форму или элемент в массив объектов, которые затем могут быть помещены в один объект и легко доступны с помощью функции для получения значений, когда и где они вам понадобятся ваш script...

//Serialize the Form
var values = {};
$.each($("form").serializeArray(), function (i, field) {
    values[field.name] = field.value;
});

//Value Retrieval Function
var getValue = function (valueName) {
    return values[valueName];
};

//Retrieve the Values
var url = getValue("url");

Вот фрагмент кода JSFiddle...

$(document).ready(function () {
    var values = {};

    $.each($("form").serializeArray(), function (i, field) {
        values[field.name] = field.value;
    });

    var getValue = function (valueName) {
        return values[valueName];
    };

    var first = getValue("FirstName");
    var last = getValue("LastName");

    $("#results").append(first + " & ");
    $("#results").append(last);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<form action="">
    First name:
    <input type="text" name="FirstName" value="Foo" />
    <br>Last name:
    <input type="text" name="LastName" value="Bar" />
    <br>
</form>
        
<div id="results"></div>

Ответ 3

Функция

serialize() возвращает строку, поэтому вы не можете использовать ее как объект.

Чтобы десериализовать строку, вы можете использовать функцию jQuery BBQ $.deparam():

Здесь можно найти пример и документацию

Исходный код здесь

Ответ 4

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

Мое решение:

var $form = $('#example_form');
var data = $form.serialize();

console.log(data);

var fakeURL = "http://www.example.com/t.html?" +  data;
var createURL = new URL(fakeURL);

Отсюда вы можете получить значения из созданного вами URL:

createURL.searchParams.get('my_parameter_url')

Кроме того, вы можете взять, установить и среди прочего. Вот ссылка на документацию:

https://developer.mozilla.org/en-US/docs/Web/API/URL/URL

Существует даже новый способ работы с URL в javascript, если вы хотите, выполните поиск, и вы найдете.