18

如何使用 jQuery 函数访问已“序列化”的数据？

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

我有这个数据...

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

如何获得'url'的值？- 我试过这个...

console.log(test.url);

但我得到undefined- 我想得到结果"hello+1"

4

4 回答 4

25

serialize 方法仅从表单创建一个 URL 编码的字符串，但这是一个字符串，即您无法获取 url 的值或任何其他值。为此，您需要将字符串解析回一个对象。您可以查看库：https ://github.com/kflorence/jquery-deserialize

但是，如果您简单地选择包含该值的字段并从那里获取它，那将是最好的，即

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

或者，如果您在该字段上有 id 或 class，则可以将其用作选择器。

PS url 的值是“hello 1”，+ 是查询字符串中空格的编码方式。

于 2013-10-20T16:46:01.563 回答
21

该serialize() 方法旨在创建一个 URL 编码字符串，通常用于对服务器的 AJAX 请求。这意味着您不能像传统意义上的对象或数组那样访问字符串，而是有两种选择来实现您想要的结果......

（这个问题可能很老，但最初的答案并没有真正回答最初的问题，也没有给出太多解释......）

方法一：序列化数组

第一种方法也是我的首选方法是使用serializeArray() method，如果您有多个值并且想要获取每个值的值，而不是必须显式选择每个元素来获取值，这可能是一种有用的方法。

如下所示，使用此方法的解决方案会将选定的表单或元素序列化为对象数组，然后可以将其放入单个对象中，并使用函数轻松访问，以便在脚本中需要它们的时间和地点获取值。 ..

//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>

方法2：元素值

如前所述，第二种方法是直接从您尝试收集的表单元素中获取值，而不是序列化值。val() 这可以使用 jQuery方法简单地实现- 这将获取选择器的输入值。

虽然这种方法对于选择单个元素很简单，但在尝试从表单中选择和检索多个元素的值时，它很快就会变得混乱......

$("input").val();
于 2014-08-14T00:13:09.003 回答
4

serialize()函数返回一个字符串，因此您不能像对象一样使用它。

要反序列化字符串，您可以使用 jQuery BBQ$.deparam()函数：

您可以在此处找到示例和文档

源代码在这里

于 2013-10-20T16:52:09.047 回答
2

所以我找到了解决方案。即使您可以通过带有选择器的 Jquery 或纯 JavaScript 直接获取 Input 的值。但是，如果我们一次发送所有这些数据而我们无法设置呢？因此，正如回答的那样，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

甚至还有一种在 javascript 中使用 URL 的新方法，如果您愿意，请进行搜索，您会找到。

于 2019-08-08T12:32:05.617 回答