آموزش ajax در php

در این مقاله آموزشی قصد داریم به شما نحوه انحام عملیات ajax در php را با جاواسکریپت نشان دهیم .

AJAX مخفف Asynchronous Javascript and XML است که متدی برای ارسال درخواست به اسکریپت سمت سرور برای اجرا از طریق جاواسکریپت است . این درخواست (request) در تابع جاواسکریپت ساخته و به فایل PHP ارسال می شود.

در سمت سرور (Server-side) , فایل php آن را دریافت و درخواست ارسالی توسط AJAX (اجکس) را پردازش و یک پاسخ را برگشت می دهد. این ارتباط بین سرور-کلاینت به روش غیرهمگام (Asynchronous) انحام می شود . بعد از دریافت پاسخ (response) از فایل PHP , ما بخش مورد نظر از صفحه وب را بروز رسانی می کنیم که مانع رفرش مجدد صفحه می شود .

در واقع اجکس یک تکنیک برای تبادل داده بین سرور و کلاینت بدون بارگذاری مجدد آن همه داده روی صفحه وب است که باعث سریع تر شدن فرایندهای کوتاهی مثل لایک و دیس لایک , امتیاز دهی , احراز هویت ها و از این دست عملیات می شود.

AJAX می تواند توسط کتابخانه و API های مختلفی پیاده سازی شود . من در این آموزش ajax در php از XMLHTTPRequest برای ارسال درخواست AJAX برای اجرای اسکریپت لاگین در php استفاده می کنم. بعد از دریافت پاسخ از کد php , کد اجکس وضعیت برگشتی را بررسی و نتیجه احراز هویت کاربر را در صفحه بدون بارگذاری مجدد نمایش میدهد .

فرم لاگین AJAX

کد HTML زیر به شما یک فرم لاگین با فیلد های یوزرنیم و پسورد را نشان میدهد . با کلیک بر روی دکمه Login , تابع جاواسکریپت CallLogin() برای ارسال درخواست AJAX اجرا می شود . این تابع مقادیر فیلد های فرم لاگین را به صفحه php برای پردازش عملیات احراز هویت (authentication) ارسال می کند. یک تگ DIV نیز برای نمایش نتیجه احراز هویت کاربر توسط تابع AJAX بدون بارگذاری (refresh) قرار دادیم .

<div id="output">
	<div id="messageBoxId"></div>		
	<form action="" method="post" id="frmLogin">
		<div class="field-group">
			<div><label for="login">Username</label></div>
			<div><input name="userName" id="userName" type="text" class="input-field">
		</div>
		<div class="field-group">
			<div><label for="password">Password</label></div>
			<div><input name="password" id="password" type="password" class="input-field"> 
		</div>
		<div class="field-group">
			<div><input type="button" name="login" value="Login" class="form-submit-button" onClick="callLogin();"></span></div>
		</div>       
	</form>
</div>

<div><label for="login">Username</label></div>

</div>

<div><label for="password">Password</label></div>

</div>

</div>

</form>

</div>

ارسال درخواست لاگین توسط تابع AJAX جاواسکریپت

در این تابع جاواسکریپت ما یک نمونه آبجکت از درخواست لاگین اجکس را ساختیم .از جایی که مرورگرهای قدیمی از این نوع API پشتیبانی نمی کنند , می توانستیم یک آبجکت ActiveXObject نیز ایجاد کنید . این تابع اطلاعات لاگین کاربر را به صفحه login.php با متد GET ارسال میکند . اگر عملیات احراز هویت با موفقیت انجام شود , در اینصورت تابع یک پیام welcome را در صفحه نمایش می دهد. در غیراینصورت , یک خطای error در بالای فرم لاگین نمایش داده می شود . همه این تغییرات توسط درخواست AJAX بدون رفرش صفحه انجام می شود.

<script>
function callLogin(){
	var userName = document.getElementById("userName").value;
	var password = document.getElementById("password").value;
	xmlHttpRequest=new XMLHttpRequest();
	// For Older browsers
	// xmlHttpRequest=new ActiveXObject("MSXML2.XmlHttp");
	xmlHttpRequest.onreadystatechange=function() {
		if (xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200) {
			var response = xmlHttpRequest.responseText;
			if(response > 0) {
				var welcome_message = '<p class="welcome-message">Welcome, You have successfully loggedin!</p>';
				document.getElementById("output").innerHTML = welcome_message;
			} else {
				document.getElementById("messageBoxId").innerHTML="Invalid Credentials";
				document.getElementById("messageBoxId").className="error-message";
			}
		}
	}
	xmlHttpRequest.open("GET","login.php?userName="+userName+"&password="+password,true);
	xmlHttpRequest.send();
}
</script>

function callLogin(){

var userName = document.getElementById("userName").value;

var password = document.getElementById("password").value;

xmlHttpRequest=new XMLHttpRequest();

// For Older browsers

// xmlHttpRequest=new ActiveXObject("MSXML2.XmlHttp");

xmlHttpRequest.onreadystatechange=function() {

if (xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200) {

var response = xmlHttpRequest.responseText;

if(response > 0) {

var welcome_message = '<p class="welcome-message">Welcome, You have successfully loggedin!</p>';

document.getElementById("output").innerHTML = welcome_message;

} else {

document.getElementById("messageBoxId").innerHTML="Invalid Credentials";

document.getElementById("messageBoxId").className="error-message";

}

xmlHttpRequest.open("GET","login.php?userName="+userName+"&password="+password,true);

xmlHttpRequest.send();

}

</script>

اسکریپت PHP لاگین با MySQL

کد php زیر درخواست AJAX را دریافت و عملیات لاگین را بررسی میکند .این کد php کاربر مورد نظر را با اطلاعات پاس داده شده توسط درخواست AJAX در دیتابیس MySQL جستجو میکند . اگر مورد منطبقی یافت شد در این صورت مقدار true را در خروجی برگشت میدهد.

<?php
	if(count($_GET)>0) {
		$conn = mysqli_connect("localhost","root","","blog_samples");
		$result = mysqli_query($conn,"SELECT * FROM users WHERE userName='" . $_GET["userName"] . "' and password = '". $_GET["password"]."'");
		"SELECT * FROM users WHERE userName='" . $_GET["userName"] . "' and password = '". $_GET["password"]."'";
		$count  = mysqli_num_rows($result);
		print $count;
		mysqli_close($conn);
	}
?>

<?php

if(count($_GET)>0) {

$conn = mysqli_connect("localhost","root","","blog_samples");

$result = mysqli_query($conn,"SELECT * FROM users WHERE userName='" . $_GET["userName"] . "' and password = '". $_GET["password"]."'");

"SELECT * FROM users WHERE userName='" . $_GET["userName"] . "' and password = '". $_GET["password"]."'";

$count = mysqli_num_rows($result);

print $count;

mysqli_close($conn);

}

دیدید به چه راحتی می توانیم انواع عملیات در صفحات وب را با تکنولوژی AJAX در php پیاده سازی کنیم . در بسیاری از عملیات مثل ثبت نظر سنچی , like یک مطلب , تایید احراز هویت , نمایش نتایج جستجو , عملیات سبد خرید , نمایش لیست استان و شهرها و حتی کامنت گذاشتن که عملیات کوچکی هستند بدون اینکه کاربر را مجبور به لود مجدد آن همه المان دیگر در صفحه وب کنیم , به آسانی با ajax در php بهره ببریم که باعث افزایش عملکرد و بخصوص UX وب سایتمان بشویم.

از ajax بخصوص در فروشگاه های اینترنتی بسیار استفاده می شود . همچنین میتوانیم از ajax برای برگشت یک سری داده ها و نمایش تصویر , متن استفاده کنیم که در آموزش های قبلی در مورد صفحه بندی ajax در php دیدیم .

همچنین با جی کویری به راحتی با یک تابع می توانید این عملیات را پیاده سازی کنید که در مقالات آموزشی قبل دیدیم .

امیدوارم از آموزش ajax در php نهایت استفاده را برده باشید . برای دانلود سورس این مقاله می توانید به بخش باکس دانلود زیر این مقاله آموزشی مراجعه کنید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق و پیروز باشید

لغو پاسخ

Hassan ۲۳ دی ۱۴۰۰

سلام ببخشید شمارش تعداد دفعات دانلود با php چطور درست میکنن.

پاسخ

حسن شفیعی ۲۴ دی ۱۴۰۰

سلام. همینکه روی دکمه کلیک شد باید درخواست ajax بزنید به فایل php و اون تعداد رو داخل سطر اون لینک دانلود داخل دیتابیس آپدیت کنید

پاسخ

محمد ۱۲ فروردین ۱۴۰۰

سلام؛
در صفحه تسویه حساب یک فیلد ایجاد کردم، به این صورت:
add_filter( ‘woocommerce_checkout_fields’ , ‘override_checkout_city_fields’ , 10, 1 );

function override_checkout_city_fields( $fields ) {

$fields[‘billing’][‘billing_citykd’] =
array(

‘required’ => false,
‘clear’ => true,
‘type’ => ‘text’,
‘priority’ => 3,
‘class’ => array(‘form-right-small’),

);

return $fields;
}
}

میخوام وقتی یک عدد توی تکس نوشته میشه یا ریخته میشه توسط کدهای جاوا، مقدار رو توی یک متغیر بریزم و با این مقدار کار کنم.
نیازی به ذخیره محتویات باکس هم ندارم. صرفا یک تمپ لازم دارم که مقداری که توسط کد جاوا توی باکس ریخته شده رو تو کدهای php استفاده کنم .
آیا منطق کار درسته؟
متشکر

پاسخ

حسن شفیعی ۱۲ فروردین ۱۴۰۰

سلام.
باید رویداد onkeyup رو روی همون input قرار بدید و بعد داخل اون ajax رو اجرا کنید و به سمت php بفرستید

پاسخ

آزاد ۳ فروردین ۱۳۹۹

با سلام و احترام
یک کار برنامه نویسی دانشجویی دارم.
با PHP & AJAX و دیتابیس ACCESS.
یک صفحه برای ورود اطلاعات و یک صفحه برای خواندن اطلاعات وارد شده با تکنولوژی AJAX.
راهنمایی بیشتر بصورت تلفنی ارئه خواهد شد.
حداکثر بودجه من: ۵۰۰ هزار تومان
شماره تماس *

متشکرم
آزاد

پاسخ

حسن شفیعی ۳ فروردین ۱۳۹۹

سلام روز بخیر.
اطلاعات تکمیلی خدمتتون ارسال شد.

پاسخ

آموزش ajax در php

فرم لاگین AJAX

ارسال درخواست لاگین توسط تابع AJAX جاواسکریپت

اسکریپت PHP لاگین با MySQL

دانـلود باکــس

افزودن قابلیت لایک به سیستم نظردهی با PHP

متد $.ajax() در jQuery

ساخت لیست باکس چند انتخابی با jQuery و PHP

insert درون خطی توسط AJAX در جی کوئری

لغو پاسخ

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

آموزش ساخت ربات تلگرام با PHP (از پایه و پروژه محور)

دوره جامع آموزش طراحی سایت + پروژه قالب فروشگاه