AJAX追加问题

时间：2017-08-01 13:18:44

标签： javascript jquery html ajax append

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

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

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

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

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

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

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

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

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

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

	//Création d'une action
	$currentAction = $_REQUEST['action'];
	
	
	switch($currentAction){
		case 'loadBlocSite': echo json_encode(loadBlocSite()); break;		
	}
	
	
	
	function loadBlocSite()
	{
		//Création d'un tableau
		$currentArrayData = array();
		
		//Remplir le tableau
		$currentArrayData['name'] = 'test';
		$currentArrayData['value'] = 'val';
		$currentArrayData['TNT'] = array(
								'Criticité'			=>	'10',
								'Sans supervision'	=>	'8',
								'Non nominale'		=>	'5',
								'-3dB'				=>	'3',
								'RX'				=>	'4',
								'Perte HF'			=>	'15',
								'Décrochage HS'		=>	'6'
								);
        $dataContent['FM'] = array(
							'criticite'			=>	'2',
							'sanssupervision'	=>	'6',
							'nonominale'		=>	'0',
							'-3dB'				=>	'4',
							'RX'				=>	'9',
							'Perte HF'			=>	'11',
							'Décrochage HS'		=>	'1'
		return $currentArrayData;		
	}
	
?>
		<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>

3 个答案:

答案 0 :(得分：4)

因为你要覆盖变量！

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>';

答案 1 :(得分：2)

变量alarmeContent被定义了好几次。你应该连接像

这样的字符串 
alarmeContent +='...';

另外，alarmeContent是一个“独立”变量，不属于数据对象。 所以

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

应该做的工作

答案 2 :(得分：1)

您可能希望使用对象文字，因此您拥有漂亮的多行字符串：

alarmeContent = 
 `<div class="wrapContent">
     <div class="tableHeader">
     </div>
  </div> `
;
相关问题
最新问题