HTML获胜't使用javascript和AJAX进行追加
HTML won't append using javascript and AJAX
我正试图从数据库中获取数据，并将其发布在无序列表中。我使用的是JavaScript和PHP。
我有一个按钮，它将在JavaScript中执行一个函数。此函数将从数据库中获取一些数据，并在执行数据库中的查询后附加HTML代码。
我进行了检查，以确保代码正在从数据库中获取数据。当我不使用.html().append()函数并对数据进行硬编码时，它将像不使用隐藏类一样工作。当我将函数放入变量本身时，如下所示，它将显示为[Object Object]，但实际数据不会附加在列表上。
以下是HTML和JavaScript代码：
function inventoryMenu(){
var confirmModal = $(
'<div class="modal fade">' +
'<div class="modal-dialog">' +
'<div class="modal-content">' +
'<div class="modal-header bg-default">' +
'<div class="container-fluid bodycontent">'+
'<h1>Inventory</h1>'+
'<h4><u> Product Control </u></h4>'+
'<ul>'+
'<div class="container-fluid bodycontent">'+
// '<div class="col-xs-12 col-sm-12 col-md-2 bg-menu mainmenu"></div>'+
// '<div class="col-xs-12 col-sm-12 col-md-3 dashMain">'+
'<br>'+
'<br>'+
'<ul id="mainDHMenu">'+
'</ul>'+
'</div>'+
'</div>'+
'<div class="row subDH">'+
// '<div class="col-xs-12 col-sm-12 col-md-2 bg-menu mainmenu"></div>'+
'<div class="col-xs-12 col-sm-12 col-md-2 bg-menu procategory">'+
'<ul class="procategory">'+
$.post('controllers/pc_productcontrol_c.php', {action: "loadProCategory"}, function (e) {
console.log("In the loadProCategory function");
console.log("loadProCategory function post data: " + e);
if (e === undefined || e.length === 0 || e === null) {
console.log("No meny items in the loadProCategory function");
menudata += '<li><a href="#"> No Menu Item Found </a></li>';
} else {
$.each(e, function (index, qd) {
console.log("In the each post function");
console.log("Each post function data: pcat_id: " + qd.pcat_id + " pcat_name: " + qd.pcat_name);
'<li class="pctrlmenuitem" id="pc_' + qd.pcat_id + '"><a href="#">' + qd.pcat_name + '<pcat_id class="">' + qd.pcat_id + '</pcat_id><pcat_name class="">' + qd.pcat_name + '</pcat_name></a><i class="fa fa-arrow-right pull-right"></i></li>';
// menudata += '<li class="pctrlmenuitem" id="pc_' + qd.pcat_id + '"><a href="#">' + qd.pcat_name + '<pcat_id class="">' + qd.pcat_id + '</pcat_id><pcat_name class="">' + qd.pcat_name + '</pcat_name></a><i class="fa fa-arrow-right pull-right"></i></li>';
// $('.procategory').html('').append(menudata);
});
}
// menudata += '<li class="pull-right" id="addProCategory"><i class="fa fa-lg fa-plus"></i></li>';
// menudata += '</ul>';
// console.log("Menudata: 'n" + menudata);
// console.log($('.procategory').html('').append(menudata));
}, "json")+
// '<li class="pctrlmenuitem" id="pc_44"><a href="#">Category 1<pcat_id class="hidden">44</pcat_id><pcat_name class="hidden">Category 1</pcat_name></a><i class="fa fa-arrow-right pull-right"></i></li>'+
'</ul>'+
'</div>'+
'<div class="col-xs-12 col-sm-12 col-md-5">'+
'<div class="col-xs-12 col-sm-12 col-md-3 bg-menu items"></div>'+
'<div class="col-xs-12 col-sm-12 col-md-3 bg-menu subItems1 hidden"></div>'+
'<div class="col-xs-12 col-sm-12 col-md-3 bg-menu subItems2 hidden"></div>'+
'<div class="col-xs-12 col-sm-12 col-md-3 bg-menu subItems3 hidden"></div>'+
'<div class="col-xs-12 col-sm-12 col-md-3 bg-menu subItems4 hidden"></div>'+
'<div class="col-xs-12 col-sm-12 col-md-3 bg-menu subItems5 hidden"></div>'+
'</div>'+
'<div class="col-xs-12 col-sm-12 col-md-4 bg-menuitemdesc itemdesc"></div>'+
// '</div>'+
'</div>'+
'<div class="row mainDH hidden">'+
'<div class="col-xs-12 col-sm-12 col-md-2 bg-menu mainmenu"></div>'+
'<div class="col-xs-12 col-sm-12 col-md-3 dashMain">'+
'</div>'+
'</div>'+
'<button class="btn btn-success" id="sendfpassreq">Submit</button> ' +
'<button class="btn btn-danger" data-dismiss="modal" aria-hidden="true">Cancel</button>' +
'</div>' +
'</div>' +
// '</div>' +
'</div>'
);
confirmModal.modal("show");
var menudata = '';
menudata += '<h4><u> Product Control</u></h4>';
menudata += '<ul>';
$.post('controllers/pc_productcontrol_c.php', {action: "loadProCategory"}, function (e) {
if (e === undefined || e.length === 0 || e === null) {
menudata += '<li><a href="#"> No Menu Item Found </a></li>';
} else {
$.each(e, function (index, qd) {
console.log("In the each post function");
console.log("Each post function data: pcat_id: " + qd.pcat_id + " pcat_name: " + qd.pcat_name);
menudata += '<li class="pctrlmenuitem" id="pc_' + qd.pcat_id + '"><a href="#">' + qd.pcat_name + '<pcat_id class="">' + qd.pcat_id + '</pcat_id><pcat_name class="">' + qd.pcat_name + '</pcat_name></a><i class="fa fa-arrow-right pull-right"></i></li>';
$('.procategory').html('').append(menudata);
});
}
}, "json");
$('.pctrlmenuitem').click(function () {
$('.itemdesc').html('');
$('.procategory li').css('background-color', '#333333');
$(this).css('background-color', '#cc0000');
$('.items').removeClass('hidden');
if ($('.items').hasClass('hidden')) {
$('.items').removeClass('hidden');
}
if (!$('.subItems1').hasClass('hidden')) {
$('.subItems1').addClass('hidden');
}
if (!$('.subItems2').hasClass('hidden')) {
$('.subItems2').addClass('hidden');
}
if (!$('.subItems3').hasClass('hidden')) {
$('.subItems3').addClass('hidden');
}
if (!$('.subItems4').hasClass('hidden')) {
$('.subItems4').addClass('hidden');
}
if (!$('.subItems5').hasClass('hidden')) {
$('.subItems5').addClass('hidden');
}
var pcat_id = $(this).find('pcat_id').html();
var pcat_name = $(this).find('pcat_name').html();
loadItems(pcat_id, pcat_name);
$.post('controllers/session-store.php', {sessionstore: 'store', pcat_id: pcat_id, pcat_name: pcat_name}, function (e) {
console.log(e);
}, "json");
});<button onclick="inventoryMenu()" class="inventoryButton">Inventory</button>我发现了问题。。从post函数检索到的数据不能在post函数之外与原始数据一起引用。'menudata的变量在post函数之外为null，因此.append（）函数没有附加任何内容。
我在post函数中移动了代码，现在它可以工作了。
相关文章：
- AJAX URL 追加与存储的 jQuery .data(） 冲突
- 如何先追加，然后在jquery中运行ajax
- 如何调试/解决递归 AJAX 追加重复项
- 授权标头仅在 AJAX CORS 请求中追加一次
- 将事件添加到 ajax 追加的内容
- 使用 AJAX 将操作追加到最后一个追加的行
- 单击时从 AJAX .each(） 循环追加数据
- Ajax 函数在 JQuery 追加中调用时不起作用
- AJAX 条件内追加
- 追加(ajax -data）屏幕外(左:100%;)
- Javascript无法在使用ajax进行追加后选择元素
- HTML获胜't使用javascript和AJAX进行追加
- Onchange使用ajax在表行中追加数据
- Ajax追加问题
- 追加在Jquery Ajax中不起作用
- 使用ajax在ul标签中追加结果
- 当用户滚动页面时，Ajax会从数据库中追加更多的数据
- Greasemonkey脚本，用于在使用AJAX提交时向表单追加文本
- AJAX成功后追加DIV
- 阻止Ajax追加到DIV
