从 JSON 结果更新 HTML 内容
Update HTML content from JSON result
我有这个HTML代码:
<tr class="gris">
<td width="6%" class="titulo"><a href="{{ Here goes some URL}}"><img src="assets/play_icon.png" width="32" height="32" /></a></td>
<td width="60%" class="titulo"><a href="{{ Here goes some URL }}">{{ Here goes some title }}</a> <span></br>Descripción de la Pista o Podcast</span></td>
<td width="17%" class="fecha">{{ Here goes some date}}</td>
<td width="17%" class="tiempo">{{ Here goes some time}}</td>
</tr>
我有一个PHP代码,它返回一个像这样的JSON:
{ "html_content" : [ { "description" : "Esta es una prueba de grabacion del podcast",
"date" : "20130927",
"hour" : "012100",
"id" : "-317498614",
"repro" : "0",
"title" : "Prueba",
"url" : "rtmp://46.4.158.7/kraa13/_definst_/kraa13/prueba1.flv"
},
{ "description" : "260913",
"date" : "20130926",
"hour" : "192600",
"id" : "-317498614",
"repro" : "0",
"title" : "260913",
"url" : "rtmp://127.0.0.1/kraa13/_definst_/kraa13-317498614/260913.flv"
}
],
"response" : true
}
我应该能够生成与 JSON 上的值一样多的TR
,当然还可以替换生成的TR
中的正确值。例如,对于每次迭代,在示例代码中,我{{ Here goes some URL }}
我应该从 JSON 响应编写url
值。
更新
我尝试了以下代码:
$(function() {
window.setInterval(function() {
var request = $.ajax({
type: 'GET',
url: "http://devserver/reader/podcast/podcast.php",
success: function(data) {
$("#podlist").html();
if (data.response === false) {
$("#podlist").html(data.error);
} else {
console.log(data.html_content);
if (data.html_content.length != 0) {
var htm = null;
for (var i in data.html_content) {
var jsonObj = data.html_content[i];
htm += "<tr class='gris'><td width='6%' class='titulo'><a href='" + jsonObj.url + "'><img src='assets/play_icon.png' width='32' height='32' /></a></td><td width='60%' class='titulo'><a href='" + jsonObj.url + "'>" + jsonObj.title + "</a> <span></br>" + jsonObj.description + "</span></td><td width='17%' class='fecha'>" + jsonObj.date + "</td><td width='17%' class='tiempo'>" + jsonObj.hour + "</td></tr>";
}
$("#podlist").append(htm);
}
}
},
error: function() {
request.abort();
}
});
}, 5000);
});
但是我收到此错误:
TypeError: data.html_content is undefined
if (data.html_content.length != 0) {
希望您谈论的是使用 AJAX 动态"从 JSON 结果更新 HTML 内容",我想出了以下解决方案。只需在 AJAX 的成功回调中编写以下代码:
if(responseData.html_content.length != 0) {
var htm = null;
for(var i in responseData.html_content) {
var jsonObj = responseData.html_content[i];
htm += "<tr class='gris'><td width='6%' class='titulo'><a href='"+jsonObj.url+"'><img src='assets/play_icon.png' width='32' height='32' /></a></td><td width='60%' class='titulo'><a href='"+jsonObj.url+"'>"+jsonObj.title+"</a> <span></br>"+jsonObj.description+"</span></td><td width='17%' class='fecha'>"+jsonObj.date+"</td><td width='17%' class='tiempo'>"+jsonObj.hour+"</td></tr>";
}
$("#table-id").append(htm);
}
希望这有帮助!
您可以尝试获取表元素,清除它是内部 HTML,然后在 $.each 循环中为您的响应(它是一个列表)附加所需的行。如果"行"计数是动态的,并且您只有在异步请求后才知道它,这是 imo 的最佳方法。
只需使用
var myhtml = '<tr class="gris"><td width="6%" class="titulo"><a href="{{ Here goes some URL}}"<img src="assets/play_icon.png" width="32" height="32" /></a></td><td width="60%" class="titulo"><a href="{{ Here goes some URL }}">{{ Here goes some title }</a><span></br>Descripción de la Pista o Podcast</span></td><td width="17%" class="fecha">{{ Here goes some date}}</td><td width="17%" class="tiempo">{{ Here goes some time}}</td></tr>';
$.each(the_data,function(i , v) {
$('.titulo a' , myhtml).attr('href' , v.url);
// and so on
$('.conatiner').append(myhtml);
})
它类似于这种格式。你必须稍微努力一下。:)
$.post('test.php', { id: id },
function (page) {
$('.titulo a' , myhtml).attr('href' , page.html_content..url);
$('.conatiner').append(page.html_content.data);
}, 'json');
从这里查看答案..如何从 json 获取参数?
简单的解决方案是将模板维护为
var template = '<tr class="gris">'+
'<td width="6%" class="titulo"><a href="{{ Here goes some URL}}"><img src="assets/play_icon.png" width="32" height="32" /></a></td>'+
'<td width="60%" class="titulo"><a href="{{ Here goes some URL }}">{{ Here goes some title }}</a> <span></br>Descripción de la Pista o Podcast</span></td>'+
'<td width="17%" class="fecha">{{ Here goes some date}}</td>'+
'<td width="17%" class="tiempo">{{ Here goes some time}}</td>'+
'</tr>';
var jstring = jQuery.parseJSON(jsonString);
var htmlContent = jstring.html_content;
var i=0;
var t =template;
for(;i<htmlContent.length;i++){
t = t.replace("{{ Here goes some URL}}", htmlContent[i].url);
//Similarly do for the other values...
jQuery("table").append(jQuery(t));
t=template;
}
尝试做
控制台.log(数据);
Ajax 调用是否返回数据?
f12 并设置断点或使用所选浏览器中的"net"面板查看 Ajax 调用返回的内容。
相关文章:
- 如何根据html内容使用ng类-AngularJS
- JavaScript在其他页面上用html内容填充文本框
- Rails:如何在浏览器中显示动态html内容,而不会对其进行转义,也不会引起XSS攻击
- 使用javascript动态创建html内容/元素
- 无法将大型html内容POST到Chrome上的服务器
- 使用li元素的html内容更改该元素的背景
- 如何从ajax返回两个html内容
- jQuery获取子DIV的HTML内容
- HTML内容下推到固定背景图像下方
- 在angular中,使用ng repeat生成动态html内容
- 使用$watch更改html内容
- 如何使用window.showModalDialog()显示HTML内容
- 如何在使用 UIWebView 编辑 HTML 内容时正确调整输入语言更改 (LTR/RTL) 的文本对齐方式
- 获取垂直溢出容器的 html 内容
- 为数组中的每个项目追加 html 内容
- Dojo:在 iframe 加载时解析 HTML 内容
- 允许 Itemp 在 Enyo 中使用 HTML 内容
- 从选项卡中获取 HTML 内容
- 可以将HTML内容放在画布上(登录页)
- 只有当类是硬编码的时,才可以使用jQuery来显示/隐藏html内容