گروپ دیزاین | ارائه دهنده خدمات نوین

آجاکس فقط یکبار

۷ تیر ۱۳۹۴

شاید نوشتن کدهای ajax برای هر پروژه به صورت جداگانه زیاد خوب به نظر نرسد. بیاید یک کد بنویسیم و از آن در تمام پروژه ها استفاده کنیم.

در این مطلب با استفاده از کتابخانه jQuery کدی مینویسیم که فقط با اضافه کردن یک کلاس به تگ form، اطلاعات فرم به صورت ajax ارسال شود، و همچنین پیام مناسب صادر شود.

در ادامه همراه ما باشید…

ابتدا کد زیر را به صفحه اضافه میکنیم.

[codesyntax lang=”php”]
$(document).on("submit", ".ajax-form", function() {
  var form = $(this),
      action = form.attr('action'),
      method = form.attr('method'),
      dataSerialize = form.serialize();
   
  var request = $.ajax({
    type: method,
    url: action,
    data: dataSerialize
  });
   
  request.done(function(data) {
     alert(data);
  });
   
  request.fail(function() {
      alert('fail');
  });
   
  return false;
});
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
 $(document).on("submit", ".ajax-form", function() {
   var form = $(this),
       action = form.attr('action'),
       method = form.attr('method'),
       dataSerialize = form.serialize();
   
   var request = $.ajax({
     type: method,
     url: action,
     data: dataSerialize
   });
   
   request.done(function(data) {
      alert(data);
   });
   
   request.fail(function() {
       alert('fail');
   });
   
   return false;
 });

 [/codesyntax]

خب. تنها یک قدم دیگر تا اتمام کار کافیست. در مرحله بعد هر فرمی که میخواهید اطلاعات آن به صورت ajax ارسال شود، کافی است کلاس ajax-form را به تگ form اضافه کنید.

نکته ۱: برای بازگشت دادن اطلاعات از سمت سرور، کافیست متنی که میخواهید نمایش دهید را با دستور echo ارسال کنید.

نکته ۲: در تابع خط ۱۳، اطلاعات بازگشتی از سمت سرور، alert میشود، شما میتوانید برای خودتان سفارشی سازی کنید.

نکته ۳: در تابع خط ۱۷، در صورت انجام نشدن عملیات ajax، پیغامی با پیام “fail” به کاربر نمایش داده میشود، شما میتوانید برای خودتان سفارشی سازی کنید.

اگر کد بالا دارای هرگونه اشکال، یا جای کار برای توسعه داشت در نظرات بیان کنید.

تگ های این پست