html — установка innerHTML с помощью PHP?
Так что в основном у меня есть эта программа, которая устанавливает заголовок (id = «infoHeader») в верхней части страницы для некоторого текста, полученного с другого сайта. Однако мне нужно это изменить, когда кнопка нажата. Как вы можете видеть, в настоящее время он использует PHP-скрипт для извлечения текста с заданного URL-адреса, но мне нужно выбрать другой URL-адрес при нажатии кнопки. Так в основном
Нажатие кнопки 1 -> infoHeader = текст сайта 1
Button2 нажмите -> infoHeader = текст сайта 2
Есть ли способ использовать кнопку, чтобы изменить innerHTML из [id = «infoHeader»], чтобы он запускал скрипт PHP для получения текста.
Мне сложно объяснить, если вам нужно, я могу попытаться дать больше информации.
<!DOCTYPE HTML>
<html>
<head>
<title>KSA Flight Tracker</title>
<link rel="stylesheet" type="text/css" href="KSAStyle.css"/>
</head>
<body>
<div id=page>
<div id=leftPanel>
<p id=missionsHeader>Active Missions</p>
<p><?php include("getList.php")?></P>
</div>
<div id=info>
<p id=infoHeader><?php include("getData.php"); getTitle("http://www.blade-edge.com/images/KSA/Flights/craft.asp?r=true&db=dunai"); ?></p>
</div>
</div>
</body>
Решение
Вам нужно использовать JavaScript + AJAX. JavaScript необходим для изменения содержимого div после загрузки / отображения страницы и AJAX для загрузки файла PHP без необходимости обновления веб-страницы.
Я рекомендую вам использовать JQuery И его ajax функция.
<!DOCTYPE html>
<html>
<head>
<title>KSA Flight Tracker</title>
<link rel="stylesheet" type="text/css" href="KSAStyle.css"/>
<!-- include jQuery -->
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function() { // wait for the DOM to finish loading
// button1
$("#someID").click(function() { // element with id "someID" (your button)
$.ajax({
url: "getData.php", // the content of the page which you want to load
cache: false
}).done(function(dataFromServer) {
$("#infoHeader").html(dataFromServer); // set the data from the server (getData.php) as the content of the element with the id "infoHeader"});
}):
// button2
// the same as above for the other button
});
</script>
</head>
<body>
<div id="page">
<div id="leftPanel">
<p id="missionsHeader">Active Missions</p>
<p> <?php include("getList.php"); ?> </p>
</div>
<div id="info">
<p id="infoHeader"> <?php include("getData.php"); getTitle("http://www.blade-edge.com/images/KSA/Flights/craft.asp?r=true&db=dunai"); ?> </p>
</div>
</div>
</body>
</html>
Для вашей проблемы:
Вот несколько хороших ресурсов для JavaScript, jQuery и AJAX:
- JavaScript: https://developer.mozilla.org/en-US/docs/Web/JavaScript
- JQuery: http://en.wikipedia.org/wiki/JQuery
- JQuery: http://www.w3schools.com/jquery/
- JQuery: http://www.codecademy.com/en/tracks/jquery
- JQuery + AJAX: http://www.w3schools.com/jquery/jquery_ajax_intro.asp
Другие решения
Других решений пока нет …