无法获取jQuery Ajax来解析JSON Web服务结果

我已经验证了来自C#Webmethod的JSON响应,所以我不认为这是问题所在.

我试图使用简单的jQuery $.ajax解析结果,但是由于某种原因,我无法获得正确触发并解析结果的方法,而且似乎也无法获取触发结果的函数.它们对可以返回的JSON对象大小的任何限制.

我还从“ Site.Master”页面中删除了此代码,因为当我单击简单按钮时,它将始终刷新.标签是否可以与jQuery元素(例如我从DOM抓取的按钮输入)一起正常使用？

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

最佳答案

您可能遇到的一个问题是,在启动$.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
});

请记住,请求,qtype和查询必须与服务器端结构匹配且区分大小写.

您还可以在定义请求对象时更加冗长(我个人更希望保持其清晰易读)：

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/

无法获取jQuery Ajax来解析JSON Web服务结果

相关文章