Получение данных из xml с помощью jQuery

Получение данных из xml с помощью jQueryСегодня я хочу показать, как можно с помощью javascript(с применением библиотеки jQuery), можно получить и обработать XML файл.
Получение xml-файла можно реализовать с помощью ajax`a, а после получения содержимого xml его легко можно «разобрать» средствами jQuery, теми же самыми, что используются для поиска и обращения к элементам на странице.

Проще всего понять как это работает в коде. Для начала приведу текст тестового xml- файла, назовем его — test.xml. Выглядеть он будет так:

<?xml version="1.0" encoding="utf-8"?>
<people>
	<person>
		<first_name>Иван</first_name>
		<last_name>Петров</last_name>
		<role id_user="1">admin</role>
	</person>
	<person>
		<first_name>Сидор</first_name>
		<last_name>Иванов</last_name>
		<role id_user="2">moderator</role>
	</person>
	<person>
		<first_name>Петр</first_name>
		<last_name>Сидоров</last_name>
		<role id_user="3">user</role>
	</person>
</people>

А теперь приведу код, для разбора этого xml-файла:

$(document).ready(function() {
	$('#test_btn').click(function(){
		ajaxGetXML();
	});
	
});

function ajaxGetXML(){
	$.ajax({
		type: "POST", // метод передачи данных
		url: "test.xml", // путь к xml файлу
		dataType: "xml", // тип данных
		// если получили данные из файла
		success: function(data) {
			var html = "";
			// перебираем все теги person
			$(data).find('person').each(function(){
				var id_user = $(this).find('role').attr('id_user'); // получаем значение атрибута id_user
				var first_name = $(this).find('first_name').html(); // получаем значение тега first_name
				var last_name = $(this).find('last_name').html(); // получаем значение тега last_name
				var role = $(this).find('role').html(); // получаем значение тега role
				html += "<label>ID: "+id_user+"</label><br/>";
				html += "<label>Пользователь: "+first_name+" "+last_name+"</label><br/>";
				html += "<label>Права: "+role+"</label>";	
				html += "<hr/>";	
			});			
			$('#content_div').html(html); // выводим данные
		},
		// если произошла ошибка при получении файла
		error: function(){
			alert('ERROR');
		}
		
	});
}

И добавим пару строк на страницу — кнопка, для запуска скрипта и блок, для вывода данных:

<input type="button" value="Получить XML" id="test_btn"/>
<div id="content_div"></div>
Рассказать друзьям:


Получение данных из xml с помощью jQuery: 5 комментариев

  1. Привет. Хороший скрипт, все работает. Только есть желание выведенную информацию из xml красиво оформить. Научите как сделать? что куда добавить…

    1. Уточню: ни весь DIV целиком оформить одним стилем, а все параметры, такие как first_name, last_name, role и т.д. отдельно разными стилями

  2. Спасибо большое за хорошую статью, пример. Мне как новичку необходим подобный пример. Переделал под свои нужды: запрос отправляется не к xml файлу а к php скрипту, тот в свою очередь отправляет данные в XML

  3. Скопировал этот говнокод! Сделал такой же xml. Всё проверил, всё сдела как здесь, но нихрена не работает, ERROR мать его!

  4. Это все конечно здорово, но что если ты не знаешь какие теги содержаться в xml файле, и тебе просто нужно вывести все содержимое.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*