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

21

このserialize() メソッドは、通常はサーバーへの AJAX 要求に使用される URL エンコード文字列を作成するように設計されています。これは、従来の意味でのオブジェクトや配列のように文字列にアクセスできないことを意味します。代わりに、必要な結果を達成するための 2 つのオプションがあります...

（この質問は古いかもしれませんが、元の回答は最初の質問に実際には答えておらず、多くの説明もしていません...）

方法 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コードスニペットです... 

$(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 : 要素値

2 番目の方法は、既に述べたように、値をシリアル化するのではなく、収集しようとしているフォーム要素から値を直接取得することです。val() これは、jQueryメソッドを使用して簡単に実現できます。これにより、セレクターに入力された値が取得されます。

このメソッドは単一の要素を選択する場合は簡単ですが、フォームから複数の要素の値を選択して取得しようとすると、すぐに面倒になる可能性があります...

$("input").val();
于 2014-08-14T00:13:09.003 に答える