Я работаю над созданием вывода на части страницы с регулярными интервалами с помощью php и javascript. Я новичок в js, поэтому, пожалуйста, простите любые тупые вопросы.
Исходный PHP-код;
<?php $data = file_get_contents("http://" . $phoneControlUsername .":" . $phoneControlPassword . "@" . $ip . "/CGI/Screenshot"); $filename = "tempFiles/phoneScreenshot$dev"; file_put_contents($filename, $data); echo "<img src=" . $filename . " style='width:100%;'>" ?> Это было частью моей главной страницы, но я переместил ее в свой собственный файл с именем screenGen.php. Моя главная страница может вызвать ее без проблем;
require('screenGen.php');
Мне нужно, чтобы этот конкретный код генерировался каждые пять секунд. Поэтому, читая, как javascript и php могут использоваться вместе, я придумал;
<script> window.setInterval(function() { screenGen = '<?php require('screenGen.php'); ?>'; document.write(screenGen); }, 5000); </script>
Конечно, это не работает. Я не могу найти правильные указания о том, как сделать что-то подобное, потому что, будучи новичком в этом вопросе, я не знаю, как его искать. Как я могу генерировать screenGen.php через регулярные промежутки времени?
Одним из решений вашей проблемы было бы использование запросов, поскольку они заставят ваш сервер повторно генерировать вывод screenGen.
В исходном коде javascript вы можете:
Замените require в screenGen переменной screenGen , выполнив запрос GET в файл screenGen.php. Вы сохраните ответ на запрос в переменной screenGen, а затем напишите его, как вы уже делаете.
Обобщить:
echo "<img src=" . $filename . " style='width:100%;'>" ) Пример кода:
HTTP Получить запрос вспомогательной функции (взято из SO ):
function httpGet(theUrl) { var xmlHttp = new XMLHttpRequest(); xmlHttp.open( "GET", theUrl, false ); // false for synchronous request xmlHttp.send( null ); return xmlHttp.responseText; }
JAVASCRIPT, который вызывается скриптом:
window.setInterval(function() { screenGen = httpGet('<domain>/<script_folder>/screenGen.php'); document.write(screenGen); }, 5000);
Я нашел ответ, который проще, чем опубликованные.
1) Установите jquery на свой сервер. Если вы используете Debian, вы можете установить его с помощью sudo apt-get install libjs-jquery
2) В вашем PHP;
<div id="auto"></div> <script language="javascript" type="text/javascript" src="/javascript/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready( function() { $('#auto').load('screenGen.php'); refresh(); }); function refresh() { setTimeout( function() { $('#auto').load('screenGen.php'); refresh(); }, 5000); } </script>
Вы можете получить результат php с помощью AJAX, а затем добавить результат в тело страницы следующим образом:
function getImage(url){ var xhttp = new XMLHttpRequest(); xhttp.onload = function () { //check the state of the XMLHttpRequest if (xhttp.readyState !== xhttp.DONE && xhttp.status !== 200) return; //append php page to the document body document.body.innerHTML += xhttp.responseText; //call itself after 5 seconds setTimeout(getImage, 5000); }; xhttp.open("GET", url); xhttp.send(); }
Применение:
getImage("screenGen.php");
Я использовал setTimeout вместо setInterval потому что AJAX является асинхронным, и таким образом вы можете гарантировать, что следующий вызов будет сделан через 5 секунд после возврата предыдущего запроса.
Я также использую document.body.innerHTML += вместо document.write потому что последний перезаписывает весь текст страницы (если только это не предполагается) после полной загрузки документа HTML.
Вы можете использовать JQuery для загрузки динамического содержимого внутри контейнера. Поэтому добавьте дочерний элемент в корневой контейнер и загрузите контент, созданный с помощью PHP
<div id="images"></div> <script> window.setInterval(function() { var el = $('<div></div>'); $('#images').append(el); el.load("/screenGen.php"); }, 5000); </script>.<div id="images"></div> <script> window.setInterval(function() { var el = $('<div></div>'); $('#images').append(el); el.load("/screenGen.php"); }, 5000); </script>
Используйте Ajax. Просто сделайте вот так:
используйте JQuery на своей странице <head> как это
<html> <head> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> </head> <body></body> </html>
затем создайте функцию запроса AJAX в javascript и вызовите ее из setInterval:
<script> (function($) { "use strict"; function getScreenGen(){ $.ajax({ url : "/screenGen.php", // put the path(url) of your script here data: { "pass_some_dynamic_data":"123", }, method: "GET", success: function(res) { $("body").empty(); $("body").append($(res)); // append data from screenGen.php to page's body. You can set here some elemetn with class(.content) or id(#content) } }); } $(document).ready(function(){ window.setInterval(getScreenGen, 5000); // call our function every 5 sec }); })(jQuery); </script>
теперь поместите все вместе в одну папку и запустите. см. небольшой образец здесь = https://drive.google.com/file/d/0B0fajNFg3-Zka1hmNHZUR0JIa2M/view?usp=sharing