getjson - $.getJSON 正确执行，但 js 标签未更新（已解决）

Question

我不是 JS 方面的专家，我希望得到任何支持。我正在尝试每 1000 毫秒更新许多标签（此处代码中的 1 个）。

我正在使用这段代码：

<script type="text/javascript">
        $(document).ready(function(){
            $.ajaxSetup({ cache: false });
                setInterval(function() {
                $.getJSON("Maj_Tag_PLC.htm", function(data){
                    $('#watchdog').text(data.watchdog);
                    });
                },1000);
        });

这个 getjson 似乎有效，因为我在带有更新标签的网络选项卡（chrome）中看到“响应”：

{ "watchdog" : 29304, "count" : 29304, "Etat_Lampe_Plafond_Cuisine" : 0, "Etat_Lampe_Tetes_Murs_Cuisine" : 0, "Etat_Lampe_Plafond_Salon_Rue" : 0, "Etat_Lampe_Plafond_Salon_Jardin" : 0, "Etat_Lampe_Tetes_Murs_Salon" : 0, "Temps_Restant_Plafond_Cuisine" : T#0MS, "Temps_Restant_Tetes_Murs_Cuisine" : T#0MS, "Temps_Restant_Plafond_Salon_Rue" : T#0MS, "Temps_Restant_Plafond_Salon_Jardin" : T#0MS, "Temps_Restant_Tetes_Murs_Salon" : T#0MS, "Temps_Total_Plafond_Cuisine" : T#0MS, "Temps_Total_Tetes_Murs_Cuisine" : T#0MS, "Temps_Total_Plafond_Salon_Rue" : T#0MS, "Temps_Total_Plafond_Salon_Jardin" : T#0MS, "Temps_Total_Tetes_Murs_Salon" : T#0MS }

--> 这对应于我的“Maj_Tag_PLC.htm”

伟大的！

但是，我的代码的以下部分似乎从未执行过：

$('#watchdog').text(data.watchdog)

我这么说是因为看门狗字段永远不会更新，并且如果我在其上放置断点，脚本永远不会在此行停止。

知道发生了什么吗？

谢谢你的帮助

（我已经阅读了一些关于“异步查询”的信息以及“脚本的这一部分可以在返回答案之前执行”这一事实，但我真的不明白这是什么意思以及如何解决它。）

{
"watchdog" : :="DB_HMI".Watchdog_int:,
"count" : :="DB_HMI".Watchdog_int:,

"Etat_Lampe_Plafond_Cuisine" : :="DB_HMI".Lampe_Plafond_Cuisine.Etat_Lampe:,
"Etat_Lampe_Tetes_Murs_Cuisine" : :="DB_HMI".Lampe_Tetes_Murs_Cuisine.Etat_Lampe:,
"Etat_Lampe_Plafond_Salon_Rue" : :="DB_HMI".Lampe_Plafond_Salon_Rue.Etat_Lampe:,
"Etat_Lampe_Plafond_Salon_Jardin" : :="DB_HMI".Lampe_Plafond_Salon_Jardin.Etat_Lampe:,
"Etat_Lampe_Tetes_Murs_Salon" : :="DB_HMI".Lampe_Tetes_Murs_Salon.Etat_Lampe:,

"Temps_Restant_Plafond_Cuisine" : :="DB_HMI".Lampe_Plafond_Cuisine.Temps_Restant:,
"Temps_Restant_Tetes_Murs_Cuisine" : :="DB_HMI".Lampe_Tetes_Murs_Cuisine.Temps_Restant:,
"Temps_Restant_Plafond_Salon_Rue" : :="DB_HMI".Lampe_Plafond_Salon_Rue.Temps_Restant:,
"Temps_Restant_Plafond_Salon_Jardin" : :="DB_HMI".Lampe_Plafond_Salon_Jardin.Temps_Restant:,
"Temps_Restant_Tetes_Murs_Salon" : :="DB_HMI".Lampe_Tetes_Murs_Salon.Temps_Restant:,

"Temps_Total_Plafond_Cuisine" : :="DB_HMI".Lampe_Plafond_Cuisine.Temps_Total:,
"Temps_Total_Tetes_Murs_Cuisine" : :="DB_HMI".Lampe_Tetes_Murs_Cuisine.Temps_Total:,
"Temps_Total_Plafond_Salon_Rue" : :="DB_HMI".Lampe_Plafond_Salon_Rue.Temps_Total:,
"Temps_Total_Plafond_Salon_Jardin" : :="DB_HMI".Lampe_Plafond_Salon_Jardin.Temps_Total:,
"Temps_Total_Tetes_Murs_Salon" : :="DB_HMI".Lampe_Tetes_Murs_Salon.Temps_Total:

}

<!-- AWP_In_Variable Name='"DB_HMI".Watchdog_int' -->

<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Cave.Cmd_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Facade_Jardin.Cmd_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Annexe_Veranda_Buanderie.Cmd_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Garage.Cmd_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Annexe_Grenier.Cmd_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_WC.Cmd_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Cuisine.Cmd_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Tetes_Murs_Cuisine.Cmd_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Salon_Jardin.Cmd_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Salon_Rue.Cmd_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Tetes_Murs_Salon.Cmd_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Facade_Rue.Cmd_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Chambre_Amis.Cmd_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Chambre_TAO.Cmd_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Entre_Fenetre_Chambre_TAO.Cmd_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Chambre_Parent.Cmd_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_SDB.Cmd_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Hall_De_Nuit.Cmd_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Grenier.Cmd_Lampe' -->

<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Cave.Etat_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Facade_Jardin.Etat_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Annexe_Veranda_Buanderie.Etat_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Garage.Etat_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Annexe_Grenier.Etat_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_WC.Etat_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Cuisine.Etat_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Tetes_Murs_Cuisine.Etat_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Salon_Jardin.Etat_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Salon_Rue.Etat_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Tetes_Murs_Salon.Etat_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Facade_Rue.Etat_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Chambre_Amis.Etat_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Chambre_TAO.Etat_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Entre_Fenetre_Chambre_TAO.Etat_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Chambre_Parent.Etat_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_SDB.Etat_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Hall_De_Nuit.Etat_Lampe' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Grenier.Etat_Lampe' -->

<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Cave.Temps_Restant' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Facade_Jardin.Temps_Restant' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Annexe_Veranda_Buanderie.Temps_Restant' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Garage.Temps_Restant' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Annexe_Grenier.Temps_Restant' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_WC.Temps_Restant' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Cuisine.Temps_Restant' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Tetes_Murs_Cuisine.Temps_Restant' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Salon_Jardin.Temps_Restant' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Salon_Rue.Temps_Restant' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Tetes_Murs_Salon.Temps_Restant' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Facade_Rue.Temps_Restant' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Chambre_Amis.Temps_Restant' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Chambre_TAO.Temps_Restant' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Entre_Fenetre_Chambre_TAO.Temps_Restant' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Chambre_Parent.Temps_Restant' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_SDB.Temps_Restant' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Hall_De_Nuit.Temps_Restant' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Grenier.Temps_Restant' -->

<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Cave.Temps_Total' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Facade_Jardin.Temps_Total' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Annexe_Veranda_Buanderie.Temps_Total' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Garage.Temps_Total' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Annexe_Grenier.Temps_Total' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_WC.Temps_Total' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Cuisine.Temps_Total' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Tetes_Murs_Cuisine.Temps_Total' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Salon_Jardin.Temps_Total' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Salon_Rue.Temps_Total' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Tetes_Murs_Salon.Temps_Total' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Facade_Rue.Temps_Total' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Chambre_Amis.Temps_Total' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Chambre_TAO.Temps_Total' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Entre_Fenetre_Chambre_TAO.Temps_Total' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Chambre_Parent.Temps_Total' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_SDB.Temps_Total' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Hall_De_Nuit.Temps_Total' -->
<!-- AWP_In_Variable Name='"DB_HMI".Lampe_Plafond_Grenier.Temps_Total' -->



<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <meta http-equiv="refresh" content="5" > -->
<script src="jquery-3.4.1.min.js"></script>

<style>

.switch {
  position: relative;
  display: inline-block;
  width: 90px;
  height: 34px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ca2222;
  -webkit-transition: .4s;
  transition: .4s;
   border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #2ab934;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(55px);
}

/*------ ADDED CSS ---------*/
.slider:after
{
content:'OFF';
color: white;
display: block;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
font-size: 10px;
font-family: Verdana, sans-serif;
}

input:checked + .slider:after
{  
  content:'ON';
}

/*--------- END --------*/

/*----------TAbleau -----*/

table
{
    border-collapse: collapse; 
}
td
{
    border: 1px solid black;
	
}


</style>
</head>
<body>

-- Affichage watchdog mis a jour-----------------
<br />
watchdog :  
<label id="watchdog">0</label>
<br />
watchdog 2:  
<label id="watchdog2">0</label>

<br /> Lampe Cave etat lampe : <label id="Lampe_Cave_etat_lampe">0</label> <br />

<br />
 

-- Affichage myint -----------------
<br />

watchdog : :="webdata".myInt:
 
<br />



-- Affichage bool mis à jour -----------------
<br />

 <br /> Bool1 : <label id="bool1">0</label> <br />
 
------------------ Gestion lumières-------------------
<br />

<table>

	<tr> 
		<td> Plafond_Cuisine </td> 
		<td> <label id= "switch" name="switch" class="switch">
			  <input id= "Etat_Lampe_Plafond_Cuisine" type="checkbox"  onclick= send_ajax_request('"DB_HMI".Lampe_Plafond_Cuisine.Cmd_Lampe',"true") >
			  <span class="slider"></span>
			</label>
		</td>
		<td> Temps restant = <label id="Temps_Restant_Plafond_Cuisine">0</label></td> 
		<td> Temps Total = <label id="Temps_Total_Plafond_Cuisine">0</label></td> 
	</tr>
	
	<tr> 
		<td> Tetes_Murs_Cuisine </td> 
		<td> <label id= "switch" name="switch" class="switch">
			  <input id= "Etat_Lampe_Tetes_Murs_Cuisine" type="checkbox"  onclick= send_ajax_request('"DB_HMI".Lampe_Tetes_Murs_Cuisine.Cmd_Lampe',"true") >
			  <span class="slider"></span>
			</label>
		</td>
				<td> Temps restant = <label id="Temps_restant_Tetes_Murs_Cuisine">0</label></td> 
		<td> Temps Total = <label id="Temps_Total_Tetes_Murs_Cuisine">0</label></td> 
	</tr>	
	
		<tr> 
		<td> Plafond_Salon_Jardin </td> 
		<td> <label id= "switch" name="switch" class="switch">
			  <input id= "Etat_Lampe_Plafond_Salon_Jardin" type="checkbox"  onclick= send_ajax_request('"DB_HMI".Lampe_Plafond_Salon_Jardin.Cmd_Lampe',"true") >
			  <span class="slider"></span>
			</label>
		</td>
		<td> Temps restant = <label id="Temps_Restant_Plafond_Salon_Jardin">0</label></td> 
		<td> Temps Total = <label id="Temps_Total_Plafond_Salon_Jardin">0</label></td> 
	</tr>

	<tr> 
		<td> Plafond_Salon_Rue </td> 
		<td> <label id= "switch" name="switch" class="switch">
			  <input id= "Etat_Lampe_Plafond_Salon_Rue" type="checkbox"  onclick= send_ajax_request('"DB_HMI".Lampe_Plafond_Salon_rue.Cmd_Lampe',"true") >
			  <span class="slider"></span>
			</label>
		</td>
		<td> Temps restant = <label id="Temps_Restant_Plafond_Salon_rue">0</label></td> 
		<td> Temps Total = <label id="Temps_Total_Plafond_Salon_rue">0</label></td> 
	</tr>
		
	<tr> 
		<td> Tetes_Murs_Salon </td> 
		<td> <label id= "switch" name="switch" class="switch">
			  <input id= "Etat_Lampe_Tetes_Murs_Salon" type="checkbox"  onclick= send_ajax_request('"DB_HMI".Lampe_Tetes_de_Murs_Salon.Cmd_Lampe',"true") >
			  <span class="slider"></span>
			</label>
		</td>
				<td> Temps restant = <label id="Temps_Restant_Tetes_Murs_Salon">0</label></td> 
		<td> Temps Total = <label id="Temps_Total_Tetes_Murs_Salon">0</label></td> 
	</tr>	
	
	
</table>
	 -----------------------------------------------------------------

</body>

<script type="text/javascript">
        $(document).ready(function(){
            $.ajaxSetup({ cache: false });
				setInterval(function() {
				$.getJSON("Maj_Tag_PLC.htm", function(data){
					$('#watchdog').text(data.watchdog);

					});
					
				},1000);
	
		});
  


					/*
										$('#watchdog2').text(data.count);
					$('#Etat_Lampe_Plafond_Cuisine').prop("checked",data.Etat_Lampe_Plafond_Cuisine);
					$('#Etat_Lampe_Tetes_Murs_Cuisine').prop("checked",data.Etat_Lampe_Tetes_Murs_Cuisine);
					$('#Etat_Lampe_Plafond_Salon_Rue').prop("checked",data.Etat_Lampe_Plafond_Salon_Rue);
					$('#Etat_Lampe_Plafond_Salon_Jardin').prop("checked",data.Etat_Lampe_Plafond_Salon_Jardin);
					$('#Etat_Lampe_Tetes_Murs_Salon').prop("checked",data.Etat_Lampe_Tetes_Murs_Salon);
					$('#Checkbox_Plafond_Cuisine').prop("checked",data.Etat_Lampe_Plafond_Cuisine);
					$('#Temps_Restant_Plafond_Cuisine').text(data.Temps_Restant_Plafond_Cuisine);
					$('#Temps_Total_Plafond_Cuisine').text(data.Temps_Total_Plafond_Cuisine);
					$('#Checkbox_Tetes_Murs_Cuisine').prop("checked",data.Etat_Lampe_Tetes_Murs_Cuisine);
					$('#Temps_Restant_Tetes_Murs_Cuisine').text(data.Temps_Restant_Tetes_Murs_Cuisine);
					$('#Temps_Total_Tetes_Murs_Cuisine').text(data.Temps_Total_Tetes_Murs_Cuisine);
					$('#Checkbox_Plafond_Salon_Rue').prop("checked",data.Etat_Lampe_Plafond_Salon_Rue);
					$('#Temps_Restant_Plafond_Salon_Rue').text(data.Temps_Restant_Plafond_Salon_Rue);
					$('#Temps_Total_Plafond_Salon_Rue').text(data.Temps_Total_Plafond_Salon_Rue);
					$('#Checkbox_Plafond_Salon_Jardin').prop("checked",data.Etat_Lampe_Plafond_Salon_Jardin);
					$('#Temps_Restant_Plafond_Salon_Jardin').text(data.Temps_Restant_Plafond_Salon_Jardin);
					$('#Temps_Total_Plafond_Salon_Jardin').text(data.Temps_Total_Plafond_Salon_Jardin);
					$('#Checkbox_Tetes_Murs_Salon').prop("checked",data.Etat_Lampe_Tetes_Murs_Salon);
					$('#Temps_Restant_Tetes_Murs_Salon').text(data.Temps_Restant_Tetes_Murs_Salon);
					$('#Temps_Total_Tetes_Murs_Salon').text(data.Temps_Total_Tetes_Murs_Salon);
					*/


	function send_ajax_request(variable, fieldId) 
	{
		if (window.XMLHttpRequest) 
		{
			req = new XMLHttpRequest();		// Mozilla and others
		} 
		else if (window.ActiveXObject) 
		{
			req = new ActiveXObject("Microsoft.XMLHTTP");	// Microsoft
		} 
		else 
		{
			alert("Der Browser unterstuezt kein Ajax");
		}
		// Oringinal code : var value = document.getElementById(fieldId).value;
		var value = fieldId.checked;
		
		var req_url = "?"+variable+"="+value+"&"+Math.random();
		//debug alert(req_url);
		req.open("GET", req_url, false);
		//req.onreadystatechange = ajax_callback;
		req.send(null);
	}
</script>
</html>

score 1 · Accepted Answer

我认为您需要像这样解码 json 格式的数据：

$.getJSON("Maj_Tag_PLC.htm", function(data){
  let result = JSON.parse(data);
  $('#watchdog').text(result.watchdog);
});

score 0 · Accepted Answer

0

感谢你的支持。

正确，这是一个解析问题。

最好的祝愿

于 2020-01-02T09:45:44.803 回答

getjson - $.getJSON 正确执行，但 js 标签未更新（已解决）

2 回答 2

Related

Reference