نمایش پیام AJAX با jQuery

  • منتشر شده در تاریخ

نمایش پیام AJAX با jQuery

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

قبلا افکت fade در جی کوئری را با استفاده از رویداد mouse-over بر روی المنت HTML را دیدم.

در این مثال ما یک فرم HTML با دو فیلد ضروری را داریم. کد AJAX فرم را اعتبارسنجی و مقادیر ورودی را به PHP ارسال می کند. اسکریپت PHP بر اساس درخواست AJAX یک پاسخ موفقیت آمیز را برگشت می دهد. این پیام بصورت افکت fade in/out با استفاده از jQuery نمایش داده می شود.

نمایش پیام AJAX با jQuery

کد HTML فرم

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

نمایش پیام AJAX با jQuery

یک اسکریپت برای سابمیت فرم HTML توسط AJAX را داریم. این اسکریپت از ارسال مقادیر پیش فرض و خالی به فایل php جلوگیری می کند و AJAX را برای دریافت ورودی ها از فیلد فرم, فراخوانی می کند.

این ورودی ها اعتبارسنجی و بعد به سمت سرور پاس داده می شوند.

اگر فایل PHP سمت-سرور این ورودی ها را دریافت کند, پس یک پاسخ را fade in می کند. و سپس, این متن پیام بعد از گذشت چندی از ثانیه توسط setTimeOut() مخفی می شود.

ما از متد های افکت fade در جی کوئری برای نمایش پیام AJAX استفاده کردیم.

 

امیدوارم از آموزش نمایش پیام AJAX با jQuery نهایت استفاده را برده باشید .

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

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

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

حسن شفیعی علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم. توصیه من: هاست میهن وب‎هاست
مطالب زیر را حتما بخوانید
دیدگاه کاربران (۸)

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

  1. حمزه ۱۸ دی ۱۳۹۹

    سلام جناب شفیعی
    من وقتی از طریق متدsuccess مقدار data رو برمیگردونم همراه ارور ها و خطاهایی که چاپ کردم کد اچ تب ام صفحه وبم هم همراش چاپ میشه…
    ممنون میشم راهنمایی کنید.

    پاسخ
    1. حسن شفیعی ۱۸ دی ۱۳۹۹

      سلام.
      صفحه ajax باید فقط مقداری که می خواهید برگشت بده و هیچ تگ html یا غیره چاپ نکنه مثلا در فایل ajax.php هیچ خروجی بجز چیزی که می خواهید دریافت شد echo نکنید.

      پاسخ
      1. حمزه ۱۸ دی ۱۳۹۹

        من تگ های html رو چاپ نکردم و فقط فایل هدر که قبل از پوشه ایجکس لود شده همراه با مقادیری که چاپ کردم چاپ میشه….
        ممنون میشم بیشتر راهنمایی کنین.

        پاسخ
      2. حسن شفیعی ۱۸ دی ۱۳۹۹

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

        پاسخ
      3. حمزه ۱۸ دی ۱۳۹۹

        من درخاست ajax رو در یک صفحه و اخر کد های html احرا کردم.اینطور که شما میگین باید درخاست ajax رئ اونجا بردارم و تو یه پوشه جدا اجرا کنم؟!!

        پاسخ
      4. حسن شفیعی ۱۸ دی ۱۳۹۹

        بله در یک فایل php جداگانه بزارید

        پاسخ
      5. حمزه ۱۸ دی ۱۳۹۹

        تو فایل js قرار بدم یا تو فایل php??
        من تو ی فایل js قرار دادم و در هدر لود کردم و اجکس کار نکرد و صفحه رفرش شد.

        پاسخ
      6. حسن شفیعی ۱۸ دی ۱۳۹۹

        فولدر با فایل فرق داره. منظور بنده فایل php هست مثلا name.php

        پاسخ
دوره های آموزشی