hody.ir

7- استفاده از ajax در jQuery | هودی | آموزشای متنی

7- استفاده از ajax در jQuery

Ajax Tutorial

سلام دوستان، به جلسه آخر آموزش صفر تا صد ajax خوش آمدید، در این جلسه در مورد چگونگی استفاده از ajax در jQuery توضیح می دهیم.

در جلسه قبل در مورد شیء ActiveXObject صحبت کردیم، پیشنهاد میشود برای یادگیری بهتر جلسات قبل را بخوانید.

jQuery چیست؟

jQuery یک کتابخانه از جاوا اسکریپت است که موجب می‌شود کار با HTML آسان تر شود.

روش استفاده ی ajax در jQuery

برای استفاده از ajax در جی کوئری راه های زیادی هست، ما در این آموزش راه ها اصلی را توضیح میدهیم

دریافت اطلاعات از فایل txt

برای دریافت اطلاعات از فایل txt کافیست تابع load را فراخوانی کنید

$('.demo').load('data.txt')

خروجی:

Hello World!

دریافت اطلاعات از انواع فایل ها

متود $.ajax

این متود یک ورودی دارد که از جنس object است

در این Object چندین عضو هست اما من فقط عضو های اصلی آن را توضیح میدهم

$.ajax({
	//Some Code ...
})

1 – url

این عضو آدرسی که قرار است از آن اطلاعات ارسال یا دریافت شود را میگیرد

url : 'data.json'

2 – type

این عضو دو مقدار دارد که میتواند GET یا POST باشد

type : 'GET'

3 – dataType

در این عضو باید پسوند فایلی که قرار است از آن اطلاعات دریافت کنید را بنویسید

dataType: 'json'

4 – success

اگر درخواست با موفقیت ارسال شود این عوض تابعی را فراخوانی میکند

success: function() { ... }

5 – error

این عضو وقتی که خطایی پیش آید تابعی را فراخوانی میکند

error : function() { ... }

استفاده عملی:

محتوای فایل json:

[
	{
		"First_name" : "Barot",
		"Last_name" : "Bellingham",
		"Bio":"Barot has ..."
	},
	{
		"First_name" : "Jonathan",
		"Last_name" : "Ferrar",
		"Bio":"Jonathan was a ..."
	},
	{
		"First_name" : "Hillary",
		"Last_name" : "Hewitt",
		"Bio":"Barot is a ..."
	}
]

ساختار

<!doctype html>
<html>
	<head>
		<title>Ajax in jQuery</title>
	</head>
	<body>
		<div class="demo"></div>
		<script src="jQuery.min.js"></script>
		<script>

			//All jQuery codes are here
		</script>
	</body>
</html>

کد jQuery:

$.ajax({
	url: "data.json",
	type: "GET",
	dataType: "json",
	success: function(data) {
	  $('.demo').text($(data)[1].First_name)
	},
	error : function() {$('.demo').text('Request could not send')}
})

خروجی:

دوستان جلسه آخر هم به پایان رسید، خوشحال میشم که ما را با کامنت های تان همراهی کنید

اگر سوالی برایتان پیش آمده است حتما در کامنت ها یا در گروه تلگرام ما سؤالتان را بپرسید

امیدوارم این جلسه برایتان مفید بوده باشد خداحافظ

0 0 vote
Article Rating
Subscribe
اطلاع از
guest
0 Comments
Inline Feedbacks
View all comments