jQuery 如何访问jQuery序列化数据？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19479924/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to access jQuery serialized data?
提问by laukok
How can I access the data that has been 'serialized' using the jQuery function?
如何使用 jQuery 函数访问已“序列化”的数据？
var test = $("form").serialize();
I have this data...
我有这个数据...
url=hello+1&title=hello+1&content=abc
How can I get the value of 'url'? - I tried this...
如何获取'url'的值？- 我试过这个...
console.log(test.url);
But I get undefined- I want to get the result as "hello+1"
但我得到undefined- 我想得到结果"hello+1"
回答by Tsanyo Tsanev
The serialize method only creates a URL encoded string from a form, but this is a string, i.e you can not get the value of url or any other value. To do so you need to parse back the string into an object. You can check library out: https://github.com/kflorence/jquery-deserialize
serialize 方法仅从表单创建一个 URL 编码的字符串，但这是一个字符串，即您无法获取 url 的值或任何其他值。为此，您需要将字符串解析回一个对象。您可以查看库：https: //github.com/kflorence/jquery-deserialize
However it would be best if you simply select the field containing that value and get it from there, i.e.
但是，如果您只是选择包含该值的字段并从那里获取它，那将是最好的，即
jQuery('input[name="url"]').val();
or if you have an id or class on that field, you can use it as a selector.
或者如果您在该字段上有一个 id 或类，您可以将其用作选择器。
P.S. The value of url is "hello 1" the + is just how spaces are encoded in query strings.
PS url 的值是“hello 1”，+ 就是查询字符串中空格的编码方式。
回答by Kolors
The serialize()methodis designed to create a URL encoded string, usually used for AJAX requests to the server. This means you can't access the string like an object or array in the traditional sense, instead you have two options for achieving the result you want...
该serialize()方法旨在创建一个 URL 编码的字符串，通常用于对服务器的 AJAX 请求。这意味着您不能像传统意义上的对象或数组那样访问字符串，而是有两种选择来实现您想要的结果......
(This question might be old but the original answers don't really answer the initial question and nor do they give much explanation...)
（这个问题可能很旧，但原始答案并没有真正回答最初的问题，也没有给出太多解释......）
Method 1 : Serialize Array
方法一：序列化数组
The first method and my preferred one, is to use the serializeArray()method, this can be a useful method if you have several values and want to get the value of each, rather than having to explicitly select each element to get there value.
第一种方法也是我的首选方法是使用serializeArray()method，如果您有多个值并且想要获取每个值的值，而不必显式选择每个元素来获取值，这可能是一个有用的方法。
A solution, like below, using this method will serialize the selected form or element into an array of objects which can then be put into a single object and accessed easily using a function to get the values when and where you need them in your 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");
Here's a JSFiddleCode Snippet...
这是一个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>Method 2 : Element Value
方法二：元素值
The second method, as already mentioned is to simply get the value directly from the form element that you are trying to collect, rather than serialising the value. This can simply be achieve using the jQuery val()method- this will get the entered value of the selector.
如前所述，第二种方法是直接从您尝试收集的表单元素中获取值，而不是序列化该值。这可以简单地使用 jQueryval()方法来实现- 这将获得选择器的输入值。
While this method is simple for selecting a single element, it can quickly become messy when trying to select and retrieve the value of several elements from a form...
虽然此方法对于选择单个元素很简单，但在尝试从表单中选择和检索多个元素的值时，它很快就会变得混乱……
$("input").val();
回答by marquez
serialize()function returns a string so you can't use it like an object.
serialize()函数返回一个字符串，所以你不能像对象一样使用它。
To deserialize a string you can use the jQuery BBQ $.deparam()function:
要反序列化字符串，您可以使用 jQuery BBQ$.deparam()函数：
You can find example and documentation here
回答by Mateus Gon?alves
So I found a solution to this. Even though you can get the value of Input directly through Jquery with the selector or through pure javascript. But what if we are sending all this data at once and we have no way to set it? So, as it was answered, The serialize method only creates a URL encoded string from a form, from this we can work with URL, we can create a false URL then.
所以我找到了解决方案。即使您可以直接通过带有选择器的 Jquery 或通过纯 javascript 获取 Input 的值。但是如果我们一次发送所有这些数据并且我们无法设置它怎么办？因此，正如回答的那样，序列化方法仅从表单创建一个 URL 编码的字符串，由此我们可以使用 URL，然后我们可以创建一个错误的 URL。
My solution:
我的解决方案：
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);
From this you can get values ??from the URL you created:
从这里你可以从你创建的 URL 中获取值：
createURL.searchParams.get('my_parameter_url')
Also, you can take, set, and among other things. Here is the link to the documentation:
此外，您还可以进行拍摄、设置等操作。这是文档的链接：
https://developer.mozilla.org/en-US/docs/Web/API/URL/URL
https://developer.mozilla.org/en-US/docs/Web/API/URL/URL
There is even a new way to work with URL in javascript, if you want, do a search and you will find.
甚至还有一种在 javascript 中使用 URL 的新方法，如果您愿意，请进行搜索，您会找到。
