Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Изменение контента без обновления страницы.

Автор: KsyuZ 19.7.2012, 16:16

Здравствуйте! помогите мне пожалуйста решить проблему: есть html страница fon.html мне хотелось бы, чтобы при нажатии на ссылки "запуск программы" и "справка по вопросам" изменялся ее контент. Я пробовала использовать ajax и yui, получился такой код:

Код


<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
       <title>Анализ детализации телефонных соединений</title>
       <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
       <LINK href="style.css" type=text/css rel=stylesheet>
</head>
<body>
        <h2> Анализ детализации телефонных соединений </h2>
        <table border="0" cellspacing="0" cellpadding="0" width="1000" align="center" height="225" id="table3">
          <tr>
              <td width= 200 height=310>
                 <div id="box1">
                  <a href="fon.html"><img   src="contact.png" border="0"> </a>
                 </div>
                 <div id="box2">
                  <a  href="fon.html?id=fon2" title="fon2"><img  alt="Запуск" src="rabota.png" border="0"> <span class="letter"> Запуск программы </span> </a>
                 </div>
                 <div id="box3">
                  <a  href="fon.html?id=fon3" title="fon3"><img  alt="Вопросы" src="vopros.png" border="0"> <span class="letter"> Справка по вопросам </span> </a>
                 </div>
             </td>
             <td  height=310 >


                 <div id='info'> Это предложение будет заменено </div>
                 <script src="yahoo-min.js"></script>
                 <script src="event-min.js"></script>
                 <script src="connection-min.js"></script>
                <script>
url = "fon3.html"
callback = { success:successHandler, failure:failureHandler }
request = YAHOO.util.Connect.asyncRequest('GET',
    'urlget.php?url=' + url, callback)

function successHandler(o) {
    document.getElementById('info').innerHTML = o.responseText
}

function failureHandler(o) {
    document.getElementById('info').innerHTML =
        o.status + " " + o.statusText
}
                                 </script>
  
            </td>
       </tr>
       <tr>
            <td wight=200 height=310></td>
            <td  >
            </td>
       </tr>
</body>
</html>

и php код:

Код


<?php // urlget.php
if (isset($_GET['url'])) {

    echo file_get_contents("http://test1.ru/".sanitizeString($_GET['url']));
}

function sanitizeString($var) {
    $var = strip_tags($var);
    $var = htmlentities($var);
    return stripslashes($var);
}
?>

Как сделать так, чтобы при нажатии на ссылку, java скрипту была передана переменная url? чтобы при нажатии на ссылку загружался для отображения нужный html файл.

Автор: Aliance 19.7.2012, 17:52

Я не очень понял, что у вас за вопрос. Но как я понимаю, вам нужно повесить на ссылку событие onclick и туда функцию, которая будет брать url ссылки и его ajax-ом слать на сервер?

Автор: KsyuZ 19.7.2012, 18:52

да, я думаю нужно это. не могу разобраться как переменной url из кода

Код


url = "fon3.html"
callback = { success:successHandler, failure:failureHandler }
request = YAHOO.util.Connect.asyncRequest('GET',
        'urlget.php?url=' + url, callback)

передавать значения, например fon3.html при нажатии на 1 ссылку, fon2.html при нажатии на 2 ссылку,чтоб в месте "это предложение будет заменено" отображалось содержимое этих страничек.
Подскажите пожалуйста как это осуществить?

Автор: Aliance 20.7.2012, 09:27

Пойдем по порядку, что в коде не верно/хотелось бы исправить:

Переменные должны быть объявлены через ключевое слово var. Без него идет объявление глобальных переменных внутри локальной области видимости. В данном коде этого не нужно -> объявляем через var.
Не забываем после каждого синтаксически законченного предложения ставить точку с запятой (;).
Если идет обращение к одному и тому же элементу в дереве DOM, есть смысл завести под него переменную и обращаться к ней. Тогда она будет вычисляться только один раз, а не при каждом обращении.
Все действия мы должны выполнять после загрузки страницы, а не по факту загрузки скрипта. Так что используем конструкцию
Код
window.onload = function() { // ... }

Нам нужно на каждую ссылку (/на каждый элемент с определенный классом/на каждую ссылку по ID) повесить обработчик события клика для предотвращения дефолтного поведения браузера (перехода по ссылке) и выполнения нашего произвольного кода. Подробнее о событиях можно почитать http://forum.vingrad.ru/topic-32350.html. Вот пример:

Код


    // получаем коллекцию всех тегов <a>
    var links = document.getElementsByTagName('a');
    for (var i = 0; i < links.length; i++) {
        // вешаем обработчик события на клик по ссылке
        links[i].onclick = function(evt) {
            // получаем ссылку на событие
            evt = evt ? evt : ((window.event) ? event : null);
            // блокируем поведение браузера по умолчанию
            // (для ссылки это переход по ней)
            if (evt) {
                if (evt.preventDefault) {
                    evt.preventDefault();
                } else {
                    evt.returnValue = false;
                }
            }
        };
    }

Дальше мы получаем у ссылки атрибут href и используем его в качестве переменной url

Вот что получилось:

Код


<a href="fon2.html">Запуск программы</a>
<div id='info'>Это предложение будет заменено</div>

Код


window.onload = function() {
    // кешируем контейнер в переменную (см. п. 3)
    var info_container = document.getElementById('info');

    var links = document.getElementsByTagName('a');
    for (var i = 0; i < links.length; i++) {
        links[i].onclick = function(evt) {
            // получаем ссылку на событие
            evt = evt ? evt : ((window.event) ? event : null);
            // блокируем поведение браузера по умолчанию
            // (для ссылки это переход по ней)
            if (evt) {
                if (evt.preventDefault) {
                    evt.preventDefault();
                } else {
                    evt.returnValue = false;
                }
            }
            // получаем нужный нам url из соотв. атрибута ссылки
            var url = this.getAttribute('href');
            
            var options = {
                success: function(o) {
                    info_container.innerHTML = o.responseText;
                },
                failure: function(o) {
                    info_container.innerHTML = o.status + " " + o.statusText;
                }
            };
            
            var request = YAHOO.util.Connect.asyncRequest('GET',
                                                          'urlget.php?url=' + url,
                                                          options);
        };
    }
}

Автор: KsyuZ 20.7.2012, 15:53

Aliance, большое спасибо вам,что помогли и все так подробно объяснили! Этот язык я знаю очень поверхностно, но хочу в нем разобраться.Ну а пока что вот такие тяпы ляпы получаются.

Автор: Aliance 20.7.2012, 16:07

Не за что. Еще советую html проверять в w3c validator, у вас там было не мало косяков.

Автор: KsyuZ 21.7.2012, 20:32

К сожалению сейчас заметила,что код не работает. получается, что просто вместо страницы fon.html загружается fon2.html.. а не меняется контент

Автор: Aliance 25.7.2012, 09:31

KsyuZ, полный код в студию!