Получить эхо PHP в JavaScript (отдельные файлы)

Я искал в течение нескольких часов и не может поставить эту работу ...Получить эхо PHP в JavaScript (отдельные файлы)

Это мой первый сайт, у меня есть датчик Google, что нужно спросить базу данных для значения, которое оно должно положить на датчик. Я знаю, как спросить базу данных и как обновить калибр, проблема в том, как передать переменную echo из файла php в файл javascript. (Код php должен находиться в отдельном файле или иначе указатели google не будут отображаться).

Вы можете проверить актуальную версию сайта here (На данный момент датчики статические).

PHP код:

<?php 
    $DB_NAME = 'TSB'; 
    $DB_HOST = 'db.tecnico.ulisboa.pt'; 
    $DB_USER = 'xxxxxxxxx'; 
    $DB_PASS = 'xxxxxxxxx'; 
    $mysqli = new mysqli($DB_HOST, $DB_USER, $DB_PASS); 
    if (mysqli_connect_errno()) { 
     printf("Connect failed: %s\n", mysqli_connect_error()); 
     exit(); 
    } 
    $mysqli->query('USE xxxxxxxxxxx;'); 
    $result = $mysqli->query('SELECT SOC FROM TSB ORDER By time DESC LIMIT 1;'); 
    $row = $result->fetch_array(); 
    $soc = $row['SOC']; 
    echo $soc; 
?>

Выходной эхо является INT или, по крайней мере, пришел в качестве одного из базы данных.

То, что я пытаюсь в яваскрипта файла:

function SOC() { 
    var data = google.visualization.arrayToDataTable([ 
    ['Label', 'Value'], 
    ['SOC', 0] 
    ]); 
    var options = { 
    width: 250, height: 250, 
    redFrom: 0, redTo: 10, 
    yellowFrom: 10, yellowTo: 25, 
    minorTicks: 5, 
    majorTicks: ['0','25','50','75','100'] 
    }; 
    var formatter = new google.visualization.NumberFormat({ 
    suffix: '%', 
    fractionDigits: 0 
    }); 
    formatter.format(data, 1); 
    var chart = new google.visualization.Gauge(document.getElementById('SOC')); 

    chart.draw(data, options); 
    setInterval(function() { 
    var socPHP; 
    $.ajax({ 
     url: 'soc.php', 
     type: 'get', 
     dataType:'text', 
     // I don't know how to properly put the $soc from php in a javascript variable 
    }); 
    data.setValue(0, 1, 100); // 100 should be replaced by the value 
    //that came from the php file and the variable should be an INT 
    chart.draw(data, options); 
    }, 3000); 
}

UPDATE После Тины Предложения:

<?php 
    $DB_NAME = 'TSB'; 
    $DB_HOST = 'db.tecnico.ulisboa.pt'; 
    $DB_USER = 'xxxxx'; 
    $DB_PASS = 'xxxxx'; 
    $mysqli = new mysqli($DB_HOST, $DB_USER, $DB_PASS); 
    if (mysqli_connect_errno()) { 
     printf("Connect failed: %s\n", mysqli_connect_error()); 
     exit(); 
    } 
    $mysqli->query('USE xxxxxx;'); 
    $result = $mysqli->query('SELECT SOC FROM TSB ORDER By time DESC LIMIT 1;'); 
    $row = $result->fetch_array(); 
    $soc = $row['SOC']; 
?>; 

function SOC() { 
    var data = google.visualization.arrayToDataTable([ 
    ['Label', 'Value'], 
    ['SOC', 0] 
    ]); 
    var options = { 
    width: 250, height: 250, 
    redFrom: 0, redTo: 10, 
    yellowFrom: 10, yellowTo: 25, 
    minorTicks: 5, 
    majorTicks: ['0','25','50','75','100'] 
    }; 
    var formatter = new google.visualization.NumberFormat({ 
    suffix: '%', 
    fractionDigits: 0 
    }); 
    formatter.format(data, 1); 
    var chart = new google.visualization.Gauge(document.getElementById('SOC')); 

    chart.draw(data, options); 
    setInterval(function() { 
    data.setValue(0, 1, <?php echo $soc; ?>); 
    chart.draw(data, options); 
    }, 3000); 
}

источник

2017-01-01 Sebastião

Вы не можете использовать PHP в файле, в который вы хотите изменить переменную PHP? Если это так, то вы захотите использовать Javascript AJAX. – bugfroggy

Я пробовал с AJAX, но, возможно, я не сделал это правильно, можете ли вы отправить ответ с примером кода? –

@ bugfroggy не могли бы вы предоставить мне AJAX? –

Взгляните на th e документация, которая поставляется с датчиками, данные должны быть в формате: [label, value]

Один из способов достижения вашей цели - после того, как вы отправили запрос ajax, вам нужно построить массив в своем php, а затем использовать функцию json_encode для вывода данных. Вам также нужно добавить параметр dataType: 'JSON' к вашему запросу ajax.

EDIT: Его разочарование, читая все комментарии и видя, что вы не попадаете нигде, я написал следующее, которое вы должны уметь адаптировать.

Вам нужны 2 файла: HTML или PHP-файл, содержащий ваши HTML и JS, второй должен быть файлом PHP, содержащим ваш запрос к базе данных.

Файл 1:

<html> 
    <head> 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script type="text/javascript"> 
     google.charts.load('current', {'packages':['gauge']}); 
     google.charts.setOnLoadCallback(drawChart); 
     function drawChart() { 

     var data = google.visualization.arrayToDataTable([ 
      ['Label', 'Value'], 
      ['Memory', 80], 
      ['CPU', 55], 
      ['Network', 68] 
     ]); 

     var options = { 
      width: 400, height: 120, 
      redFrom: 90, redTo: 100, 
      yellowFrom:75, yellowTo: 90, 
      minorTicks: 5 
     }; 

     var chart = new google.visualization.Gauge(document.getElementById('chart_div')); 

     chart.draw(data, options); 

     setInterval(function() { 
      $.ajax({ 
       url: "g.php", 
       dataType: "JSON", 
       data:{}, 
       success: function(x){ 
        data.setValue(0, 1, x["key"]); 
        chart.draw(data, options); 
       } 
      }); 
     }, 2000); 
     } 
    </script> 
    </head> 
    <body> 
    <div id="chart_div" style="width: 400px; height: 120px;"></div> 
    </body> 
</html>

Файл 2, g.php (Это генерирует случайное число и выводит JSON Вы можете поместить свой запрос к базе данных здесь вместо функции рандов().):

<?php 

    $data = array(); 

    $data["key"] = rand(0,100); 

    print(json_encode($data)); 

?>

Запрос AJAX в первом файле отправляет запрос в файл 2, g.php каждые 2 секунды и извлекает простой объект JSON.

источник

2017-01-01 19:44:44 Juned

Благодарим вас за ответ, но если вы проверите https://developers.google.com/chart/interactive/docs/gallery/gauge в строке 23 файла javascript, они меняют калибровочное значение так, как я пытаюсь. –

Да, отлично работает на сервере. Какой результат вы получаете в консоли? – Juned

Большое спасибо! Я попытался запустить код отдельно от моего, но я думаю, что по какой-то причине javascript не входит в успех: часть Ajax. Я добавляю console.log внутри успеха, и он не выводит его. Вы проверили свой код? –

Если я понял ваш вопрос правильно, в вашем файле JavaScript просто добавить, где это необходимо, например,

['SOC', <?php echo $soc; ?>]

источник

2017-01-01 19:39:21 Tina

Спасибо за ваш ответ, но это не сработало, я получил это в консоли браузера: Неожиданный токен '<' –

Является ли файл '.php' файлом? Если нет, появится эта ошибка. Кроме того, PHP должен быть установлен явно. Если вы не можете установить PHP или изменить файл '.php', тогда AJAX - это путь, и я был бы счастлив представить пример. – bugfroggy

Как указано в bugfroggy, вам нужно изменить имя файла javascript с .js на .php .... тогда PHP-код будет работать в файле js. – Tina

Получить эхо PHP в JavaScript (отдельные файлы)

ответ

Смежные вопросы