如何使用jQuery获取Ajax请求数据?

时间:2010-08-24 20:32:53

标签: javascript jquery ajax response

我有一个Ajax请求:

$.ajax({ url: "MyPage.aspx", 
    data: params,
    success: function(data) {
        // Check results                
        $('#testp').append(data.message);
        enableForm();
    },
    error: function() {
        alert('Unable to load the permissions for this user level.\n\nYour login may have expired.');
        enableForm();
    },
    dataType: "json"
});

在请求页面上有C#代码,它在Page_Load:

的末尾执行此操作
Response.AppendHeader("X-JSON", result);

'result'的格式如下:

{ "success": true, "message": "SUCCESS", "user_level": 25, "switches": [ { "number": 30, "is_enabled": false, "is_default": false }, { "number": 30, "is_enabled": false, "is_default": false } ]}

请求成功返回,但'data'为空。我错过了什么?

感谢。

3 个答案:

答案 0 :(得分:3)

您的主要问题似乎是您在HTTP标头中返回JSON数据而不是作为响应的内容。你可能想做这样的事情:

Response.ContentType = "application/json";
Response.Write(result);
Response.End();

这可能会解决您的直接问题,但我强烈建议您避免使用ASPX页面的直接输出。当你真正想要的只是一个简单的JSON端点时,有很多不必要的开销涉及到Page_Load。更不用说,不必手动处理JSON序列化。

如果要从服务器端的对象构建该JSON字符串,则可以使用ASP.NET AJAX“页面方法”直接返回该字符串,并让框架处理序列化。像这样:

public class PermissionsResult
{
  public bool success;
  public string message;
  public int user_level;

  public List<Switch> switches;
}

public class Switch
{
  public int number;
  public bool is_enabled;
  public bool is_default;
}

// The combination of a WebMethod attribute and public-static declaration
//  causes the framework to create a lightweight endpoint for this method that
//  exists outside of the normal Page lifecycle for the ASPX page.
[WebMethod]
public static PermissionsResult GetPermissions(int UserLevel)
{
  PermissionsResult result = new PermissionsResult();

  // Your current business logic to populate this permissions data.
  result = YourBusinessLogic.GetPermissionsByLevel(UserLevel);

  // The framework will automatically JSON serialize this for you.
  return result;
}

您必须将其与您自己的服务器端数据结构相匹配,但希望您明白这一点。如果您已经拥有可以使用所需数据填充的现有类,则可以使用这些类而不是为传输创建新类。

call an ASP.NET AJAX Page Method with jQuery,您需要在$ .ajax()调用上指定一些额外的参数:

$.ajax({
  // These first two parameters are required by the framework.
  type: 'POST',
  contentType: 'application/json',
  // This is less important. It tells jQuery how to interpret the
  //  response. Later versions of jQuery usually detect this anyway.
  dataType: 'json',
  url: 'MyPage.aspx/GetPermissions',
  // The data parameter needs to be a JSON string. In older browsers,
  //  use json2.js to add JSON.stringify() to them.
  data: JSON.stringify({ UserLevel: 1}),
  // Alternatively, you could build the string by hand. It's messy and
  //  error-prone though:
  data: "{'UserLevel':" + $('#UserLevel').val() + "}",
  success: function(data) {
    // The result comes back wrapped in a top-level .d object, 
    //  for security reasons (see below for link).
    $('#testp').append(data.d.message);
  }
});

关于data参数,这里有关于它的信息需要是一个字符串:http://encosia.com/2010/05/31/asmx-scriptservice-mistake-invalid-json-primitive/

此外,更多的是使用JSON.stringify()方法:http://encosia.com/2009/04/07/using-complex-types-to-make-calling-services-less-complex/

.d问题最初可能令人困惑。基本上,JSON会像这样回来,而不是你期望的那样:

{"d": { "success": true, "message": "SUCCESS", "user_level": 25, "switches": [ { "number": 30, "is_enabled": false, "is_default": false }, { "number": 30, "is_enabled": false, "is_default": false } ]}}

一旦你期望它就很容易解释。当顶级容器是一个数组时,它通过减轻相当危险的客户端漏洞使您的端点更安全。不适用于这种特殊情况,但通常很好。您在此处详细了解:http://encosia.com/2009/02/10/a-breaking-change-between-versions-of-aspnet-ajax/

答案 1 :(得分:1)

答案应该是:

将方法名称添加到ajax设置的url值的末尾:

url:“MyPage.aspx / method”

确保使用该方法指向正确的页面,并确保该方法具有WebMethod()属性。


$ .ajax几乎为你处理一切。如果AJAX调用成功,则返回数据作为参数传递给success函数,即:

success: function (data) { 
    //do something 
}

“data.message”的值仅在“message”是返回数据的属性时才可用。在您的情况下,id为“testp”的元素应该接收“data.message”的值,但是没有使用该对象的其余部分。

很棒的博客,您可以查看AJAX for .Net的所有内容:http://encosia.com/

我经常使用JSON lib(http://www.json.org/js.html)来测试返回的数据。只需添加

alert(JSON.stringify(data));

到你的成功功能

答案 2 :(得分:1)

我最近有运气,这是我做过的帖子,那里有很多好消息的链接!

Can't get jQuery Ajax to parse JSON webservice result