jQuery Ajax将json发布到Web服务


238

我正在尝试将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对象进行stringyfy。

我正在使用jQuery将其发布到我的Web服务。

  $.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原语:

我发现了一堆与此相关的帖子,这似乎是一个非常普遍的问题,但是我没有尝试解决此问题。

当萤火虫被发布到服务器时,它看起来像这样:

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 = B&B%2% 5D = 42.5978231292517&markers%5B2%5D%5BmarkerPosition%5D = -3

我正在调用的Web服务函数是:

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

api.jquery.com/jQuery.ajax中列出的设置中未提供“ failure”作为可能的设置……也许您将其误认为是“ error”?
danicotra 2013年

Answers:


390

您提到使用json2.js来对数据进行字符串化,但是POSTed数据似乎是URLEncoded JSON您可能已经看过了,但是这篇关于无效JSON原语的文章介绍了为什么对URL进行JSON 编码。

建议不要将原始的,手动序列化的JSON字符串传递到您的method中。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原语问题的关键是向jQuery传递data参数的JSON字符串(而不是JavaScript对象),以便jQuery不会尝试对数据进行URL编码。

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

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)非常灵活,它将尽其所能将输入数据转换为您指定的服务器端类型。


4
您写了“以便jQuery不会尝试对数据进行URL编码。”,但这是不正确的。要阻止jQuery对数据进行urlencoding,必须将processData设置为false。
Softlion

8
传递一个字符串足以防止jQuery URLEncoding data参数。您可以将processData设置为false,但这是多余的(仅执行此操作而不为数据传递JSON字符串是不够的)。
Dave Ward

1
同样的问题(和答案)也适用于Rails。
GregT

2
@DaveWard是否contentType考虑使用GET而不是POST?
罗伊·纳米尔

@RoyiNamir如果使用的是ASMX ScriptServices或ASPX WebMethod,则需要使用POST才能使它们返回JSON。如果GET,Content-Type是否正确,则将获取XML。
戴夫·沃德

19
  1. markers不是JSON对象。这是一个普通的JavaScript对象。
  2. 阅读有关该data:选项的信息

    数据要发送到服务器。如果尚未转换为查询字符串,则将其转换为查询字符串。

如果要以JSON格式发送数据,则必须先对其进行编码:

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

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


但是我认为错误消息来自解释服务的响应。您发回的文本不是JSON。JSON字符串必须用双引号引起来。因此,您必须执行以下操作:

return "\"received markers\"";

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


谢谢您对Felix的帮助,我认为通过JSON.stringyfy方法运行标记将其转换为查询字符串,我已经按照您的建议进行了操作,但不幸的是它不起作用,我没有发布以下内容。
法老王代码

标记=%7B%22markers%22%3A%5B%7B%22position%22%3A%22128.3657142857143%22%2C%22markerPosition%22%3A%227%22%7D%2C%7B%22position%22%3A%22235.1944023323615 %22%2C%22markerPosition%22%3A%2219%22%7D%2C%7B%22position%22%3A%2242.5978231292517%7%22%2C%22markerPosition%22%3A%22-3%22%7D%5D%7D
法老王代码

@Dreamguts:我不清楚您想要什么。您要以markersJSON字符串发送吗?
Felix Kling

嗨,Felix,是的,我想将markers对象作为JSON字符串发送,以便可以在我的Web服务中使用它。
法老王法典

@Dreamguts:然后它应该可以这样工作。另外,您在评论中发布的“代码”看起来也不错。当然,您必须在服务器端正确解码它,也许您必须更改参数的名称,我不知道。
菲利克斯·克林

3

我尝试了戴夫·沃德的解决方案。由于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);
    }
});

2

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

如果在解析数据时遇到无效的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 ...

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",但没有得到响应。


1
这不是问题的答案。如果要提出问题,请转到“问题”菜单,然后单击“提出问题”,如果您的问题与该问题有关,请在问题中提供参考链接。
米塔尔·帕特尔

-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);
            }
        });

这里如何列出对象传递到json到java webservice的ajax调用。
拉维·潘查尔
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.