گرفتن اطلاعات از XML با JQuery Ajax

گرفتن اطلاعات از XML با JQuery Ajax

در این مطلب می خواهیم شما را با نحوه گرفتن اطلاعات از XML با JQuery Ajax آشنا کنیم. گاهی اوقات از فایل XML به عنوان دیتابیس ساده استفاده می‌شود برای مثال فرض کنید می خواهیم اطلاعات مشترکین را دریافت کرده و در صفحات وب نمایش دهیم. در این روش به برنامه نویسی سمت سرور نیازی نداریم و تنها از جی کوئری استفاده می کنیم.

گرفتن اطلاعات از XML با JQuery Ajax

قبل از آن که به ادامه مطلب بپردازیم چند نکته را قبل از شروع بیان می کنم:

  • درصورتی که بر روی کامپیتور شخصی این روش را اجرا می کنید حتما باید نرم افزار wamp هم فعال کنید.
  • فایل های مربوطه را در پوشه www قرار داده و از طریق Local فایل را اجرا کنید.
  • در این آموزش از برنامه نویسی سمت سرور مانند php یا Asp استفاده نمی شود اما برای اجرای آن نرم افزار wamp نیاز است.
  • با  Jquery  تنها می توان فایل های XML را خواند و قابلیت نوشتن و بروزرسانی وجود ندارد.
  • در صورتی که می خواهید ردیف های فایل های XML را ادیت یا حذف و اضافه کنید باید از زبان های سمت سرور استفاده کنید.

نحوه خواندن اطلاعات از XML با JQuery Ajax

کدهای Html

<body>
<ul>
</ul>
</body>

یک تگ ul باز بسته ایجاد میکنیم قرار است داخل این تگ را بوسیله جی کوئزی ایجکس با اطلاعات XML پر کنیم.

کدهای JQuery

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

	<script>
	
		$(document).ready(function() {	
			showFoodMenu();
		});
		
		
		function showFoodMenu() {

			$.ajax({
				type: "GET",
				url: "/fortest.xml",
				dataType: "xml",

				error: function (e) {
					alert("An error occurred while processing XML file");
					console.log("XML reading Failed: ", e);
				},

				success: function (response) {

					// make sure the ul is empty
					// before appending data inot it
					$("ul").children().remove();

					$(response).find("note").each(function () {
						var _name = 'name: ' + $(this).find('name').text();
						console.log(_name);
						
						var _price = 'family: ' + $(this).find('family').text();
						var _calories = 'phone: ' + $(this).find('phone').text();


						// add content to the HTML          
						$("ul").append('<li>' + _name + '</li>');
						$("ul").append('<li>' + _price + '</li>');
						$("ul").append('<li>' + _calories + '</li>');
					});
				}
			});
		}
	</script>
  • در خط دوم ابتدا CDN جی کوئری را فعال می کنیم.
  • در خط 11 یک تابع تعریف شده که قرار است کا واکاوی اطلاعات از فایل Xml را انجام دهد.
  • در خط 12 دستور Ajax را فعال کردیم.
  • در خط 15 آدرس فایل XML را بصورت نسبی وارد کردیم. ( در اینجا فایل Xml دقیقا کنار فایل HTML ما است)
  • در خط 28  برای گرفتن اطلاعات از XML با JQuery Ajax با استفاده از یک حلقه، هر ردیف از اطلاعات دریافتی را در تگ li قرار دادیم.

ساختار فایل XML مورد استفاده

ساختار فیل XML مورد استفاده در این آموزش را در زیر قرار دادیم.

<?xml version="1.0" encoding="UTF-8"?>
<Book>
	<note>
	  <name>Hossein</name>
	  <family>alizadeh</family>
	  <phone>0911234578</phone>
	</note>
	<note>
	  <name>nima</name>
	  <family>panahi</family>
	  <phone>09136666666</phone>
	</note>
</Book>

از اینکه فرازگر را در این مقاله همرایی کردید از شما سپاسگذاریم.

5/5 - (3 امتیاز)

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *