Передача данных из PHP в HTML

MrPavlik · Регистрация: 26.07.2013

Студворк — интернет-сервис помощи студентам

Здравствуйте, друзья.

Сразу прошу меня извинить за возможный глупый вопрос: в PHP я чуть больше, чем несведующий (имел дело только при создании формы отправки e-mail с сайта).

Задача такова: есть много статичных HTML-страниц. В определенном месте каждой страницы имеется область для отображения нескольких последних новостей следующего формата:

Заголовок новости
Картинка
Текст
Ссылка (на новость в подробном формате)

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

Сейчас логика устроена так, что в каждой HTML-странице новости вставлены как часть HTML-кода. Но при обновлении данного раздела приходится перелопачивать все HTML-файлы, что очень неудобно.

Я хочу организовать отображение новостей из PHP-файла, в котором было бы несколько шаблонов (заголовок, картинка, текст, ссылка к каждой новости), которые выбирались бы случайным образом и текст с картинкой и ссылкой вставлялся в определенный участок HTML-страницы. В самой HTML вставить только вызов определенной PHP-функции без параметров: выборка будет производиться в нужном PHP-скрипте. То есть, чтобы при обновлении новостей не нужно было трогать HTML-страницы, а изменять только PHP-скрипт.

Возникает вопрос: как сделать так, чтобы из PHP-скрипта вставить данные в HTML? Я работал с обратной задачей, когда данные из формы HTML передаются в PHP-скрипт как параметры, но чтобы передать текст из PHP в HTML (с сохранением стиля основной HTML-страницы), я не в курсе, как это лучше сделать.

Буду благодарен, если кто-нибудь объяснит основы, как это можно сделать. Возможно, приведёт минимальный шаблон. Нюансы своей задачи я допилю сам (выборка новости), но сейчас мне непонятна основа: как организовать передачу данных из PHP в HTML как форматированный HTML-код.

Заранее благодарен за ответ.

@sMockingbird · 26.07.2013, 16:53

Вы можете прямо в HTML-коде указать

HTML5
1
2
3
4
5
6
7
8
<html>
бла бла бла
 
<?
echo "<p>".$head."</p>";
?>
бла бла бла 
</html>

Я насчёт кавычек не совсем уверен, но суть такая.
Пропишите прям там подключение и выборку и echo выведите всё необходимое

Если я правильно понял Ваш вопрос, конечно

MrPavlik · 26.07.2013, 16:59 **[ТС]**

sMockingbird, спасибо за ответ. А в нужном участке HTML-файла, где всё должно выводиться, каким способом указывать на PHP-скрипт?

@sMockingbird · 26.07.2013, 17:02

А, да, кстати, у Вас файл с расширением html?
Тогда можно подключить jquery и с его помощью обращаться к php скрипту и с его же помощью подгружать данные.

MrPavlik · 26.07.2013, 17:05 **[ТС]**

Если можно по-подробнее, как это сделать? Хотя бы минимальный пример. Дальше сам разберусь. Спасибо.

@sMockingbird · 26.07.2013, 17:11

В шапке

JavaScript
1
<script src="jquery-1.10.0.min.js" type="text/javascript"></script>

ну само собой библиотеку скачать и указать нужный адрес

а это в теле

JavaScript
1
2
3
4
5
<script type="text/javascript">
$(document).ready(function() {
$.get('popup.php',{id:id}, function onAjaxSuccess(data) {$('#news').load(data)});
})
</script>

popup.php - это собственно файл с пхп кодом, где будет подключение к БД и echo необходимых данных

id - это параметры, которые необходимо передать (если надо)
'#news' - это id блока, куда Вам необходимо вывести результат. Создайте на странице где нибудь div или куда там надо рез-т вывести)

примерно так)

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

MrPavlik · 27.07.2013, 15:07 **[ТС]**

Я решил сделать всё на jQuery, не обращаясь к PHP. Начал разбираться. За основу взял пример из данной темы:
https://www.cyberforum.ru/javascript-jquery/thread928958.html

Хочу разобраться, как из скрипта, вынесенного в отдельный js-файл, получить возможность изменение объекта DIV на HTML-странице. Допустим, если мне нужно задать значение <div class="pole"> в ноль, то используя такой пример HTML, всё работает:

HTML5
1
2
3
4
5
6
7
8
<p><div class="pole"></div>
<script language="javascript">
$(document).ready(function(){
$('div.pole').each(function(index) {
$(this).text(index);
});
});
</script></p>

Если же я хочу код JavaScript вынести в отдельный файл и делаю так:

HTML5
1
2
3
<p><div class="pole"></div>
<script type="text/javascript" src="Menu/myscript.js"></script>
</p>

В файле Menu/myscript.js пишу следующее:

JavaScript
1
2
3
4
5
6
7
<script language="javascript">
$(document).ready(function(){
$('div.pole').each(function(index) {
$(this).text(index);
});
});
</script>

То значение элемента <div class="pole"> в HTML-файле не изменяется. Я понимаю, что в js-скрипт нужно каким-то образом передать указатель на мою HTML-страницу. Но как это сделать?

Заранее извиняюсь за столь глупый, как я понимаю вопрос, я только начинаю разбираться в js.

Спасибо.

@Soldado · 27.07.2013, 15:13

В файле Menu/myscript.js НУЖНО ПИСАТЬ следующее (без повторного <script language="javascript">) :

JavaScript
1
2
3
$(document).ready(function(){
$('div.pole').text("");
});

MrPavlik · 27.07.2013, 15:19 **[ТС]**

Soldado, большое спасибо за ответ. Так, действительно, получилось.

MrPavlik · 28.07.2013, 20:53 **[ТС]**

Подскажите, пожалуйста, ещё такой момент:

Я успешно сделал выборку новостей и выбираю случайным образом новости из js-скрипта. На HTML-странице у меня имеется область под новость, которая заполнена новостью "по умолчанию".

Функция выборки js-скрипта обернута в следующий шаблон:

JavaScript
1
2
3
4
5
6
7
8
9
10
$(document).ready(function()
{
    var rand_min = 0, rand_max = 9;
    var $rand = Math.round(Math.random() * (rand_max - rand_min) + rand_min);
 
    switch($rand)
    {
        Здесь идёт выборка новостей
    }
});

При открытии HTML-страницы у меня открывается страница с новостью по умолчанию, и через полсекунды-секунду новость меняется скриптом. То есть при открытии страницы видно, что уже после полной загрузки новость меняется. Есть, пусть и небольшая, задержка по времени при смене новости. Возможно ли сделать так, чтобы HTML-страница сразу отображалась с случайно выбранной новостью без задержки?

Спасибо.

@NetkovK · 28.07.2013, 21:35

ты заменяешь ее только после того как документ загрузится:

JavaScript
1
2
3
4
$(document).ready(function()
{
   .............................
});

тебе нужно убрать эту функцию и просто сразу писать

JavaScript
1
2
3
4
5
6
7
var rand_min = 0, rand_max = 9;
    var $rand = Math.round(Math.random() * (rand_max - rand_min) + rand_min);
 
    switch($rand)
    {
        Здесь идёт выборка новостей
    }

тогда браузер не будет ждать пока документ загрузится, а сразу начне формировать твою новость

MrPavlik · 28.07.2013, 22:37 **[ТС]**

Спасибо за ответ. Таким образом уже попробовал. Но тоже видно, как элемент заменяется. Попробую вообще не задавать новость по умолчанию в HTML, а текст новости и ссылку добавлять динамически на HTML-страницу из js-скрипта. Может быть так будет смотреться лучше...

Добавлено через 59 минут
Сейчас пошёл таким путём. В HTML-файле имеем:

HTML5
1
2
    <h4>Последние новости</h4>
    <div id="latest_news"><script type="text/javascript" src="Menu/latest_news.js"></script></div>

В JS-скрипте пишу вот что:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var rand_min = 0, rand_max = 1;
var $rand = Math.round(Math.random() * (rand_max - rand_min) + rand_min);
 
switch($rand)
{
    case 0:
        $("#latest_news").append("<p><a href=\"news1.html\"><img src=\"Images/News/news1.jpg\" width=\"100%\" title=\"Краткое описание новости #1 в картинке\"></img></a></p>");
        $("#latest_news").append("<div class=\"lnews\">Описание новости #1</div>");
        break;
 
    case 1:
        $("#latest_news").append("<p><a href=\"news2.html\"><img src=\"Images/News/news2.jpg\" width=\"100%\" title=\"Краткое описание новости #2 в картинке\"></img></a></p>");
        $("#latest_news").append("<div class=\"lnews\">Описание новости #1</div>");
        break;
}

Не сильно ли это коряво? Можно ли добавлять сразу несколько тэгов в одном .append, как это сделал я, когда обернул картинку ссылкой?

В принципе всё работает, только в браузере Opera по картинке пробегает тонкая белая полоса сверху вниз. Картинка берется крупного размера, на странице новости она масштабируется на 50% новостного поля, а в области последних новостей масштабируется на ширину колонки. Делать миниатюру не стал, так как ширина колонки последних новостей может отличаться в зависимости от разрешения экрана.

@NetkovK · 28.07.2013, 23:23

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

@sMockingbird · 29.07.2013, 00:21

блин, форум залагало( не туда написал

Добавлено через 2 минуты
NetkovK, у автора страница html формата, php теги не распознаются же, нет?

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .

MrPavlik 0 / 0 / 0 Регистрация: 26.07.2013 Сообщений: 9

	Передача данных из PHP в HTML 26.07.2013, 16:42. Показов 3851. Ответов 13 Метки нет (Все метки) Здравствуйте, друзья. Сразу прошу меня извинить за возможный глупый вопрос: в PHP я чуть больше, чем несведующий (имел дело только при создании формы отправки e-mail с сайта). Задача такова: есть много статичных HTML-страниц. В определенном месте каждой страницы имеется область для отображения нескольких последних новостей следующего формата: Заголовок новости Картинка Текст Ссылка (на новость в подробном формате) Всего актуальных новостей несколько, они выбираются в случайном формате и на одной странице отображается только одна актуальная новость. Сейчас логика устроена так, что в каждой HTML-странице новости вставлены как часть HTML-кода. Но при обновлении данного раздела приходится перелопачивать все HTML-файлы, что очень неудобно. Я хочу организовать отображение новостей из PHP-файла, в котором было бы несколько шаблонов (заголовок, картинка, текст, ссылка к каждой новости), которые выбирались бы случайным образом и текст с картинкой и ссылкой вставлялся в определенный участок HTML-страницы. В самой HTML вставить только вызов определенной PHP-функции без параметров: выборка будет производиться в нужном PHP-скрипте. То есть, чтобы при обновлении новостей не нужно было трогать HTML-страницы, а изменять только PHP-скрипт. Возникает вопрос: как сделать так, чтобы из PHP-скрипта вставить данные в HTML? Я работал с обратной задачей, когда данные из формы HTML передаются в PHP-скрипт как параметры, но чтобы передать текст из PHP в HTML (с сохранением стиля основной HTML-страницы), я не в курсе, как это лучше сделать. Буду благодарен, если кто-нибудь объяснит основы, как это можно сделать. Возможно, приведёт минимальный шаблон. Нюансы своей задачи я допилю сам (выборка новости), но сейчас мне непонятна основа: как организовать передачу данных из PHP в HTML как форматированный HTML-код. Заранее благодарен за ответ. 0

MrPavlik 0 / 0 / 0 Регистрация: 26.07.2013 Сообщений: 9
	26.07.2013, 16:59 [ТС]
	sMockingbird, спасибо за ответ. А в нужном участке HTML-файла, где всё должно выводиться, каким способом указывать на PHP-скрипт? 0

@sMockingbird 284 / 283 / 73 Регистрация: 06.05.2013 Сообщений: 1,613
	26.07.2013, 17:02
	А, да, кстати, у Вас файл с расширением html? Тогда можно подключить jquery и с его помощью обращаться к php скрипту и с его же помощью подгружать данные. 1

MrPavlik 0 / 0 / 0 Регистрация: 26.07.2013 Сообщений: 9
	26.07.2013, 17:05 [ТС]
	Если можно по-подробнее, как это сделать? Хотя бы минимальный пример. Дальше сам разберусь. Спасибо. 0

MrPavlik 0 / 0 / 0 Регистрация: 26.07.2013 Сообщений: 9
	27.07.2013, 15:19 [ТС]
	Soldado, большое спасибо за ответ. Так, действительно, получилось. 0

@NetkovK 8 / 8 / 1 Регистрация: 23.07.2013 Сообщений: 49
	28.07.2013, 23:23
	все нормально, ты можешь добавлять сколько хочешь тегов но вообще я так понимаю что новости ты будешь добавлять а вмести с тем тебе нужно будет менять количество генерируемых новостей и сами новости. Это правильней делать на пхп, создай базу с соответствующей таблицей, делай запрос к ней и выводи свои новости. Тут вообще jquery не нужен. 1

@sMockingbird 284 / 283 / 73 Регистрация: 06.05.2013 Сообщений: 1,613
	29.07.2013, 00:21
	блин, форум залагало( не туда написал Добавлено через 2 минуты NetkovK, у автора страница html формата, php теги не распознаются же, нет? 1