jQuery: return string response in jquery ajax json call

Question

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

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

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>

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

  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 :

1. Why i am not getting response in success function
2. 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 ?

Answer 1

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.

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

$.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.

Answer 2

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

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:

[
  { "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.

Answer 3

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"

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

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.

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.