$.getJSON правильно выполняется, но теги js не обновляются (решено)

Я не эксперт по JS и хотел бы получить любую поддержку. Я пытаюсь обновлять многие теги (1 в коде здесь внизу) каждые 1000 мс.

Я использую этот код:

<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 работает, потому что я вижу "ответ" на вкладке сети (хром) с обновленными тегами:

{ "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>

2 ответа

Я думаю, вам нужно декодировать данные в формате json следующим образом:

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

Спасибо за вашу поддержку.

Правильно, это была проблема с анализом.

С наилучшими пожеланиями

Другие вопросы по тегам