jquery Ajax jsonをWebサービスに投稿する

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

私の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すると、次のようになります。

マーカー％5B0％5D％5Bposition％5D = 128.3657142857143＆マーカー％5B0％5D％5BmarkerPosition％5D = 7＆マーカー％5B1％5D％5Bposition％5D = 235.1944023323615＆マーカー％5B1％5D％5BmarkerPosition％5D = 19＆マーカー％5B2％5D％5Bposition％ 5D = 42.5978231292517＆markers％5B2％5D％5BmarkerPosition％5D = -3

呼び出されている私のwebservice関数は：

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

あなたは、データを文字列化するjson2.jsを使用して言及したが、POSTされたデータURLエンコードJSONのように見えるあなたはすでにそれを見ているかもしれませんが、無効なJSONプリミティブについては、この記事 JSONがURLエンコードされている理由のカバー。

手動でシリアル化された生の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);},
    failure: function(errMsg) {
        alert(errMsg);
    }
});

無効なJSONプリミティブの問題を回避するための鍵はdata、jQueryがデータのURLEncodeを試行しないように、JavaScriptオブジェクトではなくパラメーターのJSON文字列をjQueryに渡すことです。

サーバー側で、メソッドの入力パラメーターを、渡すデータの形状と一致させます。

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）は非常に柔軟で、入力データを指定したサーバー側の型に変換するためにできることを行います。

1. markersJSONオブジェクトではありません。通常のJavaScriptオブジェクトです。
2. data:オプションについて読む：

   サーバーに送信されるデータ。まだ文字列でない場合は、クエリ文字列に変換されます。

データをJSONとして送信する場合は、まずそれをエンコードする必要があります。

data: {markers: JSON.stringify(markers)}

jQueryはオブジェクトや配列をJSONに自動的に変換しません。

しかし、私はエラーメッセージがサービスの応答を解釈することから来ると思います。返信するテキストはJSONではありません。JSON文字列は二重引用符で囲む必要があります。だからあなたはしなければならないでしょう：

return "\"received markers\"";

実際の問題がデータの送受信なのかどうかはわかりません。

Dave Wardの解決策を試しました。contentTypeがに設定されているため、postリクエストのペイロード部分でブラウザからデータ部分が送信されていませんでした"application/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);},
    failure: function(errMsg) {
        alert(errMsg);
    }
});

私もこれに遭遇し、これが私の解決策です。

データの解析時に無効なjsonオブジェクト例外が発生した場合、json文字列が正しいことがわかっていても、JSONに解析する前にajaxコードで受け取ったデータを文字列化します。

$.post(CONTEXT+"servlet/capture",{
        yesTransactionId : yesTransactionId, 
        productOfferId : productOfferId
        },
        function(data){
            try{
                var trimData = $.trim(JSON.stringify(data));
                var obj      = $.parseJSON(trimData);
                if(obj.success == 'true'){ 
                    //some codes ...

質問があります

$("#login-button").click(function(e){ alert("hiii");

        var username = $("#username-field").val();
        var password = $("#username-field").val();

        alert(username);
        alert("password" + password);



        var markers = { "userName" : "admin","password" : "admin123"};
        $.ajax({
            type: "POST",
            url: url,
            // The key needs to match your method's input parameter (case-sensitive).
            data: JSON.stringify(markers),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(data){alert("got the data"+data);},
            failure: function(errMsg) {
                alert(errMsg);
            }
        });

    });

ログインの詳細をjsonに投稿して文字列をとして"Success"取得していますが、応答がありません。

これに従って、java var param = {feildName：feildValue}のwebserviceへのajax呼び出しを行ってください。JSON.stringify（{data：param}）

$.ajax({
            dataType    : 'json',
            type        : 'POST',
            contentType : 'application/json',
            url         : '<%=request.getContextPath()%>/rest/priceGroups',
            data        : JSON.stringify({data : param}),
            success     : function(res) {
                if(res.success == true){
                    $('#alertMessage').html('Successfully price group created.').addClass('alert alert-success fade in');
                    $('#alertMessage').removeClass('alert-danger alert-info');
                    initPriceGroupsList();
                    priceGroupId = 0;
                    resetForm();                                                                    
                }else{                          
                    $('#alertMessage').html(res.message).addClass('alert alert-danger fade in');
                }
                $('#alertMessage').alert();         
                window.setTimeout(function() { 
                    $('#alertMessage').removeClass('in');
                    document.getElementById('message').style.display = 'none';
                }, 5000);
            }
        });