web-dev-qa-db-ja.com

$ .ajax（jQueryまたはZepto）を持つオブジェクトの配列をPOSTする方法

ZeptoまたはJqueryの$ .ajaxを持つオブジェクトの配列をPOSTしたいです。どちらも同じ奇妙なエラーを示しますが、私が間違っていることを見つけることができません。

「RestEasy」などのテストクライアントを使用して送信した場合、データはサーバーに保存され、ブラウザーのネットパネルでリクエストが破損していることがわかります。そのため、JSが原因だと思います。

オブジェクトの配列をPOSTのデータプロパティとして送信すると、それらは適切に送信されません。

データオブジェクト：

var postData = [
    { "id":"1", "name":"bob"}
  , { "id":"2", "name":"jonas"}
  ]

要求：

$.ajax({
  url: _saveDeviceUrl
, type: 'POST'
, contentType: 'application/json'
, dataType: 'json'
, data: postData
, success: _madeSave.bind(this)
//, processData: false //Doesn't help
});

ブラウザに表示されるリクエスト本文：

"bob=undefined&jonas=undefined"

これは、jQueryとZeptoの両方がPOSTデータを準備するために使用する$ .paramメソッドを使用することで、より直接見ることができます。

$.param(
  [
    { "id":"1", "name":"bob"}
  , { "id":"2", "name":"jonas"}
  ]
)
// Output: "bob=undefined&jonas=undefined"

したがって、これらのライブラリが複雑な投稿データに対して行う準備は、予想とは異なるようです。

この答えが表示されますが、多くのコンテンツをPOSTしているので、クエリパラメーターとしてデータを送信したくありません。 jQueryを使用して.ajax投稿で配列を送信するにはどうすればよいですか？

JQuery/Zeptoを使用してPOST経由で複数のオブジェクトを送信する正しい方法は何ですか？

$ .ajax（{... data：JSON.stringify（postData）...}）を使用すると、マングルされていないコンテンツが送信されますが、サーバーはこの形式を好みません。

更新：JSON.stringifyが正しくフォーマットされたコンテンツを送信するようです。問題は、サーバー側が必要とするオブジェクトの構造について非常に具体的であるということです。オブジェクトのプロパティを追加または削除すると、一致するプロパティを使用するのではなく、プロセス全体が失敗します。これは、サーバー送信コンテンツをビューモデルとして使用するのは良いことですが、ビューモデルは変更されるため、不便です。 ...依然として最良のソリューションに取り組んでいます。

jqueryajaxrestzepto
44
SimplGy

送信する前にstringifyを確認してください。ライブラリに頼りすぎて、投稿しているcontentTypeに基づいて適切にエンコードすると思いましたが、そうではないようです。

作品：

$.ajax({
    url: _saveAllDevicesUrl
,   type: 'POST'
,   contentType: 'application/json'
,   data: JSON.stringify(postData) //stringify is important
,   success: _madeSave.bind(this)
});

$ .toJSONのようなプラグインを使用するよりも、この方法のほうが好みですが、それでも同じことを実現します。

78
SimplGy

以下を試してください：

$.ajax({
  url: _saveDeviceUrl
, type: 'POST'
, contentType: 'application/json'
, dataType: 'json'
, data: {'myArray': postData}
, success: _madeSave.bind(this)
//, processData: false //Doesn't help
});
15
Ricardo Alvaro Lohmann

edit：ネイティブの JSON.stringify（） メソッドをサポートするようになりました- ほとんどのブラウザ （はい、疑問に思っているならIE8 +でも）。

単純な：

JSON.stringify(yourData)

データを送信する前にJSONでエンコードする必要があります。このようなオブジェクトをPOSTデータとして送信することはできません。

jQuery json plugin を使用してそうすることをお勧めします。その後、jQueryで次のようなものを使用できます。

$.post(_saveDeviceUrl, {
    data : $.toJSON(postData)
}, function(response){
    //Process your response here
}
);
5
Simon

さまざまなタイプの配列を投稿するこの例を確認してください

function PostArray() {
    var myObj = [
        { 'fstName': 'name 1', 'lastName': 'last name 1', 'age': 32 }
      , { 'fstName': 'name 2', 'lastName': 'last name 1', 'age': 33 }
    ];

    var postData = JSON.stringify({ lst: myObj });
    console.log(postData);

    $.ajax({
        type: "POST",
        url: urlWebMethods + "/getNames",
        data: postData,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            alert(response.d);
        },
        failure: function (msg) {
            alert(msg.d);
        }
    });
}

C＃でWebMethodを使用している場合、このようなデータを取得できます

[WebMethod]
    public static string getNames(IEnumerable<object> lst)
    {
        string names = "";
        try
        {
            foreach (object item in lst)
            {
                Type myType = item.GetType();
                IList<PropertyInfo> props = new List<PropertyInfo>(myType.GetProperties());

                foreach (PropertyInfo prop in props)
                {
                    if(prop.Name == "Values")
                    {
                        Dictionary<string, object> dic = item as Dictionary<string, object>;
                        names += dic["fstName"];
                    }
                }
            }
        }
        catch (Exception ex)
        {
             names = "-1";
        }
        return names;
    }

$。ajaxを含むオブジェクトの配列をC＃WebMethodにPOST の例

0
Nuno Dias