无法让 jQuery Ajax 解析 JSON Web 服务结果

Question

我已经验证了我的 C# Web 方法的 JSON 响应，所以我认为这不是问题所在。

我正在尝试使用简单的 jQuery $.ajax 解析结果，但无论出于何种原因，我都无法获得正确触发和解析结果的方法，顺便说一句，似乎也无法获得触发结果的函数。他们对可以返回的 JSON 对象的大小是否有任何限制。

我还从“Site.Master”页面中删除了这段代码，因为当我点击简单按钮时它总是会刷新。标签是否与我从 DOM 中获取的按钮输入等 jQuery 元素一起正常工作？

function ajax() {
//var myData = { qtype: "ProductName", query: "xbox" };
var myData = { "request": { qtype: "ProductName", query: "xbox"} };
$.ajax({
    type: "POST",
    url: "/webservice/WebService.asmx/updateProductsList",
    data: {InputData:$.toJSON(myData)},
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (msg) {
        // var msg = {__type: "Testportal.outputData", id: "li1234", message: "it's work!", myInt:101}
        alert("message=" + msg.d.ProductName + ", id=" + msg.d.Brand);
    },
    error: function (res, status) {
        if (status === "error") {
            // errorMessage can be an object with 3 string properties: ExceptionType, Message and StackTrace
            var errorMessage = $.parseJSON(res.responseText);
            alert(errorMessage.Message);
        }
    }
});

}

还有页面：

 <asp:Button ID="Button1" runat="server" OnClientClick="ajax();"  Text="Button" /> 

以及服务器端 Web 方法：

 public class WebService : System.Web.Services.WebService
{
    [WebMethod]
    [ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
    public OutputData updateProductsList(InputData request)
    {
        OutputData result = new OutputData();
        var db = new App_Data.eCostDataContext();
        var q = from c in db.eCosts
                select c;

        if (!string.IsNullOrEmpty(request.qtype) && !string.IsNullOrEmpty(request.query))
        {
            q = q.Like(request.qtype, request.query);
        }

        //q = q.Skip((page - 1) * rp).Take(rp);
        result.products = q.ToList();

        searchObject search = new searchObject();

        foreach (App_Data.eCost product in result.products)
        {
            /* create new item list */
            searchResult elements = new searchResult()
            {
                id = product.ProductID,
                elements = GetPropertyList(product)
            };
            search.items.Add(elements);
        }
        return result;

    }

还有辅助类：

    public class OutputData
{
    public string id { get; set; }
    public List<App_Data.eCost> products { get; set; }

}
public class InputData
{
    public string qtype { get; set; }
    public string query { get; set; }
}

Answer 1

您可能遇到的一个问题是，在您启动 $.ajax() 回调的同时，您没有做任何事情来阻止按钮提交表单并执行完整的回发/重新加载。

我建议不显眼地把它连接起来，而不是使用 OnClientClick 属性，像这样：

$(document).ready(function() {
  // May need to use $('<%= Button1.ClientID %>') if your Button is 
  //  inside a naming container, such as a master page.
  $('#Button1').click(function(evt) {
    // This stops the form submission.
    evt.preventDefault();

    $.ajax({
      // Your $.ajax() code here.
    });
  });
});

我也同意 Oleg 的观点，即您应该使用 json2.js 进行 JSON 字符串化和解析。在较新的浏览器中，这将回退到浏览器对这些方法的本机实现，这会更快并且使解析更安全。

更新：

要回答您有关数据的问题，不，这看起来不太正确。

您最终要发送到服务器的是这个（无格式）：

{"request":{"gtype":"ProductName","query":"xbox"}}

要做到这一点，你需要这样的东西：

var req = { request : { qtype: "ProductName", query: "xbox" }};

$.ajax({
  data: JSON.stringify(req),
  // Remaining $.ajax() parameters
});

请记住，request、qtype 和 query 必须与您的服务器端结构匹配且区分大小写。

您还可以更详细地定义请求对象（我个人更喜欢这样，以保持内容清晰易读）：

var req = { };

req.request = { };

req.request.qtype = "ProductName";
req.request.query = "xbox";

我在这里写了更多关于这个的内容，如果你有兴趣的话：http://encosia.com/2009/04/07/using-complex-types-to-make-calling-services-less-complex/

Answer 2

您的服务器端代码方法是什么样的？设置断点。是不是被击中了？

它应该看起来像：

[WebMethod, ScriptMethod]
public string updateProductsList(string qtype, string query)
{ // stuff
}

另外，您的 javascript 数据参数看起来格式不正确。

Answer 3

在我看来，您的问题是您尝试使用手动 JSON 序列化。还有更直接的方法。您应该只声​​明 [ScriptMethod (ResponseFormat = ResponseFormat.Json)] 或 [ScriptMethod (UseHttpGet = true, ResponseFormat = ResponseFormat.Json)] 并直接返回一个对象而不是来自 web 方法的字符串。在客户端（在 JavaScript 中）我强烈建议您使用 JSON.stringify（来自 json2.js，可以从 http://www.json.org/js.html 下载）来构造 jQuery.ajax 的 data 参数。

看看Can I return JSON from an .asmx Web Service if the ContentType is not JSON? 和How do I build a JSON object to send to an AJAX WebService? 可能还有JQuery ajax call to httpget webmethod (c#) not working 你有兴趣进行更多实验。