Статьи

Совет: используйте jQuery для извлечения данных из файла XML

Октябрь 31, 2018

В этом кратком совете я покажу вам, как загрузить данные из файла XML на пустую страницу. Мы будем работать с функцией $ .get, а также будем реализовывать загрузочный gif во время получения информации. Мы будем отображать простой список рекомендуемых книг по веб-разработке. Давайте продолжим и начнем.

Шаг первый: обзор сценария

Сначала давайте взглянем на наш простой XML-файл. Он просто содержит несколько книг вместе с их названием, изображением и описанием. 

  <? xml version = "1.0" encoding = "utf-8"?>
 <книги>
     <book title = "Мастерство CSS" imageurl = "images / css.jpg">
     <Описание>
     информация идет здесь.
     </ Описание>
     </ Книга>

     <book title = "Профессиональный ASP.NET" imageurl = "images / asp.jpg">
     <Описание>
     информация идет здесь.
     </ Описание>
     </ Книга>

     <book title = "Learning jQuery" imageurl = "images / lj.jpg">
     <Описание>
     информация идет здесь.
     </ Описание>
     </ Книга>
 </ Книги>

Далее, давайте посмотрим на фактический JQuery. 

  $ (Документ) .ready (функция ()
       {
         $ .get ('myData.xml', function (d) {
         $ ('body'). append ('<h1> Рекомендуемые книги по веб-разработке </ h1>');
         $ ('body'). append ('<dl />');

         $ (Г) .find ( 'книга'). Каждая (функция () {

             var $ book = $ (this); 
             var title = $ book.attr ("title");
             var description = $ book.find ('description'). text ();
             var imageurl = $ book.attr ('imageurl');

             var html = '<dt> <img class = "bookImage" alt = "" src = "' + imageurl + '" /> </ dt>';
             html + = '<dd> <span class = "loadingPic" alt = "Loading" />';
             html + = '<p class = "title">' + title + '</ p>';
             html + = '<p>' + description + '</ p>';
             html + = '</ dd>';

             . $ ( 'Дл') Append ($ (HTML));
            
             $ ( 'LoadingPic.') Затухание (1400).
         });
     });
 });

Шаг второй: расшифровать время

Поскольку это быстрый совет, я пробежусь по сценарию немного быстрее, чем обычно. Когда документ будет готов к манипулированию, мы собираемся извлечь наш XML-файл, используя функцию «$ .get». В скобках мы передадим местоположение файла, а затем запустим функцию обратного вызова. Я буду использовать переменную «d» для представления информации, извлеченной из файла XML. Далее мы собираемся создать тег заголовка и список определений.

Продолжая, мы собираемся найти файл XML (d) и найти тег, озаглавленный «книга». Возвращаясь к моему документу, есть три книги. Следовательно, нам нужно запустить метод «каждый», чтобы выполнить операцию для каждой книги. Помните, что «каждый» подобен утверждению «для». Это способ пройти через каждый элемент в упакованном наборе.

В следующем блоке кода я определяю несколько переменных. Чтобы получить «title» и «description» из нашего XML-файла, мы используем «.attr (value)» — где «value» равно атрибуту внутри тега.

Наконец, мы создаем переменную с именем «html», которая будет содержать html, который будет отображать информацию из нашего XML-файла. Однако простое присвоение этой информации переменной не отобразит ее на странице. Чтобы добавить его на страницу, мы берем список определений и добавляем переменную. — $ (‘dl’). append ($ (html));

Еще одна вещь, о которой стоит упомянуть, это то, что пока информация извлекается из файла XML, мы будем отображать стандартный загрузочный gif (через фоновое изображение). Когда данные загрузятся, мы возьмем изображение и потемнеем.

Вы сделали

Я знаю, что прошел это довольно быстро; Поэтому не стесняйтесь оставлять комментарии и задавать любые вопросы, которые могут у вас возникнуть. Следует отметить, что этот сценарий потребует немного больше работы, прежде чем он станет готовым для реального сайта. Вы должны компенсировать людям, у которых отключен Javascript. В этом случае, если бы у них это было отключено, они смотрели бы на пустую страницу. Вы должны компенсировать такие вещи. Но я отвлекся.

38
Share: