ویرایش درون خطی با AJAX و PHP

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

در این آموزش , قصد داریم به شما نحوه ویرایش درون خطی با AJAX و PHP را نشان بدیم. ویرایش بصورت (inline) زحمت کاربر با با اجازه ویرایش در همان نمایش لیست را کمتر می کند .

در این روش دیگر نیاز نیست کاربر را به صفحه ویرایش دیگری برای نمایش یک فرم و تغییر اطلاعات هدایت کنیم.

در این مثال, ما از یک جدول شامل لیستی از نتایج خوانده شده از دیتابیس MySQL را داریم(اتصال دیتابیس MySQL با php). اینجا ما خصوصیت contentEditable را به سطر های جدول به منظور ویرایش با کلیک را  اضافه کردیم.

ویرایش درون خطی با AJAX و PHP

محتویات قابل ویرایش

کد PHP و HTML زیر به شما یک جدول قابل ویرایش را نمایش می دهد. ما تابع جی کوئری را در هنگام انجام رویداد blur بر روی سطر قابل ویرایش فراخوانی می کنیم.

بروزرسانی با AJAX در jQuery

اسکریپت زیر سطر قابل ویرایش جدول , نام ستون و مقدار ویرایش شده inline را دریافت می کند. بعد از آن یک درخواست ajax را با متد POST و این اطلاعات دریافتی به سمت سرور ارسال می کند.

در اسکریپت PHP , ما دیتابیس را با استفاده از این اطلاعات بروزرسانی (UPDATE) و یک پاسخ به درخواست AJAX همراه با محتویات ویرایش شده برگشت می دهیم.

کد PHP برای ویرایش درون خطی با AJAX

این فایل PHP توسط درخواست AJAX فراخوانی می شود که یک دستور (Query) SQL را برای ویرایش محتویات اجرا می کند.

امیدوارم از آموزش ویرایش درون خطی با AJAX و PHP نهایت استفاده را برده باشید .

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

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

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

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

آموزش های رایگان بیشتر در اینستاگرام ما ...

NETPARADIS /
مطالب زیر را حتما بخوانید
دیدگاه کاربران (۱۱)

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

  1. majid ۲۴ بهمن ۱۳۹۸

    سلام
    ممنون از اموزشی ک گزاشتید
    میخواستم ک ی لطفی کنید؛ نحوه اپدیت کردن اطلاعات با کمک ایجکس در مودال بوت استرپ در لاراول رو هم بزارید
    خاههههشن بزار این اموزشو برادر 🙏🏻😅
    ممنون

    پاسخ
    1. حسن شفیعی ۲۴ بهمن ۱۳۹۸

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

      پاسخ
  2. Mobin ۲۵ اردیبهشت ۱۳۹۷

    سلام
    ممنون از آموزشتون
    یه مشکلی که من با js داشتم اینه که اطلاعات جدید رو که با ایجکس چاپ میکنم رو نمیشناسه
    واسه این مورد راه حلی دارید؟
    مثلا من یه کلید دارم با زدن اون کلید یه فرم از سرور خونده میشه و با jquery چاپ میشه توی صفحه
    حالا مشکل اینه که جاوا اسکریپت اون فرم جدید رو نمیشناسه!

    پاسخ
    1. حسن شفیعی ۲۵ اردیبهشت ۱۳۹۷

      سلام . خوشحالم که مفید واقع شده .
      اطلاعات شما در چه فرمی برگشت داده میشه ؟ آیا متن ساده است و یا json ؟
      همچنین بهتره هدر ها و لاگ کنسول مروگر رو چک کنید تا متوجه مشکل بشید .

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

      موفق باشید.

      پاسخ
      1. Mobin ۲۵ اردیبهشت ۱۳۹۷

        ممنون از جواب سریعتون
        متاسفانه سایتتون بدون !!! شکن بالا نمیاد!
        منم روی لپتاپ !!!!!!! ندارم
        پس سعی میکنم با مثال توضیح بدم
        اول این که جاوا اسکریپت وقتی صفحه لود میشه دام ها رو میخونه درسته؟
        حالا اگه بعد از لود صفحه ما اطلاعات اضافه کنیم اونا هم شناسایی میشن یا نه!
        من واسه وردپرس پلاگین مینویسم
        زیادم پلاگین نوشتم اما همیشه این مشکل رو داشتم که اگه اطلاعات جدید چاپ کنم دیگه جاوا اسکریپتم نمیشناسه
        فرض کنید من یه صفحه ورود دارم و کاربر با وارد کردن اطلاعات وارد میشه
        من میخوام صفحه رفرش نشه و بعد از وارد شدن یه فرم دیگه بیاد واسه ارسال پیام و این فرم هم با اجاکس ارسال کنه
        حالا مشکل اینجاست که المتهای جدید ک چاپ شدن رو جاوا اسکریپت نمیشناسه و کنسول هم ارور undefined رو میده
        مثلا دستور onclick یا هر event دیگه ای کار نمیکنن
        یکی از راهاش reload کردن دوباره فایل js هست که میگن امن نیست.

        پاسخ
      2. حسن شفیعی ۲۵ اردیبهشت ۱۳۹۷

        خواهش می کنم.

        از چه سرویس اینترنتی استفاده می کنید که سایت باز نمیشه ؟

        برای حل این مشکل می تونید از متد های parent استفاده کنید و یا اینکه از سلکتور ریشه ای مثل body شروع کنید و روش رویداد رو اعمال کنید.

        همچنین مفهمومی به اسم delegate در جی کوئری وجود داره که در یک مثال از اون استفاده کردیم و میتونید مثال رو بررسی کنید.

        index.html

        ajax.php

        در صورتی که به نتیجه نرسیدید کد رو به netparadis.com@gmail.com ارسال کنید تا بعد بررسی پاسخ برای شما ارسال بشه .

        موفق باشید.

        پاسخ
      3. Mobin ۲۵ اردیبهشت ۱۳۹۷

        عااالللییی
        ممنون 😊
        من از متود on استفاده میکردم اما بهش سلکتور نمیدادم
        حالا فهمیدم مشکل کجاست 🙂
        من آسیاتک دارم و بعضی سایتا مشکل دارن
        حتما خبرشون کنید احتمالا اشتباهی ip هاستتون رو بستن

        پاسخ
      4. Mobin ۲۵ اردیبهشت ۱۳۹۷

        در واقع این روش شما هم تست کرده بودم چون توی چندتا سایت خارجی دیدم اما حالا فهمیدم اون parent هم که میدادم هم خودم چاپ کرده بودم و نکتش اینجا بود که سلکتور جی کوئری رو باید چیزی میدادم ک قبلا بوده
        بازم ممنون
        الانم زنگ میزنم آسیاتک بهشون میگم

        پاسخ
      5. حسن شفیعی ۲۵ اردیبهشت ۱۳۹۷

        خواهش میکنم . خوشحالم که مشکل رفع شد .

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

        پاسخ
  3. علی ۲۵ فروردین ۱۳۹۷

    سلام ببخشید شما چطور کد های اموزشی خودتون رو اینطور قرار میدید؟

    پاسخ
    1. حسن شفیعی ۲۵ فروردین ۱۳۹۷

      سلام. از پلاگین های code highlighter می توانید استفاده کنید.

      https://wpdean.com/best-wordpress-syntax-highlighter-plugins

      موفق باشید.

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

دانلود رایگان کتاب آموزش PHP

صفر تا صد PHP و MySQL را یکجا یاد بگیرید
همین الان دانلود کن
نگران نباشید. ایمیل‌های مزاحم نمی‌فرستیم
close-link