БЕСПЛАТНЫЕ УРОКИ. Создание сайтов

Технология jQuery. Как вывести содержимое файла на Web-страницу

В этом уроке я покажу, как выводить содержимое текстовых файлов или HTML-документов в Вашу страницу. Для этого нам понадобятся три файла:
- файл с текстом, который нужно показывать на вашей странице,
- Сама Web-страница, на которой выводится нужный  контент,
- Библиотека jQuery.

demo        skachat

  1. Предварительно создайте документ, например, html-страницу с некоторым содержимым (текстом, картинками, списками и т.д.) и сохраните ее в своей папке под именем somefile.html.
  2. Создайте новую Web-страницу, где будем в дальнейшем выводить содержание  предыдущего документа, и сохраните его под именем, например index.html
  3. В разделе HEAD добавьте код подключения библиотеки jQuery:

    <script type="text/javascript" src="/js/jquery-1.8.3.js"></script>


    она должна быть в папке js, в противном случае откорректируйте url в параметре crs данного тега.

  4. Добавьте в тот же раздел стиль content для красоты:

    #content{
     width: 800px;
     border: solid 1px;
     border-color:#999;
     border-radius: 8px;
     background-color:#CCC;
     padding: 10px;
     text-align:justify;
     font-family:Verdana, Geneva, sans-serif;
     font-size:12px;
    }

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

  5. В раздел BODY добавьте тег DIV следующего содержания:

    <div id="content"></div>


  6. Ниже блока, определенного вышеуказанным тегом DIV вставьте скрипт:

    <script>
    $("#content").load("somefile.html", function(response, status, xhr) {
     if(status == "error") {
     $("#content").html("An error occured: " + xhr.status + " " + xhr.statusText);
     }
    });
    </script>

    Это важно, данный скрипт должен находиться ниже блока DIV, в который будем выводить информацию.

  7. Сохраните страницу и проверьте работу.

Внимание! Это работает только на локальном или Web-сервере (загружать можно, например, через localhost) т.к. скрипт выполняет чтение файла и зaгрузку его содержимого в Web-страницу.

Добавить комментарий
  • Гость - Александр

    Это возможно, если на том сайте, где находится файл txt нет запрета на чтение. Если запрета нет, то его можно загрузить указав URL в адресной строке браузера, например: http://site-name.ru/file_name.txt.

  • Гость - Гость

    Не подскажите, как можно вывести данные файла txt который находится на одном сайте, на другом. Цель отображение версий плагина, если они меняются