AJAX追加问题

我用AJAX来解决，我很难理解它......我的问题是当我只追加像这样的数据$（'＃blockAlarmeContent'）。append（data.TNT.RX）;它返回的值，但是当我把值的HTML结构，然后附加HTML它不起作用..AJAX追加问题

我想要做的是显示html结构blockAlarmeContent（绿色标题的内容）谢谢这里是我的代码：！

$('#boxLV1').click(function() { 
 
    $('#mainViewContainer').animate({'left': '-30rem'}, 250, function(){ 
 

 
    // Appel AJAX pour récupération du contenu. 
 
    $.ajax({ 
 
     url: 'Pages/index.php', //ou il y a le traitement json 
 
     type: 'get', 
 
     dataType: 'json', 
 
     data: 'action=loadBlocSite', 
 
     success:function(data){ 
 

 
       var alarmeContent = ''; 
 
       alarmeContent += '<div class="wrapContent">'; 
 
\t \t \t \t alarmeContent += '<div class="tableHeader">'; 
 
\t \t \t \t alarmeContent += '<div class="tableCell_title">TNT</div>'; 
 
\t \t \t \t alarmeContent += '<div class="tableCell_title">FM</div>'; 
 
\t \t \t \t alarmeContent += '</div>'; 
 
\t \t \t \t alarmeContent += '<div class="tableCatg">'; 
 
\t \t \t \t alarmeContent += '<div class="table_row">'; 
 
\t \t \t \t alarmeContent += '<div class="tableCatg_title">Criticité</div>'; 
 
\t \t \t \t alarmeContent += '<div class="tableCatg_value">'+ data.TNT.Criticite +'</div>'; 
 
\t \t \t \t alarmeContent += '<div class="tableCatg_value">'+ data.FM.Criticite +'</div>'; 
 
\t \t \t \t alarmeContent += '</div>';// fin table-row 
 
\t \t \t \t alarmeContent += '<div class="table_row">'; 
 
\t \t \t \t alarmeContent += '<div class="tableCatg_title">Sans supervision</div>'; 
 
\t \t \t \t alarmeContent += '<div class="tableCatg_value">'+ data.TNT.Sanssupervision +'</div>'; 
 
\t \t \t \t alarmeContent += '<div class="tableCatg_value">'+ data.FM.Sanssupervision +'</div>'; 
 
\t \t \t \t alarmeContent += '</div>';// fin table-row 
 
\t \t \t \t alarmeContent += '<div class="table_row">'; 
 
\t \t \t \t alarmeContent += '<div class="tableCatg_title">Non nominale</div>'; 
 
\t \t \t \t alarmeContent += '<div class="tableCatg_value">'+ data.TNT.Nonominale +'</div>'; 
 
\t \t \t \t alarmeContent += '<div class="tableCatg_value">'+ data.FM.Nonominale +'</div>'; 
 
\t \t \t \t alarmeContent += '</div>';// fin table-row 
 
\t \t \t \t alarmeContent += '</div>'; //fin tableCatg 
 
\t \t \t \t alarmeContent += '</div>'; //fin wrapContent 
 
\t \t 
 
\t \t \t \t $('#blockAlarmeContent').append(alarmeContent); 
 
     //alert(data.TNT.RX); 
 
     //$('#blockAlarmeContent').append(data.TNT.RX); 
 
     //callback(true); 
 
     } 
 
    }); 
 
    }); 
 
}); 
 
\t 
 
$('#boxLV2back').click(function() { 
 
    $('#mainViewContainer').animate({'left': '0rem'}, 250, function(){ 
 
    //$('#blockAlarmeContent').empty(); 
 
    }); 
 
});

.clsMainView{ 
 
\t position: relative; 
 

 
\t height: 50rem; 
 
\t width: 30rem; 
 
\t overflow: hidden; 
 
} 
 

 
.clsMainViewContainer{ 
 
\t position: absolute; 
 
\t height: 50rem; 
 
\t width: 90rem; 
 
\t /*background-color : red; \t */ 
 
} 
 

 
.clsBoxLV{ 
 
\t position: relative; 
 
\t float: left; 
 
\t margin:1rem; 
 
\t padding:0; 
 
\t height: calc(100% - 2rem); 
 
\t width:28rem; 
 
\t background-color : red; 
 
} 
 

 
.clsBoxLVheader{ 
 
\t position: relative; 
 
\t float: left; 
 
\t margin: 0rem; 
 
\t padding:0; 
 
\t height: 2rem; 
 
\t width: 100%; 
 
\t background-color : yellow; 
 
} 
 
.clsBoxLVtitle{ 
 
\t position: relative; 
 
\t float: left; 
 
\t margin: 0rem; 
 
\t padding:0; 
 
\t height: 100%; 
 
\t line-height: 100%; 
 
\t width: calc(100% - 2rem); 
 
} 
 

 
.clsBoxLVback{ 
 
\t position: relative; 
 
\t float: left; 
 
\t margin: 0rem; 
 
\t padding:0; 
 
\t height: 100%; 
 
\t width: 2rem; 
 
} 
 

 
.clsBoxLVContent{ 
 
\t position: relative; 
 
\t float: left; 
 
\t margin: 0rem; 
 
\t padding:0; 
 
\t height: calc(100% - 2rem); 
 
\t width:100%; 
 
} 
 

 
.clsBlock{ 
 
\t position: relative; 
 
\t float: left; 
 
\t margin: 0rem 0rem 0.5rem 0rem; 
 
\t padding:0; 
 
\t width:100%; 
 
\t background-color : green; 
 
} 
 
.clsBlockHeader{ 
 
\t position: relative; 
 
\t float: left; 
 
\t margin: 0rem; 
 
\t padding:0; 
 
\t height:2rem; 
 
\t width:100%; 
 
} 
 
.clsBlockHeaderTitle{ 
 
\t position: relative; 
 
\t float: left; 
 
\t margin: 0rem; 
 
\t padding:0; 
 
\t width:calc(100% - 2rem); 
 
} 
 
.clsBlockHeaderReduce{ 
 
\t position: relative; 
 
\t float: left; 
 
\t margin: 0rem; 
 
\t padding:0; 
 
\t width:2rem; 
 
} 
 
.clsBlockContent{ 
 
\t position: relative; 
 
\t float: left; 
 
\t margin: 0rem; 
 
\t padding:0; 
 
\t width:100%; 
 
} 
 
.blockAlarmeContent{ 
 
\t width: 100%; 
 
\t background: pink; 
 
} 
 
.tableHeader { 
 
\t position: relative; 
 
\t width: calc(40% - 1rem); 
 
\t display: block; 
 
    float: right; 
 
\t width: 10rem; 
 
\t height: 2.5rem; 
 
\t border: 1px solid; 
 
\t background: bisque; 
 
} 
 
.tableCell_title { 
 
\t float: left; 
 
\t width: calc(50% - 0rem); 
 
\t height: 2.5rem; 
 
\t color: #000000; 
 
\t text-align: center; 
 
    font-weight: bold; 
 
\t border: 1px solid red; 
 
} 
 
.tableCatg_value { 
 
\t position: relative; 
 
\t width: calc(40% - 1rem); 
 
\t display: block; 
 
    float: right; 
 
\t width: 10rem; 
 
\t height: 2.5rem; 
 
\t border: 1px solid; 
 
\t background: bisque; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<?php 
 
//-------------------------------- CREATION D'UN WEB SERVICE JSON --------------------------// 
 

 
\t //Création d'une action 
 
\t $currentAction = $_REQUEST['action']; 
 
\t 
 
\t 
 
\t switch($currentAction){ 
 
\t \t case 'loadBlocSite': echo json_encode(loadBlocSite()); break; \t \t 
 
\t } 
 
\t 
 
\t 
 
\t 
 
\t function loadBlocSite() 
 
\t { 
 
\t \t //Création d'un tableau 
 
\t \t $currentArrayData = array(); 
 
\t \t 
 
\t \t //Remplir le tableau 
 
\t \t $currentArrayData['name'] = 'test'; 
 
\t \t $currentArrayData['value'] = 'val'; 
 
\t \t $currentArrayData['TNT'] = array(
 
\t \t \t \t \t \t \t \t 'Criticité' \t \t \t => \t '10', 
 
\t \t \t \t \t \t \t \t 'Sans supervision' \t => \t '8', 
 
\t \t \t \t \t \t \t \t 'Non nominale' \t \t => \t '5', 
 
\t \t \t \t \t \t \t \t '-3dB' \t \t \t \t => \t '3', 
 
\t \t \t \t \t \t \t \t 'RX' \t \t \t \t => \t '4', 
 
\t \t \t \t \t \t \t \t 'Perte HF' \t \t \t => \t '15', 
 
\t \t \t \t \t \t \t \t 'Décrochage HS' \t \t => \t '6' 
 
\t \t \t \t \t \t \t \t); 
 
     $dataContent['FM'] = array(
 
\t \t \t \t \t \t \t 'criticite' \t \t \t => \t '2', 
 
\t \t \t \t \t \t \t 'sanssupervision' \t => \t '6', 
 
\t \t \t \t \t \t \t 'nonominale' \t \t => \t '0', 
 
\t \t \t \t \t \t \t '-3dB' \t \t \t \t => \t '4', 
 
\t \t \t \t \t \t \t 'RX' \t \t \t \t => \t '9', 
 
\t \t \t \t \t \t \t 'Perte HF' \t \t \t => \t '11', 
 
\t \t \t \t \t \t \t 'Décrochage HS' \t \t => \t '1' 
 
\t \t return $currentArrayData; \t \t 
 
\t } 
 
\t 
 
?> 
 
\t \t <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 

 
<body> 
 

 
<!-- ################################ --> 
 
<!-- CONTENU HTML DE CETTE PAGE --> 
 
<!-- ################################ --> 
 
<div id="mainView" name="mainView" class="clsMainView"> 
 
<div id="mainViewContainer" name="mainViewContainer" class="clsMainViewContainer"> 
 

 
<div id="boxLV1" name="boxLV1" class="clsBoxLV"> 
 

 
    <div id="blockAlarme" name="blockAlarme" class="clsBlock"> 
 
    <div id="blockAlarmeHeader" name="blockAlarmeHeader" class="clsBlockHeader"> 
 
     <div class="clsBlockHeaderTitle">Alarme</div> 
 
     <div class="clsBlockHeaderReduce"><i class="fa fa-window-minimize" aria-hidden="true"></i></div> 
 
    </div> 
 
    <div id="blockAlarmeContent" name="blockAlarmeContent" class="clsBlockContent"></div> 
 
    </div> 
 

 
    <div id="blockTicket" name="blockTicket" class="clsBlock"> 
 
    <div id="blockTicketHeader" name="blockTicketHeader" class="clsBlockHeader"> 
 
     <div class="clsBlockHeaderTitle">Ticket</div> 
 
     <div class="clsBlockHeaderReduce"><i class="fa fa-window-minimize" aria-hidden="true"></i></div> 
 
    </div> 
 
    <div id="blockTicketContent" name="blockTicketContent" class="clsBlockContent"></div> 
 
    </div> 
 

 
    <div id="blockSites" name="blockSites" class="clsBlock"> 
 
    <div id="blockSitesHeader" name="blockSitesHeader" class="clsBlockHeader"> 
 
     <div class="clsBlockHeaderTitle">Sites</div> 
 
     <div class="clsBlockHeaderReduce"><i class="fa fa-window-minimize" aria-hidden="true"></i></div> 
 
    </div> 
 
    <div id="blockSitesContent" name="blockSitesContent" class="clsBlockContent"></div> 
 
    </div> 
 

 
    <div id="blockTech" name="blockTech" class="clsBlock"> 
 
    <div id="blockTechHeader" name="blockTechHeader" class="clsBlockHeader"> 
 
     <div class="clsBlockHeaderTitle">Technicien</div> 
 
     <div class="clsBlockHeaderReduce"><i class="fa fa-window-minimize" aria-hidden="true"></i></div> 
 
    </div> 
 
    <div id="blockTechContent" name="blockTechContent" class="clsBlockContent"></div> 
 
    </div> 
 

 

 
</div> 
 

 

 

 
<div id="boxLV2" name="boxLV2" class="clsBoxLV"> 
 
    <div id="boxLV2header" name="boxLV2header" class="clsBoxLVheader"> 
 
    <div id="boxLV2title" name="boxLV2title" class="clsBoxLVtitle">titre</div> 
 
    <div id="boxLV2back" name="boxLV2back" class="clsBoxLVback"><i class="fa fa-chevron-left fa-lg" aria-hidden="true"></i></div> 
 
    </div> 
 
    <div id="boxLV2Content" name="boxLV2Content" class="clsBoxLVContent">Content</div> 
 
</div> 
 
</div> 
 
</div>

来源

2017-08-01 Zee

'alarmeContent ='是正确的第一线，但你应该从第二行改为'alarmeContent + ='结束，否则每行都会覆盖先例 – Kaddath

我在所有行中都改变了= =除了第一行，但仍然没有工作 – Zee

你的ajax请求返回一个空水库ponse在你的片段中，所以我们不能真正测试 – Kaddath

因为要覆盖变量

alarmeContent = '<div class="wrapContent">'; 
alarmeContent = '<div class="tableHeader">'; //replaces last line 
alarmeContent = '<div class="tableCell_title">TNT</div>'; //replaces last line

应当+ =

alarmeContent = '<div class="wrapContent">'; 
alarmeContent += '<div class="tableHeader">'; 
alarmeContent += '<div class="tableCell_title">TNT</div>';

来源

2017-08-01 13:22:00 epascarello

thank's ..i用+ =编辑了片段，但stil不工作 – Zee

可变alarmeContent定义数次。你应该串连你的字符串像

alarmeContent +='...';

而且alarmeContent是一个“独立的”数据对象的变量，而不是一部分。所以

$('#blockAlarmeContent').append(alarmeContent);

应该做的工作

来源

2017-08-01 13:23:48 Auskennfuchs

我刚刚编辑了所有提到的所有错误，但stil不起作用 – Zee

然后尝试调试浏览器控制台上的值。在追加它之前添加一个'console.log（alarmeContent）'，看它是否包含正确的数据。 – Auskennfuchs

并确保您的数据对象包含TNT和FM等所有子对象。控制台也应该在这里帮助你。 – Auskennfuchs

您可能需要使用对象的文字，让你拥有美丽的多行字符串：

alarmeContent = 
`<div class="wrapContent"> 
    <div class="tableHeader"> 
    </div> 
    </div> ` 
;

来源

2017-08-01 13:27:48

@Jones w ..谢谢你，我会检查出来:) – Zee

AJAX追加问题

回答

相关问题