Jquery Ajax将json发布到webservice

时间:2011-06-12 17:14:58

标签: jquery ajax web-services json

我正在尝试将一个JSON对象发布到asp.net webservice。

我的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&安培;标记%5B2%5D%5BmarkerPosition%5D = -3

我正在调用的webservice函数是:

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

6 个答案:

答案 0 :(得分:362)

您提到使用json2.js来对您的数据进行字符串化,但是POSTed数据似乎是URLEncoded JSON您可能已经看过它,但是this post about the invalid JSON primitive涵盖了JSON被URLEncoded编码的原因。

advise against passing a raw, manually-serialized JSON string into your method。 ASP.NET将自动JSON反序列化请求的POST数据,因此,如果您手动序列化并向ASP.NET发送JSON字符串,您实际上最终将需要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原语问题的关键是为jQuery传递data参数的JSON字符串,而不是JavaScript对象,以便jQuery不会尝试对数据进行URLEncode。

在服务器端,将方法的输入参数与您传入的数据的形状相匹配:

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 :(得分:14)

  1. markers不是JSON对象。这是一个普通的JavaScript对象。
  2. Read about the data: option
      

    要发送到服务器的数据。如果还没有字符串,它将转换为查询字符串

  3. 如果要将数据作为JSON发送,则必须先对其进行编码:

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

    jQuery不会自动将对象或数组转换为JSON。


    但我认为错误消息来自解释服务的响应。您发回的文本不是JSON。 JSON字符串必须用双引号括起来。所以你必须这样做:

    return "\"received markers\"";
    

    我不确定您的实际问题是发送还是接收数据。

答案 2 :(得分:2)

我也遇到过这个,这是我的解决方案。

如果在解析数据时遇到无效的json对象异常,即使您知道您的json字符串是正确的,也要将您在ajax代码中收到的数据字符串化,然后再将其解析为JSON:

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

答案 3 :(得分:2)

我尝试了Dave Ward的解决方案。由于 contentType 设置为"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);
    }
});

答案 4 :(得分:1)

我有查询,

$("#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",但我没有收到回复。

答案 5 :(得分:-2)

请通过ajax调用java的webservice来执行此操作 var param = { feildName:feildValue }; 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);
            }
        });