ارسال یک فرم بدون رفرش شدن صفحه ( Ajax )

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

مقدمه :

حتما در وب گردی بسیار سایت ها را دیده اید که بدون نیاز به ریفرش شدن عملیات های سرور انجام می دهند . مثلا سایتهایی که فقط با تایپ در قسمت سرچ آنها شروع به جستجو محتوای سایت میکنند و نتایج را نمایش می دهند و یا سایتهایی که با تایپ یک متن و زدن کلید ارسال بدون نیاز به لود شدن و ریفرش شدن صفحه متن در دیتابیس ذخیره می شود . این سایتها از تکنولوژی به نام آی جکس Ajax استفاده میکنند .
در این مثال سعی داریم یک فرم تماس با ما را که از فیلد های نام ، ایمیل و شماره تلفن تشکیل شده است را با تکنولوژی Ajax به سرور ارسال کنیم .

قدم اول : ساخت فرم HTML

<form name="contact" action="">
    <label for="name" id="name_label">نام</label>
    <input type="text" name="name" id="name" size="30" value="" class="text-input" />
    <label class="error" for="name" id="name_error">*</label>
    <label for="email" id="email_label">ايميل</label>
    <input type="text" name="email" id="email" size="30" value="" class="text-input" />
    <label class="error" for="email" id="email_error">*</label>
    <label for="phone" id="phone_label">تلفن</label>
    <input type="text" name="phone" id="phone" size="30" value="" class="text-input" />
    <label class="error" for="phone" id="phone_error">*</label>
      <br />
    <input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
</form>

توجه کنید که در قسمت اکشن فرم هیچ آدرس وارد نشده است !

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

قدم بعدی : دانلود و اضافه کردن کتابخانه جی کوئری به کدها می باشد .

مراجعه شود به مقاله مقدمه ای بر جی کوئری – قسمت اول

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

$(function() {
  $(".button").click(function() {
    // validate and process form here
  });
});

قدم سوم : معتبر سازی مقادیر وارد شده توسط کاربر

همانگونه که میدانید کاربران ممکن است اطلاعاتی را به شکلی که ما نیاز داریم وارد نکند به عنوان مثال وارد کردن ایمیل بدون علامت @ و یا شماره تلفن کمتر و بیشتر از فرمت عادی . برای این کار 2 نوع عملیات میتوان انجام داد . 1 وقتی اطلاعات به سرور ارسال شد توسط کد های پی اچ پی این اطلاعات را مدیریت کنیم 2 قبل از ارسال شدن اطلاعات آنها را توسط کد های جاواسکریپت و کتابخانه جی کوئری بررسی کنیم.
البته باید این نکته را بدانید همیشه در قسمت سرور هم اطلاعات را مدیریت کنید و با بررسی اطلاعات سمت کاربر با جاوااسکریپت احتمال خطا را کم میکنید و فشارها ی بیهوده روی سرور را کم میکنید.
برای معتبر سازی ما از کد های زیر استفاده میکنیم :

$(function() {
  $('.error').hide();
  $(".button").click(function() {
    // validate and process form here
     
    $('.error').hide();
    var name = $("input#name").val();
      if (name == "") {
      $("label#name_error").show();
      $("input#name").focus();
      return false;
    }
      var email = $("input#email").val();
      if (email == "") {
      $("label#email_error").show();
      $("input#email").focus();
      return false;
    }
      var phone = $("input#phone").val();
      if (phone == "") {
      $("label#phone_error").show();
      $("input#phone").focus();
      return false;
    }
     
  });
});

که همانطور که ملاحظه میکنید چون مقاله ابتدایی است فقط خالی و پر بودن فیلد های بررسی شده است.

قدم چهارم : پردازش اطلاعات و ارسال اطلاعات توسط Ajax

قلب این مقاله در این قسمت می باشد و هدف کل این مقاله در خصوص این تکنولوژی می باشد .
پس از معتبر سازی مقدارهای وارد شده حالا نوبت این رسیده است که اطلاعات در پس زمینه و به دور از چشم کاربر به سرور ارسال شود .
تابع Ajax در جی کوئری چند قسمت دارد به شکل مختصر موارد مهم آن به شرح زیر است :
Type : بیانگر نوع ارسال اطلاعات می باشد که همانطور که میدانید نوع های مثل POST و GET وجود دارد .
url : آدرس فایل پی اچ پی که اطلاعات به آن ارسال میشود.
Data : داده هایی که باید ارسال شود ( نوع و چینش این اطلاعات متفاوت می تواند باشد به شکل آرایه یا یک رشته پیوسته می توان اطلاعات را ارسال کرد که در این مثال ما از نوع رشته پیوسته استفاده کرده ایم )
Success : تابع و اتفاقی که باید در هنگام موفقیت آمیز بودن ارسال انجام شود.

var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;
//alert (dataString);return false;
$.ajax({
  type: "POST",
  url: "bin/process.php",
  data: dataString,
  success: function() {
    $('#contact_form').html("<div id='message'></div>");
    $('#message').html("<h2>Contact Form Submitted!</h2>")
    .append("<p>We will be in touch soon.</p>")
    .hide()
    .fadeIn(1500, function() {
      $('#message').append("<img id='checkmark' src='images/check.png' />");
    });
  }
});
return false;

قدم آخر : مدیریت اطلاعات ارسال به فایل PHP

اطلاعات ارسال را بسته به نوع ارسال (POST یا GET) در پی اچ پی به سادگی میتوان دریافت کرد مانند کد زیر :

<?php
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
?>