آموزش JSON برای ارسال و دریافت اطلاعات

سلام به همه ی دوستان گرامی. این پست رو با توجه به درخواست هایی که علاقمندان برای یادگیری بهتر json دادند میزارم. در این پست قصد داریم یک فرم جستجو ایجکس با استفاده از جی سان  (ajax search form using json) بسازیم که درون اون یک input وجود داره و متنی که شما تایپ میکنید رو به صورت json به سرور ارسال میکنه و پاسخ رو از سرور به صورت json دریافت میکنه و نمایش میده 😀 این یک نمونه مثال ساده ولی کامل از نحوه ی استفاده از json و ajax رو به شما نشون میده , پیش نمایش این اموزش رو میتونید از اینجا(کلیک کنید) ببینید , برای تست کردن کافیه که یکی از نام های mahdi یا mohammad یا sara رو تایپ کنید و نتیجه رو ببینید. دوستان عزیز کافیه درون input که در صفحه قرار داره تایپ کنید. من حوصله نداشتم خوشکلش کنم ولی شما میتونید یه مقدار Css اظافه کنید و زیباسازی کنیدش برا خودتون. همچین چیزی رو گوگل از سالها پیش برای قسمت جستجوی خودش استفاده میکنه.

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

برای ساختن فرم جستجوی خودمون مراحل زیر رو طی میکنیم:

  1. ساختن ساختار html صفحه ی خودمون
  2. نوشتن قسمت php خودمون برای دریافت متن تایپ شده در input و ارسال اطلاعات به ان
  3. نوشتن اندکی جاوا اسکریپت برای ارسال اطلاعات هنگام تایپ کردن به صورت json و نمایش داده های دریافت شده.

مرحله اول : ساختن ساختار HTML صفحه

ساختار صفحه ی ما یک ساختار html5 به همراه یک input درون اون خواهد بود! صفحه رو خیلی ساده طراحی میکنیم به صورت زیر :

در دستورات بالا یک input و یک div درون صفحه خودمون قرار میدیم. دقت کنید که تگ div رو برای نمایش اطلاعات خودمون قرار میدیم , اطلاعاتی که از سرور دریافت میشه درون این تگ نمایش داده خواهد شد. و تگ input رو نیز برای دریافت اطلاعات از کاربر قرار میدیم تا کاربر بتونه متن مورد نظر خودشو تایپ کنه و جستجو بر اساس متن تایپ شده انجام بشه 😀

مرحله دوم : نوشتن قسمت PHP برای دریافت متن تایپ شده در input و ارسال اطلاعات به صفحه

ما میخوایم که متنی که درون input تایپ میشه رو به صورت متد POST و از طریق ajax به فایل php خودمون ارسال کنیم , داده هایی که ارسال میشن به صورت json خواهند بود , همونطور که در اموزش قبلی از سری اموزش های json گفتیم میشه با متد json_decode داده های دریافت شده به صورت json رو به ارایه تبدیل کرد و ازش استفاده کرد. همچنین با استفاده از دستور json_encode عکس این کار انجام میشه , یعنی داده های ارایه ای به صورت ساختار متنی json در میان. حالا با توجه به نکات گفته شده فایل php خودمون رو میسازیم :

در دستورات بالا چون من نمیخوام خودمو درگیر دیتابیس کنم , داده های خودمو درون یه ارایه قرار دادم. ما متنی که کاربر تایپ میکنه رو دریافت میکنیم و بررسی میکنیم اگه متن تایپ شده برابر با یکی از کلید (key) های ارایه خودمون بود (our_data) میایم و اطلاعات مربوط به اون کلید رو تبدیل به json میکنیم و توی صفحه Echo میکنیم تا توسط ajax دریافت بشه 😀 اگه متنی که تایپ شده بود با هیچکدوم از کلید های ارایه ما مطابقت نداشت توی صفحه یک متنی رو echo میکنیم و میگیم که چنین اطلاعاتی وجود نداره.

مرحله سوم : گرفتن متن تایپ شده از درون input و ارسال ان به سرور و سپس دریافت پاسخ سرور و نمایش ان به کاربر

خب دوستان عزیز در مرحله ی اخر ما یک eventListener برای input تنظیم میکنیم که وقتی کاربر هر کدوم از دکمه های صفحه کلید رو فشار داد فعال میشه و مقدار درون input رو میخونه و به صورت json در میاره و با ajax برای سرور ارسال میکنه! بعدش پاسخ سرور رو دریافت میکنه و نمایش میده.

در دستورات بالا ما داده هایی که از سرور دریافت میکنیم رو با استفاده از دستور JSON.parse به ارایه تبدیل میکنیم تا بتونیم ازشون استفاده کنیم همچنین عکس این کار رو با دستور JSON.stringify برای تبدیل ارایه یا اشیا به json انجام میدیم. من دستور JSON.parse رو درون یک قسمت try catch گذاشتم تا اگه داده ای که از سرور دریافت میشه به صورت ساختار json نباشه و خطا ایجاد بشه بتونم داده ی دریافت شده رو درون قسمت catch مدیریت کنم. دوستان عزیز میتونید پیش نمایش چیزی که ساختیم رو از اینجا (کلیک کنید) ببینید , کافیه که یکی از نام های mahdi یا  mohammad یا sara رو تایپ کنید و ببینید چه اتفاقی میوفته 😀 همچنین سورس کد این اموزش رو میتونید از انتهای همین پست دانلود کنید.

دوستانی که سوال یا مشکلی دارند میتونن از انتهای همین پست مطرح کنند تا پاسخ بدم. موفق باشید.

فرم جستجوی ajax با استفاده از json
فرم جستجوی ajax با استفاده از json
json-ajax-search-form.zip
Version: 1.0
1.5 KiB
80 Downloads
اطلاعات بیشتر
به اشتراک بگذارید:Email this to someoneShare on FacebookTweet about this on TwitterShare on Google+Digg thisShare on LinkedInPin on PinterestShare on StumbleUponFlattr the authorShare on RedditBuffer this pageShare on TumblrPrint this pageShare on YummlyShare on VK
    • تفاوتی نداره, استفاده از jquery باعث سرعت در کار میشه , وقتی که از javascript خام استفاده میکنید باید یک سری اصول در مورد نحوه ی پشتیبانی مرورگرها از دستورات رو نیز بدونید چون بعضی دستورات در همه ی مرورگر ها اجرا نمیشه! مثلا addEventListener و addEvent که هردو کار یکسانی انجام میدن و در اینجا استاندارد IE متفاوت عمل کرده! اگه نمیخواید خودتون رو درگیر مسائل پشتیبانی شدن دستورات کنید میتونید از jsquery استفاده کنید و خیالتون راحت باشه که همه ی دستورات اجرا خواهند شد 😀 اما به شخصه من جاوا اسکریپت خام رو ترجیح میدم! شاید به خاطر این هست که دوسدارم بیشتر یاد بگیرم!

  1. میلاد

    سلام ممنون خیلی عالی و کاربردی بود مثل همیشه سایتتون خیلی عالیه

  2. سلام وقت بخیر مطلب جالب کاربردی بود
    ببخشید بنده همین امکان رو میخام ولی با اطلاعات داخل دیتابیس
    میشه کد کامل برام ایمیل کنین ؟

    • سلام دوست عزیز در اینجا از دیتابیس استفاده نشده! من خودم یه سری اطلاعات توی یه متغیر قرار دادم و همونا رو نشون میدم! اما شما می تونید قسمت دیتابیس رو طراحی کنید و به این کد متصل کنید. سورس کد اسکریپتی که در این اموزش به صورت مثال قرار داده شده است رو می تونید از انتهای پست دانلود کنید 😀 موفق باشید.

  3. تشکر بله میدونم ولی همین اتصال میخام
    میخام اطلاعات از دیتابیس بخونه
    میه برام کدش رو بنیوسید ؟

    • سلام دوست عزیز متاسفانه من یکم برج ۴ (تیر) دارم به خدمت سربازی میرم و فرصت برای برنامه نویسی ندارم! موفق باشید.

  4. سلام
    من اطلاعات رو از یک صحفه میگیرم و داخل یک فایل به اسم test.json ذخیره میکنم
    حالا میخوام از اون فایل اطلاعات بگیرم و نمایش بدم
    محتویات اینه
    “admin”: {
    “۱”: {
    “name”: “admin_name1”,
    “link”: “member.php?…”
    }
    },
    “admin2”: {
    “۱۴۴”: {
    “name”: “admin_name2”,
    “link”: “member.php?…”
    },
    “۲۶۸”: {
    “name”: “admin_name3”,
    “link”: “member.php?…”
    }
    },

    من میخوام توسط php مقدار name رو نمایش بدم در صحفه ام
    خیلی ممنون ازتون <3

    • مقداری که توسط json میگیرید رو ابتدا با json_decode به ارایه تبدیل کنید حالا کافیه با ارایه ها کار کنید! میتونید ارایه رو به صورت value[1][‘name’] توی صفحه Echo کنید! اگه نمیدونید ساختار ارایه ی خروجی چجوریه از دستور print_r استفاده کنید تا متوجه بشید.
      موفق باشید.

می‌خواهید دیدگاهتان را بیان کنید؟