如何访问jQuery序列化数据？

Question

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

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

我有这个数据......

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

我怎样才能获得'url'的值？ - 我试过这个......

console.log(test.url); 

但我知道undefined- 我希望得到结果"hello+1"

Answer 1

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

但是,最好只选择包含该值的字段并从那里获取,即

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

或者如果您在该字段上有id或类,则可以将其用作选择器.

PS url的值是"hello 1",+只是空格在查询字符串中的编码方式.

Answer 2

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

(这个问题可能已经过时了,但原始答案并没有真正回答最初的问题,他们也没有给出太多解释......)

方法1:序列化数组

第一种方法和我首选的serializeArray() 方法是使用该方法,如果您有多个值并希望获取每个值的值,这可能是一个有用的方法,而不是必须显式选择每个元素来获得该值.

使用此方法的解决方案(如下所示)会将选定的表单或元素序列化为一个对象数组,然后可以将这些对象放入单个对象中,并使用函数轻松访问,以便在脚本中随时随地获取值. ..

//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:元素值

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

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

$("input").val();