如何通过Ajax调用处理大量HTML

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:

我想知道我所做的事情是否正常,但它有效,但我很想找到一种更好的方法来做到这一点。基本上我要在“模态框”中提供用户配置文件。因此,用户单击按钮/链接,此窗口是动态生成的,其内容div将填充AJAX请求的结果。实际上,AJAX请求调用一个php脚本从MySQL数据库获取数据,通过php输出缓冲区获取HTML模板,并将该文件作为字符串存储在变量中,然后将此变量存储在数组中,json-编码并回声为:

[ { 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:

在客户端,当我的AJAX调用完成后,我只用html填充我的模态内容div,所以它是这样的:

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

这是将HTML用于前端的合理方式吗?或者有更好的方法来做类似的事情?我使用这个解决方案仅仅是因为我需要在数据库中使用大量字段来渲染大量HTML,其他AJAX响应只是通过Object循环并在客户端呈现。

Thanks for your time.

谢谢你的时间。

2 个解决方案

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

我从服务器发送响应作为JSON。

So the AJAX request will result in something like this

因此AJAX请求将导致类似这样的事情

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

由于我已经有了Modal的结构,我可以使用JQuery将值插入到模态中。

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

在此方法中,我们只能发送需要从服务器发送的数据,并且处理在客户端进行。因此,网络开销很小。此外,如果我们正在提供JSON,那么任何类型的客户端都可以使用这些数据(Android / Web)

#2

Try this :

尝试这个 :

$.ajax({
    url:"test.php",
    type:"POST",
    dataType:"json",
    data:{

      }
 }).done(function(msg){
    $( "#modal-content" ).html(msg);

   });

your code is write on test.php

你的代码写在test.php上

#1