如何通过Ajax调用处理大量HTML [关闭]

Question

I was wondering if what I'm doing is fine, it works but I've this obsession to find a possible better way to do it. Basically I've to serve a user profile in a "Modal-box". So a user clicks on a button/link and this window is dynamically generated and its content-div is populated with the result of an AJAX request. Actually the AJAX request calls a php script that get the data from a MySQL database, get an HTML template through the php output-buffer and it stores that file as a string in a variable, then this variable is stored in an array, json-encoded and echoed out as something like that:

[ { success: 1, html: "HTML already formatted with data from the PHP script" } ]

On the client side, when my AJAX call is done I just fill my modal-content div with the html, so it is something like that:

.done( function ( srv-data ) {

   if ( srv-data.success === 1 ){

      $( "#modal-content" ).html( srv-data.html );

   }

});

Is this a reasonable way to serve my HTML to the front-end? Or there are better ways to do something similar? I use this solution just for that case where I've a lot of HTML to render with a lot of fields in the database to work with, other AJAX responses are just looped through the Object and rendered on the client side.

Thanks for your time.

Answer 1

I don't know if this is a better way of doing things, but here is what I generally do when I have a lot of data to be passed to a modal.

I send the response as a JSON from the server.

So the AJAX request will result in something like this

{
    amount: 100,
    approved: 0,
    approved_at: "0000-00-00 00:00:00",
    approved_by: "",
    created_at: "2015-12-05 16:24:33",
    id: 2,
    overhead: "dummy data",
    remarks: "Head Approved",
    request_id: 1500002,
    type: "advance",
    updated_at: "2015-12-05 16:29:48",
}

Since I already have a structure for the Modal, I can use JQuery to insert the values into the modal.

.done(function(data){
var json = jQuery.parseJSON(
$('#proj_id').html(json.proj_id);
$('#overhead').html(json.overhead);
$('#type').html(json.type);
$('#amount').html(json.amount);
$('#projectModal').modal('show');
}

In this method, we can send only the data that needs to be sent from the server and the processing happens at the client side. So, the network overhead is minimal. Also, if we are serving JSON, then any kind of client can use the data (Android/Web)