Загрузите содержимое html-файла в div

Я новичок. Проблема, с которой я имею дело, вероятно, очень просто решить;) Я работаю на веб-странице, где текстовый контент загружается из внешних html-файлов в div. Это делается, когда пользователь нажимает на элемент меню.Загрузите содержимое html-файла в div

Это мой код HTML:

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="css/menu.css"> 
<script type="text/javascript" src="js/js.js"></script> 

</head> 
<body> 
      <div> 
         <ul>  
          <li><a id="teachers" href="#" name="teachers" onclick="getdata()"> 
          Teachers 
          </li> 
         </ul> 
      </div> 

      <div id="page" name="" > 
      bla bla bla ... 
      </div> 

</body> 
</html>

И это мой код Ajax:

var _xhr; 

function getdata(){ 

    _xhr= new XMLHttpRequest(); 
    _xhr.onreadystatechange=callback; 
    _xhr.open("POST", "teachers.html", true); 
    _xhr.send(); 

    function callback(){ 
     var _target = document.getElementById("page"); 
     _target.innerHTML=_xhr.responseText; 
    } 

}

Я хотел бы загрузить HTML-файл (teachers.html) в DIV (ID = «страница»), когда я нажимаю на ссылку (Учителя)

Пожалуйста, кто-нибудь может мне помочь.

Заранее благодарен.

источник

2014-10-23 abderrahim

Javascript JSP или PHP. Google для него – Klapsa2503

Ваш код выглядит так, как будто он уже делает это. В чем проблема? Посмотрите на инструменты разработчика вашего браузера. Посмотрите на консоль JavaScript. Сообщает ли он о каких-либо ошибках? Посмотрите вкладку «Сеть». Выполняется ли запрос? Получает ответ? Они содержат данные, которые вы ожидаете? – Quentin

Что произошло при запуске кода? Вы объявили функцию «обратного вызова» внутри функции getdata(). Что произойдет, если вы переместите функцию обратного вызова до _xhr = new XMLHttpRequest() ;? –

Попробуйте изменить POST, чтобы ПОЛУЧИТЬ и посмотреть, работает ли это.

источник

2014-10-23 13:10:48 Oliverb

Это не работает в любом случае спасибо за ваш ответ – abderrahim

все html-файлы в том же каталоге? – Oliverb

yes in the same – abderrahim

для этого случая Я рекомендую пользователю функцию загрузки jQuery. его легко использовать и соответствовать вашим потребностям. Вы можете найти более подробную информацию по следующей ссылке: http://api.jquery.com/load/

источник

2014-10-23 13:14:35

Да, но я хотел бы использовать AJAX – abderrahim

jQuery его структуру Javascript и AJAX. –

Его довольно сложно узнать, не сообщите нам, что произошло. I've выяснить (возможно) проблема

Попробуйте изменить свой код

function getdata(){ 

    function callback(){ 
     var _target = document.getElementById("page"); 
     _target.innerHTML=_xhr.responseText; 
    } 


    _xhr= new XMLHttpRequest(); 
    _xhr.onreadystatechange=callback; 
    _xhr.open("POST", "teachers.html", true); 
    _xhr.send(); 
}

источник

2014-10-23 13:18:09

та же проблема, моя проблема в моем ответеТекст пуст – abderrahim

Какой браузер вы используете? В chrome вы можете открыть «инструменты разработчика» (ctrl + shif + i) и открыть вкладку «сеть». Итак, запустите свой код еще раз и посмотрите, загружает ли браузер этот файл. Просто нажмите на файл и выберите вкладку «Ответ». Взгляните и на код состояния. Он должен получить 200. –

Просьба взглянуть на эту ошибку: XMLHttpRequest не может загрузить файл: /// F: /Projet/teachers.html. Запросы на кросс-начало поддерживаются только для схем протокола: http, data, chrome-extension, https, chrome-extension-resource. – abderrahim

Вы пробовали чего УАК _xhr; внутри функции?

я попробовал ниже .. он работал

function getdata(){ 
       var xmlhttp; 
       xmlhttp=new XMLHttpRequest(); 
       xmlhttp.open("get","techers.html",false); 
       xmlhttp.send(); 
       document.getElementById("page").innerHTML=xmlhttp.responseText; 

      }

источник

2014-10-23 13:31:00 Rajan

нет, это не проблема, в любом случае спасибо за ваш ответ – abderrahim

Как об использовании AJAX вызова?

$.get("ajax/test.html", function(data) { 
    $(".result").html(data); 
    alert("Load was performed."); 
});

Документация: http://api.jquery.com/jquery.get/

источник

2014-10-23 13:37:49 BerendvRijn

да, но я бы хотел использовать AJAX – abderrahim

Это AJAX, прочтите документацию. – BerendvRijn

Загрузите содержимое html-файла в div

ответ

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