方法1：序列化数组

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或类，则可以将其用作选择器。

P.S。 url的值是“hello 1”，+只是空格在查询字符串中的编码方式。

Answer 2

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

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

方法1：序列化数组

第一种方法和我首选的方法是使用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~~ 代码片段......

＆＃13;

$(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);
});

＆＃13;

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

＆＃13;

方法2：元素值

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

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

$("input").val();

Answer 3

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

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

您可以找到example and documentation here

Source code here

Answer 4

因此，我找到了解决方案。即使您可以直接使用选择器通过Jquery或通过纯JavaScript获取Input的值。但是，如果我们一次发送所有这些数据而又无法设置它怎么办？因此，正如答案所说，serialize方法仅从表单创建URL编码的字符串，由此我们可以使用URL，然后可以创建错误的URL。

我的解决方案：

<mat-form-field class="input-style">
    <input matInput #inputRef [(ngModel)]="name">
    {{value}}
</mat-form-field>
<button mat-icon-button color="primary">
    <mat-icon (click)="inputRef.select()">edit</mat-icon>
</button>

由此您可以从创建的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);

此外，您还可以进行拍摄，设置和其他操作。这是文档的链接：

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

甚至还有一种使用javascript中的URL的新方法，如果需要的话，进行搜索即可找到。

如何访问jQuery序列化数据？

4 个答案:

方法1：序列化数组

方法2：元素值