AJAX with HTML data return

Question

I have a function AJAX:

function userCheck() {
    var username = $("#username").html();
    var userid = $("#balmung-id").val();
    $.ajax({
        url: "systems/usercheck.php",
        type: 'POST',
        data: {
            username: username,
            userid: userid
        },
        beforeSend: function() {
            $("#loaderror").hide();
            $("#loader").show();
        },
        success: function(result) {
            $("#loader").hide();
            $("#user-painel-2").html(result);
        },
        error: function() {
            $("#loader").hide();
            $("#loaderror").show();
        },
        timeout: 5000
    });
}

It sends data and the return is done through a echo in the PHP:

echo '<div id="userReturn">"'.$valor.'"</div>';

That one div will be inserted inside a menu as specified in result of AJAX:

success: function(result) {
                $("#loader").hide();
                $("#user-painel-2").html(result);
            }

I must use the return always on JSON, or can I continue to do so without problems? What’s the difference between using the JSON and not HTML?

Answer 1

JSON is a standardized data structuring format, just like XML. Using it favors interoperability and also reusability.

Assuming you have this JSON return, you can use it on multiple pages and different markup structures, just by treating this JSON and doing whatever you want with it. Direct HTML feedback on this, and you won’t have much freedom to process this data when it reaches your pages.

In short, JSON allows for greater flexibility, but comes at the cost of having to process the data. HTML is less flexible, but it’s more practical, it’s ready to use.

I particularly prefer to have flexibility, so I prefer to return in JSON (or XML).

Answer 2

Basically you’re giving back unnecessary data when you make the return directly with HTML ready, let’s imagine a scenario where your return has approximately 1000 lines like this:

<div id="userReturn">"'.$valor.'"</div>

This echo would be repeated 1000x which would make the return heavier as it is carrying more data.

If you make the return in JSON you would be returning only the values to be added in the div, soon you would be transferring less data, and the response to your request would be faster and will not require much from the server, Once you receive these values with the JS you can process and create the Divs within a loop. You will have the same content being served faster and will improve the performance of your application and consume less data. Using JSON you can handle this data however you want, if you want to store it for use in different functions as well and on different pages you can, if you make the HTML return you will be limited.

If it is just for a simple data return of a few lines I do not see major problems in using direct return as HTML text, but if it is for a large application with large amount of lines I recommend the use of JSON

Answer 3

Well, actually what you’re returning is a text and then the browser will understand that it’s html. I don’t know the purpose of your return, if it’s just to show a value, or something like that. The most normal(right) is that you always go back to JSON, then turn that text into JSON into an object and do what you want. The difference is that JSON is a sure thing to do, because it was done for data return, and HTML is not. If you want to return the value inside that div, leave the div in Hide inside the user-panel-2, and when you give the Success, you put the result inside the div and have it appear.