1. ホーム
  2. jquery

[解決済み】Jquery Ajax ウェブサービスにJSONを投稿する

2022-04-04 09:30:22

質問

JSONオブジェクトをasp.netのウェブサービスに投稿しようとしています。

私のjsonは次のようなものです。

var markers = { "markers": [
  { "position": "128.3657142857143", "markerPosition": "7" },
  { "position": "235.1944023323615", "markerPosition": "19" },
  { "position": "42.5978231292517", "markerPosition": "-3" }
]};

json2.jsを使って、JSONオブジェクトを文字列化します。

そして、jquery を使ってウェブサービスに投稿しています。

  $.ajax({
        type: "POST",
        url: "/webservices/PodcastService.asmx/CreateMarkers",
        data: markers,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(data){alert(data);},
        failure: function(errMsg) {
            alert(errMsg);
        }
  });

以下のようなエラーが発生します。

無効なJSONプリミティブ

この件に関する投稿をたくさん見ましたが、本当によくある問題のようで、何をやっても問題が解決しません。

サーバーに投稿される内容をfirebugで確認すると、以下のように表示されます。

markers%5B0%5D%5Bposition%5D=128.3657142857143&markers%5B0%5D%5BmarkerPosition%5D=7&markers%5B1%5D%5Bposition%5D=235. 1944023323615&markers%5B1%5D%5BmarkerPosition%5D=19&markers%5B2%5D%5Bposition%5D=42.5978231292517&markers%5B2%5D%5BmarkerPosition%5D=-3

呼び出されている私のウェブサービス関数は。

[WebMethod]
public string CreateMarkers(string markerArray)
{
    return "received markers";
}

解決方法は?

json2.jsを使ってデータを文字列化するとのことですが、POSTされたデータはURLEncoded JSONのようです。 既にご覧になったかも知れませんが 無効なJSONプリミティブに関するこの記事 は、JSONがURLEncodedである理由をカバーしています。

私は 知らせる に対して 生の、手動でシリアライズした JSON 文字列をメソッドに渡します。 . ASP.NETはリクエストのPOSTデータを自動的にJSONデシリアライズするので、手動でシリアライズしてJSON文字列をASP.NETに送信すると、実際にはJSONシリアライズされた文字列をJSONシリアライズする必要が出てきてしまいます。

もう少し、この線に沿ったものを提案したい。

var markers = [{ "position": "128.3657142857143", "markerPosition": "7" },
               { "position": "235.1944023323615", "markerPosition": "19" },
               { "position": "42.5978231292517", "markerPosition": "-3" }];

$.ajax({
    type: "POST",
    url: "/webservices/PodcastService.asmx/CreateMarkers",
    // The key needs to match your method's input parameter (case-sensitive).
    data: JSON.stringify({ Markers: markers }),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(data){alert(data);},
    error: function(errMsg) {
        alert(errMsg);
    }
});

無効なJSONプリミティブの問題を回避する鍵は、jQueryにJSON文字列を渡して data jQueryがデータをURLエンコードしようとしないように、JavaScriptオブジェクトではなく、パラメータを使用します。

サーバーサイドでは、メソッドの入力パラメータを、渡すデータの形状に合わせます。

public class Marker
{
  public decimal position { get; set; }
  public int markerPosition { get; set; }
}

[WebMethod]
public string CreateMarkers(List<Marker> Markers)
{
  return "Received " + Markers.Count + " markers.";
}

のように配列で受け取ることもできます。 Marker[] Markers を使用することをお勧めします。 ASMX ScriptServicesが使用するデシリアライザ(JavaScriptSerializer)はかなり柔軟で、入力データを指定したサーバー側のタイプに変換するためにできる限りのことをします。