Я думаю, что вы спрашиваете, как поставить динамическое содержание в статической веб-страницы. Это не моя область знаний, но я могу дать вам очертания того, как делать то, что вы пытаетесь сделать. Это архитектура. Вы должны сами заполнить некоторые детали реализации, но я постараюсь дать вам четкое представление о том, что вы будете искать на каждом этапе пути.
Предложения для улучшения от реальных веб-парней будут с нетерпением охвачены. Если на SO уже есть ответ, который проделывает noob через дизайн тривиального одностраничного веб-приложения AJAX/JSON, я не могу его найти. Должен быть один.
Это намного сложнее, чем ваша оригинальная идея, но переписывание веб-страницы не является отличной идеей: вы пишете произвольные нули и сообщения от незнакомых людей к файлу на вашем сервере. Вам нужен один HTML-файл для каждого пользователя, если вы храните свои данные в файлах HTML. Как вы ему правы? Что, если вы измените макет после того, как у вас будет 500 пользователей? Вы должны написать сценарий для изменения текста из 500 файлов HTML. На практике это просто ужас.
Что вы нащупываете, это динамический контент через AJAJ, который мы по-прежнему вызываем по историческим причинам (до появления обработки с ЧПУ, фигурные скобки были сложны для массового производства в экономическом отношении, и поэтому веб-службы, обычно используемые pointy вместо скобок).
Сначала напишите веб-страницу, чтобы обслуживать личный контент пользователя. Он также сохранит обновления. Может также использовать PHP. Эта страница не является веб-страницей; вместо HTML, он возвращает JSON текст с content-type из application/json. Пользователь может добавить текст POST в формат JSON. Эта «страница» - это веб-сервис.
При получении запроса страница веб-сервиса с указанием имени пользователя (и соответствующей безопасности) будет извлекать список видео YouTube пользователя из MySQL и возвращать его вызывающему абоненту как JSON.
Пока что содержание, идущее на и с этой страницы веб-сервиса, довольно простое. Просто список URL-адресов. Давайте сделаем его объектом, у которого есть один член, и что один член будет массивом объектов, содержащих информацию о видео YouTube, выбранных пользователем. На данный момент у каждого есть URL-адрес, но мы можем захотеть добавить более подробные сведения позже, поэтому мы не будем просто создавать массив строк с открытым URL-адресом. На верхнем уровне мы также сможем добавлять другие типы контента вместе с «YouTubeVideos», если есть такая необходимость - например, вам понадобится имя пользователя и токен безопасности.
{
"YouTubeVideos": [
{
"url": "http://youtu.be/LKJDFKLJDF"
},
{
"url": "http://youtu.be/87sdfd234"
}
]
}
На странице HTML, код JS будет первым запрашивать данные пользователя с этого веб-сервиса в onLoad. Вы сделаете это, используя XMLHttpRequest. Вы будете использовать функцию JavaScript JSON.parse, чтобы превратить текст ответа в объект JS.
Так что напишите функцию requestUserYTContent или что-то еще, и вызовите это из onLoad. Это упрощенная: Там нет проверки, обработки исключений и т.д.
// Empty default instance to start out.
var ytInfo = { "YouTubeVideos" : [] };
function requestUserYTContent() {
// ...
// Do stuff with XMLHttpRequest to get the JSON for this user from
// the web service.
// ...
ytInfo = JSON.parse(http_request.responseText);
console.log('Got ' + ytInfo.YouTubeVideo.length + ' videos');
// Once you've got that JSON object, you can loop through the
// videos and do stuff with their urls. We'll stick that loop in
// another function so we can re-use it in cases where the list
// changes for reasons other than a web service call.
var ytDiv = document.getElementById('ytContent');
ytDiv.innerHTML =
generateVidListHTML(ytInfo.YouTubeVideos);
}
function generateVidListHTML(vids) {
var newHTML = '';
for (var i = 0; i < vids.length; ++i) {
var url = vids.YouTubeVideos[i].url;
// ...generate HTML to display this video, and append to
// newHTML
}
return newHTML;
}
Так мы продолжаем, что ytInfo вокруг в глобальной переменной. Когда пользователь добавляет в список или удаляет его, измените список, заново создайте HTML с generateVidListHTML(), вставьте HTML-код на страницу, как указано выше, а затем опубликуйте вновь измененный список как JSON на веб-сервере для обновления содержимое пользователя в базе данных mySQL.
Вы получите данные POST на веб-службу с помощью XMLHttpRequest. Вот пример. Конечно, вы будете использовать другой тип контента.
https://stackoverflow.com/a/9713078/424129
В JavaScript на веб-странице, преобразовывая живой JavaScript объект обратно в JSON легко: https://stackoverflow.com/a/4162803/424129
Для простоты, вы можете также просто пройти один и тот же формат JSON назад и вперед.
Когда вы отправляете JSON обратно в веб-службу, он также должен проанализировать его. Я не знаю, как разобрать JSON в PHP, но я знаю, что кто-то, кто делает:
https://www.google.com/search?q=how+to+parse+json+in+PHP
Как вы пытаетесь сохранить его? Я сомневаюсь, что браузер может сделать это в прямом JS; вы можете представить себе кошмар безопасности, если HTML-страница может писать на локальный диск по своему усмотрению. Плагин мог бы это сделать, если бы вы написали плагин. –
В любом случае. Я прочитал некоторые вещи об использовании AJAX, PHP и MySQL. Будет ли это лучшим путем? – Tsotmix
Вы можете отправить обратно innerHTML на сервер, конечно. Это странный способ сделать динамический контент. Было бы более обычным отправить обратно список YT vids и сохранить его. Затем выполните запрос страницы для списка и создайте контент из этого списка. –