XMLHttpRequest предотвращает отображение моей кривой в скрипте

ProgramBox

XMLHttpRequest предотвращает отображение моей кривой в скрипте

Post author:admin
Запись опубликована:8 января, 2022
Post category:Вопросы по программированию

#javascript #php #html #jquery

Вопрос:

Я пытаюсь получать данные в режиме реального времени для отображения на кривой, но когда я использую XMLHttpRequest, моя кривая больше не отображается

вот мои коды :

index.php

 <?php 
    include("connexion.php");
 ?>
<html>
<head>
    <title>
    </title>
    <!-- CSS only -->

<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft 2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704 h835Lr 6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container">
        <div id="link_wrapper">

        </div>

    </div>
</body>
</html>
<script>
  
function loadXMLDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 amp;amp; this.status == 200) {
      document.getElementById("link_wrapper").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "server.php", true);
  xhttp.send();
}
setInterval(function(){
    loadXMLDoc();
    // 1sec
},1000);

window.onload = loadXMLDoc;
</script>

Я получаю данные в реальном времени благодаря ajax jquery, но я не могу изменить свою кривую

Я использую библиотеку lq canavasjs для отображения кривой, когда я не интегрировал ajax внутри, мой код отображал кривую без проблем, поэтому я говорю себе, что auie c возможен, это ajax

server.php

 <?php

include('connexion.php');
$query = mysqli_query($db, "SELECT valeur from tension ORDER BY id DESC LIMIT 1");
while($row = mysqli_fetch_array($query)){
        $tension = $row['valeur'];
        echo $tension;
    }
echo "sortir";  
$dataPoints = array();
$y = $tension;


for($i = 0; $i < 10; $i  ){
  $y = $y; 
  array_push($dataPoints, array("x" => $i, "y" => $y));
}
 echo "naubout";
?>


<!DOCTYPE HTML>
<html>
<head>
  <script>
window.onload = function() {
 
var dataPoints = <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>;

var chart = new CanvasJS.Chart("chartContainer", {
  theme: "light2",
  title: {
    text: "Valeur detension en temps reel"
  },
  axisX:{
    title: "Time in millisecond"
  },
  axisY:{
    suffix: " V"
  },
  data: [{
    type: "line",
    yValueFormatString: "#,##0.0#",
    toolTipContent: "{y} V",
    dataPoints: dataPoints
  }]
});
chart.render();
 
var updateInterval = 1500;
setInterval(function () { updateChart() }, updateInterval);
 
var xValue = dataPoints.length;
var yValue = dataPoints[dataPoints.length - 1].y;
 
function updateChart() {
  yValue  = (Math.random() - 0.5) * 0.1;
  dataPoints.push({ x: xValue, y: yValue });
  xValue  ;
  chart.render();
};
 
}
</script>
  
</head>
<body>
  

</body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="canvasjs.min.js"></script>
</html>

connexion.php

 <?php 
    $servername = "localhost";
    $username  = "root";
    $password = "";
    $dbname = "iot";



    $db = mysqli_connect($servername, $username, $password, $dbname);

    if (!$db) {
        die("Connection Failed". mysqli_connect_error());
    }
 ?>

1. вы проверили, что ваш вызов ajax действительно возвращает то, что вы думаете, каково содержание this.responseText

2. спасибо, я не знаю, потому что я впервые использую ajax, цель которого-получать данные в режиме реального времени из моей базы данных. Но я думаю, что он возвращает только тексты, однако, когда я пытаюсь отобразить текст в server.php внутри тега сценария он не отображается

3. Добро пожаловать в Stack Overflow. Возможно, вы захотите рассмотреть возможность использования .load() . Также помните, что <script> теги часто не используются или не загружаются с данными HTML, запрошенными AJAX. Я бы посоветовал обновить ваш PHP, чтобы собрать и собрать данные и представить их в виде JSON или XML (вместо HTML). Таким образом, ваш JavaScript может вызывать данные с сервера и выполнять необходимые операции для их отображения.

4. Спасибо, да, я попробую загрузить (), чтобы лучше понять мою ситуацию, теги скрипта не учитываются при запросе ajax?

Ответ №1:

Учесть следующее.

Создайте PHP, что-то вроде getDataPoints.php:

 <?php
include('connexion.php');
$query = mysqli_query($db, "SELECT valeur from tension ORDER BY id DESC LIMIT 1");
$x = 0;
$y = 0;
$dataPoints = array();
while($row = mysqli_fetch_array($query)){
  $y = $row['valeur'];
}
for($x; $x < 10; $x  ){
  array_push($dataPoints, array($x, $y);
}
header('Content-Type: application/json; charset=utf-8');
echo json_encode($dataPoints);
?>

Теперь, когда ты позвонишь getDataPoints.php, вы должны увидеть результаты JSON (например $y ,= 1 ):

 [
  [0, 1],
  [1, 1],
  [2, 1],
  [3, 1],
  [4, 1],
  [5, 1],
  [6, 1],
  [7, 1],
  [8, 1],
  [9, 1]
];

Теперь вы можете делать такие вещи, как:

 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft 2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704 h835Lr 6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

<script>
var dataPoints, chart;

$.getJSON("getDataPoints.php", function(results){
  dataPoints = results;
  chart = new CanvasJS.Chart("chartContainer", {
    theme: "light2",
    title: {
      text: "Valeur detension en temps reel"
    },
    axisX:{
      title: "Time in millisecond"
    },
    axisY:{
      suffix: " V"
    },
    data: [{
      type: "line",
      yValueFormatString: "#,##0.0#",
      toolTipContent: "{y} V",
      dataPoints: dataPoints
    }]
  });
  chart.render();
});
</script>

<div class="container">
  <div id="link_wrapper">
    <div id="chartContainer" style="height: 370px; width: 100%;"></div>
    <script src="canvasjs.min.js"></script>
  </div>
</div>

1. спасибо, когда я использую ваш код, ничего не отображается

2. @essayator Вы захотите сначала протестировать PHP. Убедитесь, что запросы к нему дают правильный ответ. Затем вы можете просмотреть свой код на стороне клиента в браузере. Видите ли вы ошибки в своей консоли. Что на вкладке «Сеть» ищет запрос и ответ?

3. Спасибо, я получаю таблицу от json, но я не могу нарисовать кривую,

4. Я не вижу, как отправить свой код, чтобы вы могли видеть, где я нахожусь, потому что мне удается получать значения с сервера, то есть таблицу, как вы мне ее показали, но я не могу нарисовать кривую

5. @essayator поскольку ваш пример опирается на данные сервера, я не могу помочь дальше. Я не могу воспроизвести проблему или протестировать дальнейшие решения без надлежащих примеров.

Метки: XMLHttpRequest предотвращает отображение моей кривой в скрипте