Получение данных из 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: 4 комментария

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

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

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

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

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

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

*