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

کار کردن با فرم های ثبت نام و AJAX کاری بسیار ساده است به شرط اینکه این مساله را درک کنیم. با مثالی ساده اطلاعات یک فرم ثبت نام را برای یک فایل PHP ارسال میکنیم و با توجه به جوابی که از فایل PHP میگیریم به کاربر نمایش میدهیم که آیا اطلاعات به درستی ارسال شده یا نه.

ابتدا شما به کتابخانه ی jQuery نیاز دارید و یک فرم ساده ی HTML:

<!DOCTYPE html>
<html>
<head>
        <title>AJAX FORM</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- jQuery -->
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcode.jquery.com%2Fjquery.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
</head>
<body>

       

<form name="ajax_form" action="" method="">
               <input type="text" name="firstname">
               <input type="text" name="lastname">
               <button type="button" onclick="send_info()">Send</button>
       </form>



</body>
</html>

در این فرم خبری از action و method نیست و اگر توجه کنید نوع button هم submit نیست و وقتی هم که button کلید میشود تابع ()send_info را صدا میزند. هر چند در بعضی از متود های ajax شما باید یک فرم معمولی بسازید مثلا برای آپلود عکس اما در این مقاله ما میخواهیم به ساده ترین شکل اطلاعات را با متود پست برای فایل PHP ارسال کنیم.

قسمت javascript را هم به فایل خود اضافه میکنیم. اینجا من از متود post.$ استفاده کردم که یکی از توابع jQuery است برای ارسال اطلاعات:


<!DOCTYPE html>
<html>
<head>
        <title>AJAX FORM</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- jQuery -->
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcode.jquery.com%2Fjquery.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
</head>
<body>

       

<form name="ajax_form" action="" method="">
               <input type="text" name="firstname">
               <input type="text" name="lastname">
               <button type="button" onclick="send_info()">Send</button>
       </form>



      <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%20%20%20%20%20%20function%20send_info()%0A%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20firstname%20%3D%20document.forms%5B%22ajax_form%22%5D%5B%22firstname%22%5D.value%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20lastname%20%3D%20document.forms%5B%22ajax_form%22%5D%5B%22lastname%22%5D.value%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if(firstname%20%3D%3D%20%22%22%20%7C%7C%20lastname%20%3D%3D%20%22%22)%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20alert(%22Please%20write%20your%20info%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20false%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24.post(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22ajax.php%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22send_firstname%22%3Afirstname%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22send_lastname%22%3Alastname%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20function(data%2C%20status)%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if(status%20%3D%3D%20%22success%22)%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20alert(data)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20else%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20alert(%22SERVER%20ERROR%3A%20%22%20%2B%20status)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20false%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20)%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

</body>
</html>

در این تابع ابتدا اطلاعات فرم چک میشوند که آیا خالی هستند یا نه در صورتی که خالی نباشند عملیات ارسال انجام میشود.

post.$ سه مقدار میگیرد اول آدرس فایلی که اطلاعات برای آن ارسال میشود دقت کنید در این مثال فایل ajax.php کنار فایل html ما قرار دارد، دوم یک json که حاوی اطلاعات ارسالی است به عنوان مثال “send_firstname” نامی است که PHP مقدار آن را میگیرد و “firstname” مقداری است که کاربر وارد کرده است، سوم تابع callback است که هنگامی که جوابی از سرور برسد این تابع اجرا میشود به طور معمول دو مقدار می گیرد یکی data و دیگری status است که data حاوی اطلاعاتی است که از فایل PHP بازگشته و status وضعیت سرور را نشان میدهد که در صورتی که اطلاعات به خوبی ارسال شده باشد status مقداری معادل success دارد.

 

محتویات فایل ajax.php

if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest')
{
    if(isset($_POST["send_firstname"]))
    {
        echo "Hi ".$_POST["send_firstname"]." ".$_POST["send_lastname"];
        exit();
    }
    else
    {
        echo "NO INFO SEND!";
        exit();
    }
}
else
{
    echo "NO AJAX SEND!";
    exit();
}

این فایل ابتدا چک میکند که آیا اطلاعات ارسالی ازطریق AJAX بوده یا نه سپس چک میکند که آیا اطلاعاتی برای آن ارسال شده یا نه سپس بر اساس موقعیت یک متن را نمایش میدهد که این متن همان مقداری است که data در خود دارد و ما میتوانیم از آن استفاده کنیم. دقت کنید که شما میتوانید در فایل ajax.php از تگ های html و هر نوع کد مجازی استفاده کنید و در صورتی که آن ها را نمایش دهید در متغییر data ذخیره میشوند. نکته ی دیگر اینکه حتما فایل AJAX خود را در آخر ببندید و خط اضافه ای جا نگذارید.

یک پاسخ بدهید

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