通过 AJAX 和 jQuery 清除并重新加载带有数据的 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15449751/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Clear and reload div with data via AJAX and jQuery
提问by Chris Pilie
I have an ajax call that requests data from a Coldfusion CFC method and displays the data in a div. There is also a link to delete this data which uses the same CFC but a different method to delete. Both methods work independently just fine. What I can't seem to figure out is how to encapsulate the call in a function and refresh the div once the deletion has been successful. Here is the code:
我有一个 ajax 调用，它从 Coldfusion CFC 方法请求数据并在 div 中显示数据。还有一个删除此数据的链接，该链接使用相同的 CFC 但删除方法不同。这两种方法独立工作就好了。我似乎无法弄清楚如何将调用封装在函数中并在删除成功后刷新 div。这是代码：
ajax call
ajax调用
var caseid = <cfoutput>'#URL.ID#'</cfoutput>;
var siteurl = <cfoutput>'#APPLICATION.url#'</cfoutput>;
var html = "";
function assetsPost() {
$.ajax({
cache: false,
type:'GET',
url:'cfc/cfc_Asset.cfc?method=qAsset&returnformat=json',
dataType: "json",
data: {
assetgrp_id: caseid,
},
success:function(data) {
if(data) { // DO SOMETHING
jQuery.each(data, function(i, val) {
$('#picoutputannotation').html(data[i].annotation);
var asset_id = data[i].value;
var img = siteurl + 'assets/images/thumbs_check2/' + data[i].thumb;
var removeimg = siteurl + 'assets/images/remove.png';
var annotation = data[i].annotation;
html += "<div class='block-pics'>";
html += "<img src='" + img + "'>";
html += "<div class='note'>";
html += annotation;
html += "</div>";
html += "<div class='block-pics-remove'>";
html += "<a class='delete-asset' id='" + asset_id + "'><img src='" + removeimg + "'></a>";
html += "</div>";
html += "<div class='bot'></div>";
html += "</div>";
});
$('#picoutput').html( html );
} else { // DO SOMETHING
}
}
});
}
assetsPost();
here is the deletion script:
这是删除脚本：
$(document).on("click", ".delete-asset", function() {
var del_id = $(this).attr('id');
$.ajax({
type:'GET',
url:'cfc/cfc_Asset.cfc?method=DeleteAsset&returnformat=json',
dataType: "json",
data: {
delete_id: del_id,
},
success:function(data) {
if(data) { // DO SOMETHING
$('#picoutput').empty();
{assetsPost()};
$('#picoutput').fadeIn('fast');
} else { // DO SOMETHING
}
}
});
});
here is the html:
这是html：
<div class="grid_6">
<div id="picoutput"></div>
</div>
</div>
采纳答案by Muhammad Raheel
Simply set the html to empty by assigning empty string.
只需通过分配空字符串将 html 设置为空。
success:function(data)
{
$('#picoutput').html("");
}
回答by Mike C.
Here are the troubleshooting steps I would take:
以下是我将采取的故障排除步骤：
- In your delete section replace
$('#picoutput').html("");with$('#picoutput').empty(); - Comment out
{//assetsPost()};in your delete script. Verify that the content is deleting properly - Restore the commented out line. Place an alert here (or a breakpoint if you can).
- 在您的删除部分替换
$('#picoutput').html("");为$('#picoutput').empty(); {//assetsPost()};在删除脚本中注释掉。验证内容是否正确删除- 恢复注释掉的行。在此处放置警报（如果可以，也可以放置一个断点）。
function assetsPost() { alert("Assets Post"); $.ajax({ }); }
function assetsPost() { alert("Assets Post"); $.ajax({ }); }
Verify this function is only being called a single time.
验证此函数仅被调用一次。
- Place an alert(breakpoint) here, at the bottom of where you add the html
- 在此处添加警报（断点），在添加 html 的底部
alert(html) $('#picoutput').html( html );
alert(html) $('#picoutput').html( html );
Verify that the html being returned from the cfc call contains what you think it does.
验证从 cfc 调用返回的 html 是否包含您认为的内容。
