Как получить доступ к сериализованным данным 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, если вы хотите, выполните поиск, и вы найдете.