2015-02-01 3 views
0

Так что в основном у меня есть эта программа, которая устанавливает заголовок (id = "infoHeader") в верхней части страницы для некоторого текста, полученного с другого сайта. Мне нужно, чтобы это изменилось при нажатии кнопки. Как вы можете видеть, в настоящее время он использует PHP-скрипт для извлечения текста из заданного URL-адреса, но при нажатии кнопки требуется выборка из другого URL-адреса. Таким образом, в основномНастройка innerHTML с PHP?

Button1 нажмите -> infoHeader = Site 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> 

+0

вы, вероятно, придется использовать j avascript для этого – Markasoftware

+0

Но мне нужно запустить этот PHP-скрипт, чтобы получить текст, так как я могу запустить его с помощью javascript? – user2758663

ответ

1

Вы должны использовать 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> 

Для вашей проблемы:

  1. Change content of div - jQuery
  2. http://api.jquery.com/jquery.ajax/

Вот некоторые хорошие ресурсы для JavaScript, JQuery и AJAX:

  1. JavaScript: https://developer.mozilla.org/en-US/docs/Web/JavaScript
  2. JQuery: http://en.wikipedia.org/wiki/JQuery
  3. JQuery: http://www.w3schools.com/jquery/
  4. JQuery: http://www.codecademy.com/en/tracks/jquery
  5. JQuery + AJAX: http://www.w3schools.com/jquery/jquery_ajax_intro.asp
+0

Я только что сделал быстрый поиск по всему сайту, и я действительно не понимаю, как делать то, что я хочу. (Я только начал писать HTML, CSS и PHP вчера - я изучаю его довольно быстро, но я застрял). Итак, как я могу использовать это, чтобы изменить текст с помощью «ajax»? – user2758663

+0

Хорошо, поэтому я пробовал читать через [это] (http://stackoverflow.com/a/7139219/2758663), но я до сих пор не понимаю, что я должен делать. Где я могу это выразить? Что нужно изменить, чтобы он работал с моей программой? и т. д. Как я уже сказал, я новичок и до 30 минут назад даже не слышал об AJAX или jQuery. – user2758663

+0

Я добавил две ссылки для чтения. –

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