در این آموزش, نحوه نمایش پیام موفقیت آمیز را بصورت fade توسط جی کوئری را خواهیم دید. بعد از ارسال فرم بصورت AJAX , ما پاسخ را بصورت Fade نمایش می دهیم.
قبلا افکت fade در جی کوئری را با استفاده از رویداد mouse-over بر روی المنت HTML را دیدم.
در این مثال ما یک فرم HTML با دو فیلد ضروری را داریم. کد AJAX فرم را اعتبارسنجی و مقادیر ورودی را به PHP ارسال می کند. اسکریپت PHP بر اساس درخواست AJAX یک پاسخ موفقیت آمیز را برگشت می دهد. این پیام بصورت افکت fade in/out با استفاده از jQuery نمایش داده می شود.
کد HTML فرم
کد زیر شامل فیلد های نام و پیام است که متن بازگشتی را نیز نمایش می دهد. این دو مقدار نمی تواند خالی باشند و با استفاده از jQuery اعتبارسنجی می شوند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<form id="frmDemo" method="post"> <div class="input-group">Name </div> <div> <input type="text" name="name" id="name" class="input-control" /> </div> <div class="input-group">Message </div> <div> <textarea name="comment" id="comment" class="input-control"></textarea> </div> <div style="float:left"> <button type="submit" name="btn-submit" id="btn-submit">Submit</button> </div> <div id="error_message" class="ajax_response" style="float:left"></div> <div id="success_message" class="ajax_response" style="float:left"></div> </form> |
نمایش پیام AJAX با jQuery
یک اسکریپت برای سابمیت فرم HTML توسط AJAX را داریم. این اسکریپت از ارسال مقادیر پیش فرض و خالی به فایل php جلوگیری می کند و AJAX را برای دریافت ورودی ها از فیلد فرم, فراخوانی می کند.
این ورودی ها اعتبارسنجی و بعد به سمت سرور پاس داده می شوند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<script> $("#frmDemo").submit(function(e) { e.preventDefault(); var name = $("#name").val(); var comment = $("#comment").val(); if(name == "" || comment == "" ) { $("#error_message").show().html("All Fields are Required"); } else { $("#error_message").html("").hide(); $.ajax({ type: "POST", url: "post-form.php", data: "name="+name+"&comment="+comment, success: function(data){ $('#success_message').fadeIn().html(data); setTimeout(function() { $('#success_message').fadeOut("slow"); }, 2000 ); } }); } }) </script> |
اگر فایل PHP سمت-سرور این ورودی ها را دریافت کند, پس یک پاسخ را fade in می کند. و سپس, این متن پیام بعد از گذشت چندی از ثانیه توسط setTimeOut() مخفی می شود.
ما از متد های افکت fade در جی کوئری برای نمایش پیام AJAX استفاده کردیم.
امیدوارم از آموزش نمایش پیام AJAX با jQuery نهایت استفاده را برده باشید .
برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق و پیروز باشید
سلام جناب شفیعی
من وقتی از طریق متدsuccess مقدار data رو برمیگردونم همراه ارور ها و خطاهایی که چاپ کردم کد اچ تب ام صفحه وبم هم همراش چاپ میشه…
ممنون میشم راهنمایی کنید.
سلام.
صفحه ajax باید فقط مقداری که می خواهید برگشت بده و هیچ تگ html یا غیره چاپ نکنه مثلا در فایل ajax.php هیچ خروجی بجز چیزی که می خواهید دریافت شد echo نکنید.
من تگ های html رو چاپ نکردم و فقط فایل هدر که قبل از پوشه ایجکس لود شده همراه با مقادیری که چاپ کردم چاپ میشه….
ممنون میشم بیشتر راهنمایی کنین.
در فایل php که به آن درخواست ajax می دهید نباید هیچ مقداری به جز کد php باشه
من درخاست ajax رو در یک صفحه و اخر کد های html احرا کردم.اینطور که شما میگین باید درخاست ajax رئ اونجا بردارم و تو یه پوشه جدا اجرا کنم؟!!
بله در یک فایل php جداگانه بزارید
تو فایل js قرار بدم یا تو فایل php??
من تو ی فایل js قرار دادم و در هدر لود کردم و اجکس کار نکرد و صفحه رفرش شد.
فولدر با فایل فرق داره. منظور بنده فایل php هست مثلا name.php