jQuery:在jquery ajax json调用中返回字符串响应

时间:2014-06-25 07:34:28

标签: c# jquery json ajax

我使用jquery ajax请求和json作为数据类型将json数据传递给我的通用处理程序页面GenericHandler.ashx.cs

在我的处理程序代码中我想以字符串格式返回html表。这是我的处理程序代码的快照

context.Response.ContentType = "text/plain";      
context.Response.Write(sResponse);

其中sResponse包含<table><tr><td>PropertyName</td><td>PropertyID</td></tr><tr><td>abc</td><td>1</td></tr></table>

我的jquery代码(检查错误函数中的内联注释):

  id = { 'PropertyID': id };
    $.ajax("Handlers/GenericHandler.ashx?Type=getProperties",
    {
        type: 'post',
        dataType: 'json',
        cache: false,
        contentType: "application/json",
        data: JSON.stringify(id),
        success: function (data) {
            console.log(data);            
        },
        error: function (xhr, status) {
            console.log(status); // Output as parseError
            console.log(xhr.responseText); // My sResponse string ! But Why Here ?
        }
    });

我的问题:

  1. 为什么我没有得到成功功能的回应
  2. 这是正确的方法吗?或者我应该将html表转换为json对象然后返回它。并再次以表格格式显示它?

3 个答案:

答案 0 :(得分:7)

从jQuery文档here,您可以看到dataType参数是AJAX期望作为服务器响应的内容。 contentType参数是您对服务器的请求中的标头中放置的参数,以便服务器知道如何读取请求。

因此,您应将dataType更改为“文字”,如:

$.ajax("Handlers/GenericHandler.ashx?Type=getProperties",
{
    type: 'post',
    cache: false,
    dataType: 'text',
    contentType: "application/json",
    data: JSON.stringify(id),
    success: function (data) {
        console.log(data);            
    },
    error: function (xhr, status) {
        console.log(status);
        console.log(xhr.responseText); 
    }
});

在警告数据库上成功的INSERT或UPDATE调用时,我发现这很有用。为这样的任务创建和返回JSON对象是无关紧要的。

答案 1 :(得分:2)

如果您告诉$.ajax您希望使用JSON,那么来自服务器的text/plain响应不是有效的响应。

关于你的第二个问题:做到这一点的好方法是以JSON格式返回你想要使用的数据,例如:

[
  { "label" : "PropertyName", "value" : "abc" },
  { "label" : "PropertyId", "value" : "1" }
]

然后在Ajax请求的成功回调中,使用该数据来构建使用jQuery的HTML结构。

答案 2 :(得分:2)

您的回复不是有效的JSON,因为它正在返回纯文本。 jQuery期待响应为JSON,因为您已设置contentType: "application/json"

如果您网站的其余部分使用JSON作为传输格式,请将您的HTML包装为JSON对象并将其返回。

在您的后端代码中,返回看起来像这样的内容

{response_html : "<table><tr><td>PropertyName</td><td>PropertyID</td></tr><tr><td>abc</td><td>1</td></tr></table>"}

在您的jQUery代码中,您可以在成功回调中访问它。

success: function (data) {
    console.log(data.response_html);            
},

注意 - 您需要从后端代码中删除纯文本内容类型并制作该JSON。