استفاده از AJAX در PHP
یک مثال برای ارسال درخواست AJAX به سرور، یک فرم ساده عضویت در خبرنامه است. برای عضویت در خبرنامه، کاربر باید ایمیل و نام خود را وارد کرده و فرم را ارسال کند.
میخواهیم بدون رفرش صفحه، فرآیند عضویت در خبرنامه انجام شود.
در اینجا دو فایل داریم. یکی فایل حاوی فرم عضویت و دیگری عملیات هایی است که برای عضویت در خبرنانه انجام میشود. (ثبت اطلاعات در پایگاه داده سایت)
کدهای زیر فرم عضویت و کدهای مربوط به درخواست AJAX است.
کد:
<!doctype html>
<html>
<head>
<title>ثبت نام در خبرنامه</title>
</head>
<body>
<form id="newsletter" method="post">
<div>
<input type="text" name="name" id="name" />
<input type="email" name="email" id="email" />
<button type="submit" name="register" id="register">عضویت در خبرنامه</button>
</div>
</form>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#newsletter').submit(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: 'register.php',
data: $(this).serialize(),
success: function(response){
var resp = JSON.parse(response);
if (resp.success == "1"){
alert("عضویت با موفقیت انجام شد")
} else {
alert(resp.message);
}
}
});
});
});
</script>
</body>
</html>
در این کد، برای اتفاق افتادن رویداد ارسال فرم منتظر می مانیم. به محض ارسال فرم، با استفاده از تابع preventDefault() روی رویداد، از رفرش شدن صفحه جلوگیری میکنیم.
حال مشابه قبل و با استفاده از کتابخانه JQuery محتوای فرم را به register.php ارسال میکنیم.
سپس با توجه به پاسخ سرور، پیام مناسبی را به کاربر نمایش خواهیم داد.
پاسخ های رد و بدل شده در این روش به صورت JSON هستند. بنابراین نیاز داریم در هنگام دریافت اطلاعات، آنها را پارس کنیم.
اکنون نوبت فایل سمت سرور است. به طور کلی می بایست در این فایل اطلاعات را دریافت و ذخیره کنیم. سپس پاسخ مناسبی را به کاربر ارسال نماییم.
کدهای زیر را در فایل register.php قرار میدهیم.
همانطور که گفته شد، برای رد و بدل کردن اطلاعات، لازم داریم پیام ها را به شکل JSON تبدیل کنیم.کد:
<?php
if (isset($_POST['name']) && $_POST['email']) {
// Save all user Data
echo json_encode(array('success' => 1));
} else {
echo json_encode(array('success' => 0, 'message' => 'لطفا هر دو فیلد را تکمیل نمایید'));
}
?>
