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

I am passing json data to my generic handler page GenericHandler.ashx.cs using jquery ajax request and json as data type.

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

in my handler code i would like to return html table in string format. here is snap of my handler code

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

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

where sResponse contains <table><tr><td>PropertyName</td><td>PropertyID</td></tr><tr><td>abc</td><td>1</td></tr></table>

其中sResponse包含

PropertyName	PropertyID
abc	1

my jquery code (check inline comment in error function):

我的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 ?
        }
    });

My Question :

我的问题 :

Why i am not getting response in success function

为什么我没有得到成功功能的回应

Is it right way to do ? or should i convert html table to json object and then return it. And again display it in tabular format ?

这是正确的方法吗?或者我应该将html表转换为json对象然后返回它。并再次以表格格式显示它?

3 个解决方案

#1

Your response isn't valid JSON sine it's returning plain text. jQuery is expecting the response to be JSON because you've set contentType: "application/json"

您的回复无效JSON正在返回纯文本。 jQuery期望响应是JSON,因为你设置了contentType:“application / json”

If the rest of your site uses JSON as a transmission format, then wrap your HTML as a JSON object and return it.

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

In your back end code, return something that looks like this

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

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

And in your jQUery code, you can access it in the success callback.

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

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

NOTE - You'll need to remove the plain text content type from your backend code and make that JSON.

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

#2

From jQuery documentation here, you can see that the dataType parameter is what AJAX is expecting back as a response from the server. The contentType parameter is what is put in the header in your request to the server so that the server knows how to read the request.

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

Therefore, you should change your dataType to "text" like:

因此,您应该将dataType更改为“text”,如:

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

I find this useful when alerting of a successful INSERT or UPDATE call on a database. It would be extraneous to create and return a JSON object for such a task.

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

#3

If you tell $.ajax that you expect a JSON, then a text/plain response from the server is not a valid response.

如果你告诉$ .ajax你期望一个JSON,那么来自服务器的text / plain响应就不是一个有效的响应。

Regarding your second question: The good way to do it would be to return the data you want to work with, in JSON format, for example:

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

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

And then in the success callback of your Ajax request, work with that data to build your HTML structure with jQuery.

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

#1