[英]I am trying to display an image from MYSQL via PHP in an HTML file. What is wrong with my code?
[英]How do I stop duplication in <p> tag? I am trying to load data from my JSON file and display in the website with .html() function
原始文件包含一些硬编码的数据,我想用我的JSON文件中的数据替换该数据,我尝试使用此代码进行处理,但取得了一些进展,但是每次我单击另一个电子邮件标题时,都得到相同的数据被放在
我的html文件的标签(索引)。 我需要找到一种方法来阻止重复数据。 有人可以帮我吗? 我是AJAX / JSON的新手
$(document).ready(function() {
$.getJSON("email_list.js",
{format: "json"}).done(function(data){
console.log(data);
for (key in data) {
emailID = "#" + data[key].id;
$(".email-header")
.eq(key).attr("id", data[key].id);
$(emailID).find('td')
.eq(0).attr("id", "sender" + data[key].id)
.html(data[key].sender);
$(emailID).find('td')
.eq(1).attr("id", "subject" + data[key].subject)
.html(data[key].subject);
$(emailID).find('td')
.eq(2).attr("id", "datetime" + data[key].datetime)
.html(data[key].datetime);
}
});
// show/hide emails when click on headers
$("tr.email-header").click(function(){
id = "#body " + $(this).attr("id");
//creates the name for each file
fileID = $(this).attr("id") + ".js";
//console.log(id);
$.ajax({
url: fileID,
dataType: "JSON",
success: function(data) {
console.log(data);
//I need to replace the contents in the HTML file with
//my JASON file contents.
fElement = $("tr.email-body").find("p");
fElement.eq(0).html(data.recipient);
fElement.eq(1).html(data.body);
fElement.eq(2).html(data.recipient);
fElement.eq(3).html(data.body);
fElement.eq(4).html(data.recipient);
fElement.eq(5).html(data.body);
}}).fail(function() {
console.log(id + " - HAS AN ERROR!");
});
$(this).next().eq(0).toggle();
});
// hide email on click
$("tr.email-body").click(function(){
$(this).hide();
});
});
这是一个更新的代码片段,它从github存储库中提取ajax数据。 只需跟踪以了解我们如何访问js文件中的元素。
一些附加说明:
尝试将类用于重复元素,例如发件人主题和日期时间,而不要使用ID。 然后,访问它们甚至更加容易。 我没有改变。
您已设置它为在每次单击标题时重新加载电子邮件。 可能要确保只加载一次。
您应该立即清除现有的html,以便在加载实际内容之前不显示占位符文本。
$(document).ready(function() { $.getJSON("https://raw.githubusercontent.com/checonunez74/AJAX-JSONproject/master/email_list.js", { format: "JSON" }).done(function(data) { for (key in data) { emailID = "#" + data[key].id; $(".email-header") .eq(key).attr("id", data[key].id); f_el = $(emailID).find('td'); f_el.eq(0).attr("id", "sender") .html(data[key].sender); f_el.eq(1).attr("id", "subject") .html(data[key].subject); f_el.eq(2).attr("id", "datetime") .html(data[key].datetime); } }); // show/hide emails when click on headers $("tr.email-header").click(function() { let id = $(this).attr("id"), emailBody = $(this).next(".email-body"), emailRecipient = emailBody.find('p').first(), emailContent = emailBody.find('p').last(); //make the AJAX call here $.ajax({ url: 'https://raw.githubusercontent.com/checonunez74/AJAX-JSONproject/master/' + id + '.js', dataType: "JSON", success: function(data) { emailRecipient.text('To: ' + data.recipient); emailContent.text(data.body); } }).fail(function() { console.log(id + " - HAS AN ERROR!"); }); emailBody.toggle(); }); // hide email on click $("tr.email-body").click(function() { $(this).hide(); }); });
.email-body { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <head> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="http://code.jquery.com/jquery.min.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="email.js"></script> <link rel="stylesheet" href="email.css"> </head> <body> <h1>Email Inbox</h1> <table class="table table-hover" id="inbox"> <thead> <tr class="active"> <th>Sender</th> <th>Subject</th> <th>Received</th> </tr> </thead> <tbody> <tr class="warning email-header"> <td>Bob</td> <td>Re: Your brains</td> <td>01/03/2014 9:56pm</td> </tr> <tr class="email-body"> <td colspan="3"> <p>To: Tom@tom.tom</p> <p>Heya Tom, it's Bob, from the office down the hall...</p> </td> </tr> <tr class="warning email-header"> <td>Your only friend</td> <td>I've been shockingly nice</td> <td>04/07/2011 12:34pm</td> </tr> <tr class="email-body"> <td colspan="3"> <p>To: want@you.gone</p> <p>That's what I'm counting on.</p> </td> </tr> <tr class="warning email-header"> <td>Mr. Fancy Pants</td> <td>Chances are...</td> <td>10/21/2005 4:16am</td> </tr> <tr class="email-body"> <td colspan="3"> <p>To: dancing@the.parade</p> <p>You thought you had some fancy pants and now you know it's true.</p> </td> </tr> </tbody> </table> </body> </html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.