Javascript 如何处理Ajax调用产生的大量HTML
我想知道我所做的是否是好的,它是有效的,但我有这个困扰,找到一个可能更好的方式来做它。基本上,我必须在“模式框”中提供用户配置文件。因此,用户单击按钮/链接,该窗口将动态生成,其内容div将填充AJAX请求的结果。实际上,AJAX请求调用一个php脚本,该脚本从MySQL数据库获取数据,通过php输出缓冲区获取HTML模板,并将该文件作为字符串存储在变量中,然后将该变量存储在数组中,进行json编码,并以类似的方式进行回显:Javascript 如何处理Ajax调用产生的大量HTML,javascript,php,jquery,html,ajax,Javascript,Php,Jquery,Html,Ajax,我想知道我所做的是否是好的,它是有效的,但我有这个困扰,找到一个可能更好的方式来做它。基本上,我必须在“模式框”中提供用户配置文件。因此,用户单击按钮/链接,该窗口将动态生成,其内容div将填充AJAX请求的结果。实际上,AJAX请求调用一个php脚本,该脚本从MySQL数据库获取数据,通过php输出缓冲区获取HTML模板,并将该文件作为字符串存储在变量中,然后将该变量存储在数组中,进行json编码,并以类似的方式进行回显: [ { success: 1, html: "HTML already
[ { success: 1, html: "HTML already formatted with data from the PHP script" } ]
.done( function ( srv-data ) {
if ( srv-data.success === 1 ){
$( "#modal-content" ).html( srv-data.html );
}
});
在客户端,当我的AJAX调用完成时,我只是用html填充我的模式内容div,所以它是这样的:
[ { success: 1, html: "HTML already formatted with data from the PHP script" } ]
.done( function ( srv-data ) {
if ( srv-data.success === 1 ){
$( "#modal-content" ).html( srv-data.html );
}
});
这是将我的HTML服务到前端的合理方式吗?或者有更好的方法来做类似的事情?我使用此解决方案只是为了在数据库中有很多字段要处理的情况下呈现大量HTML,其他AJAX响应只是在对象中循环并在客户端呈现
谢谢您的时间。试试这个:
$.ajax({
url:"test.php",
type:"POST",
dataType:"json",
data:{
}
}).done(function(msg){
$( "#modal-content" ).html(msg);
});
您的代码是在test.php上编写的,我不知道这是否是一种更好的方法,但是当我有很多数据要传递给一个modal时,我通常会这样做 我将响应作为JSON从服务器发送 因此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",
}
因为我已经有了模式的结构,所以我可以使用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');
}
在这种方法中,我们只能发送需要从服务器发送的数据,处理在客户端进行。因此,网络开销最小。此外,如果我们提供JSON,那么任何类型的客户端都可以使用数据(Android/Web)“很多”用于内部网应用程序与“很多”用于互联网或移动应用程序完全不同。IE6的“很多”与Edge的“很多”非常不同。我说答案是基于基本意见的。我不知道我是否真的明白你说的话。但是您应该在客户端生成所有HTML。我认为没有必要为每个用户创建不同的.html文件。所以,你应该在JSON中传递HTML,然后用Javascript生成HTML。谢谢你的回答,如果我能使用一个可以很好工作的预格式化模式的话。但是我使用的模式是从我的js类动态生成的,它的框架将服务于应用程序的其他部分。我可以有一个用户配置文件或论坛页面或在线用户列表进入该模式。因此,我必须将模态的基本标记重新用于其他任务,这就是为什么我尝试将一个已经格式化的HTML文件加载到模态内容中。哦,那么发送HTML不是一个坏主意。从长远来看,您可能最终会从服务器发送更多的数据。如果你有一个有限的modals列表,我建议你用不同的函数在客户端解析它,然后用JSON发送一个字段
type
,以确定它是用户配置文件还是论坛页面等等。谢谢你,最后我用Mustache.js将数据与视图完全分离