چند بار با این واقعیت مواجه شده‌اید که داده‌های نادرست وارد کرده‌اید، به همین دلیل صفحه دوباره بارگذاری شده و کاراکترهای وارد شده در فیلدها را کاملاً حذف کرده است. برای رفع این مشکل، یک رویکرد نسبتاً محبوب برای ساخت رابط کاربری وجود دارد و نام آن ajax است. در بسیاری از پروژه‌ها ظاهر می‌شود و به طرق مختلف استفاده می‌شود.
ارسال فرم ajax: اتصال کتابخانه ها
شامل کتابخانه jquery در index.php.
راه دیگری برای گنجاندن jquery در یک سند وجود دارد. شما باید کتابخانه را از سایت رسمی jquery دانلود کنید، آن را در پوشه سمت راست قرار دهید و لینک آن را مانند این قرار دهید:
اتصال و تنظیم اسناد
1. یک سند php. در پوشه سایت با هر نامی که برای شما مناسب است ایجاد کنید - این فرم php ajax را ارسال می کند. در آن می توانید بنویسید متن پیام با چه فرمتی نمایش داده می شود. برای مثال form1.php.
2. در پوشه فایل‌های جاوا اسکریپت، یک فایل js. با استفاده از آن ایجاد کنیدهر نام مناسب برای مثال form.js.
3. این پوشه را به سند خود وصل کنید.
4. یک فرم با پارامترهای زیر ایجاد کنید:
در آن، فراموش نکنید که فیلدهایی برای وارد کردن داده های خود ایجاد کنید.
5. به فایل form1.php در دایرکتوری با سایت بروید، که در آن بنویسید:
اکنون، هنگام ارسال فرم، مرورگر اطلاعات مربوط به داده ها را نمایش می دهد.
در همین فایل می توانید بنویسید که دقیقاً چه چیزی یا چگونه نمایش داده می شود. همچنین می‌توانید چرخه‌ها یا الگوریتم‌ها را در اینجا بنویسید.
ارسال فرم ajax jquery
1. در فایل form.js ایجاد شده، باید کدی را بنویسید که پس از بارگذاری کامل صفحه سایت، وظیفه کارکرد فایل را بر عهده دارد.
$(document).ready(function(){ //کد بعدی ما در اینجا اجرا خواهد شد });
2. سپس باید دکمه ارسال را سفارشی کنید. همه این کارها را در یک فایل انجام دهید.
$("form").submit(function(event) { event.preventDefault(); //کد زیر در اینجا نوشته خواهد شد });
قسمت اول کد مسئول انتخاب عنصر در صفحه است و قسمت دوم مسئول جلوگیری از عملکرد پیش فرض است.
3. سپس، برای مثال، یک فرم آژاکس برای موفقیت ارسال کنید.
$.ajax({نوع: $(this).attr('روش')، آدرس اینترنتی: $(this).attr('action')، داده: جدید FormData(this) ، نوع محتوا: نادرست، حافظه پنهان: نادرست، پردازش داده: نادرست، موفقیت: تابع(نتیجه){ هشدار(نتیجه)؛ } });
توضیحات زیر شرح مفصلی از هر تنظیمات است.
- نوع -این نوع درخواستی است که در فرم ارسال می شود. از آنجایی که هزینه آن POST است، نوع درخواست مناسب خواهد بود؛
- this - انتخاب عنصر در داخل ساختار؛
- attr - مخفف جاذبه (جاذبه)، یعنی پارامتر خاصی از هدف (فرم) انتخاب شده جذب می شود؛
- url - پارامتر مسئول محل ارسال درخواست. در این حالت، آنچه در پارامترهای فرم نوشته شده است (form1.php);
- data - داده های فرم را مشخص می کند؛
- contentType - مسئول ارسال هدرها به سرور است. در این مورد نیازی نیست؛
- کش - مسئول ذخیره کش کاربر؛
- processData - مسئول تبدیل داده ها به یک رشته؛
- موفقیت - نتیجه ارسال موفقیت آمیز داده را نمایش می دهد. بنابراین، اگر ارسال داده با موفقیت انجام شد، اقدامات تابع اجرا می شود.
4. تمام شد، اکنون هنگام ارسال فرم ajax، داده‌ها را بدون بازخوانی صفحه دریافت خواهید کرد.
نتیجه را می توان با استفاده از فایل form1.php تغییر داد، جایی که می توانید مشخص کنید دقیقاً چه چیزی در نتیجه نمایش داده می شود. به عنوان مثال،
می توانید آزمایش کنید و یک بررسی برای صحت وارد کردن داده های خاص ایجاد کنید: اگر داده ها درست نباشند، پیام مورد نظر نمایش داده می شود، در غیر این صورت به صفحه صحیح هدایت می شود. خیلی چیزهای دیگر نیز ممکن است، هر چه دلتان بخواهد.
همچنین داده ها به صورت ناهمزمان به سرور ارسال می شود. این زمانی است که کاربر متنی را وارد می کند و بلافاصله با رنگ قرمز مشخص می شود که نشان می دهد اطلاعات وارد شده صحیح نیست. در مورد آنراهنماهای زیادی در اینترنت وجود دارد که همه چیز به وضوح توضیح داده شده و با مثال نشان داده شده است.
نتیجه گیری
بی شک ajax ابزاری مفید در ساخت وب سایت است. برای ساخت صفحات و رابط های با کیفیت بالا، به سادگی لازم است. شایان ذکر است که برای درک کامل تصویر و آنچه در کد نوشته شده است، دانستن jQuery بسیار مهم است، زیرا یک کپی پیست ساده همیشه نمی تواند کمک کند و درک کد را به شما آموزش دهد. همیشه لازم به یادآوری است که نسخه های زبان به روز می شوند و برخی از ویژگی ها ممکن است به سادگی ناپدید شوند. بنابراین، ممکن است همه راه‌حل‌ها مرتبط نباشند، اغلب کد نوشته شده به سادگی کار نمی‌کند یا نتیجه‌ای را که می‌خواهید روی صفحه نمایش خود ببینید، ایجاد نمی‌کند.
