دریافت اطلاعات از یک صفحه دیگر، بر اساس تکنیک AJAX ، با ارسال اطلاعات به صفحه به صورت GET ، با روش get ، در jQuery
قبلاً در کلید شماره 3452 و کلید شماره 3453 و کلید شماره 3454 ، تکنیک AJAX در زبان برنامه نویسی JavaScript را شرح دادیم و بیان کردیم بر اساس ارسال اطلاعات به صفحه به صورت GET یا POST می‌توانیم پاسخ خروجی صفحه را دریافت نماییم و در صفحه فعلی از آن استفاده کرده یا آن را نمایش دهیم.
با توجه به اینکه jQuery بر اساس توسعه زبان برنامه نویسی JavaScript می باشد، بنابراین تکنیک AJAX در آن نیز قابل استفاده است، اما شیوه کدنویسی آن کمی متفاوت خواهد بود.
در ادامه چگونگی اجرای تکنیک AJAX در jQuery بر ارسال اطلاعات به صفحه به صورت GET و با روش get را در یک مثال شرح خواهیم داد.
چگونگی اجرای تکنیک AJAX بر اساس ارسال اطلاعات به صفحه به صورت POST و با روش post را نیز در کلیدی دیگر آموزش می دهیم ( کلید شماره 26302 ).
روش get در jQuery ، در واقع همان روش ajax در jQuery است که به صورت زیر به کار رفته باشد :
به مثال زیر توجه کنید :
در کنار صفحه فعلی (index.html)، یک صفحه PHP با نام kelidestan.php می سازیم (هر دو در یک پوشه) :
و کدهای PHP زیر را در آن می نویسیم :
که در آن، دو مقدار که با نام های name و city و به صورت GET به صفحه ارسال شده را دریافت کرده و سپس آنها را به همراه یک متن، در خروجی چاپ می کند.
در کد بالا، نکات امنیتی مربوط به دریافت مقادیر در صفحه از طریق GET را به کار نبرده ایم (برای عدم شلوغ شدن کدها)، بنابراین هنگام درج کدها در وب سایت خود، باید موارد امنیتی را نیز به آنها اضافه نمایید (مثلا ساخت یک تابع با نام Clean برای اعمال موارد امنیتی به مقادیر دریافت شده توسط POST و GET در صفحات وب سایت).
چون صفحه دارای پسوند php است، بنابراین برای اجرای آن بر روی کامپیوتر شخصی، نیاز به یک نرم افزار شبیه ساز سرور مثل Wamp Server ( کلید شماره 367 ) می باشد. بعد از اجرای نرم افزار شبیه ساز سرور، باید خود صفحه فعلی (index.html) نیز توسط نرم افزار شبیه ساز سرور اجرا شود (اگرچه یک صفحه html است، اما چون در آن از تکنیک AJAX برای دریافت اطلاعات از یک صفحه PHP استفاده می شود، حتما باید توسط نرم افزار شبیه ساز سرور اجرا شود و نباید آن را به شکل معمولی در ویندوز باز کنید).
بنابراین هنگام اجرا در کامپیوتر شخصی، در مرورگر اینتزنت خود چک کنید که در ابتدای آدرس مربوط به اجرای فایل index.html ، حتما عبارت localhost وجود داشته باشد (نشان دهنده اجرا شدن آن توسط نرم افزار شبیه ساز سرور). به عنوان مثال :
سپس کدهای صفحه فعلی (index.html) را به صورت زیر می نویسیم که در آن، با کلیک بر روی یک دکمه (Button)، دو مقدار با نام های name و city و به صورت GET ، با استفاده از روش get به صفحه kelidestan.php ارسال شده و سپس نتیجه را دریافت کرده و در صفحه فعلی (index.html) نمایش می دهیم (کل این فرآیند بر اساس تکنیک AJAX می باشد) :
بنابراین تعیین کرده ایم که با کلیک بر روی دکمه (Button) با id برابر kelidestan_button ، کدهای زیر اجرا شوند ( کلید شماره 2787 ) :
که در آن، با روش get ، دو مقدار با نام های name و city را به صفحه kelidestan.php (صفحه دوم) ارسال کرده ایم و سپس پاسخ صفحه دوم (متغیر data) و همچنین وضعیت (متغیر status) (وضعیت موفقیت آمیز بودن یا نبودن دریافت خروجی از صفحه دوم) را در بخشی از صفحه فعلی (تگ p با id برابر kelidestan_output از صفحه index.html) نمایش داده ایم.
آدرس صفحه دوم (kelidestan.php) را در خط زیر از کدها مشخص کرده ایم (آدرس نسبی صفحه دوم، نسبت به صفحه فعلی) :
و مقدار مورد نظرمان برای name و city را در بخش زیر از کدها مشخص کرده ایم (دو مقدار Ali و Shiraz) :
و در آخر، نمایش پاسخ صفحه دوم (متغیر data) و همچنین وضعیت (متغیر status)، در بخشی از صفحه فعلی (تگ p با id برابر kelidestan_output) (پس از دریافت پاسخ از صفحه kelidestan.php) را با کدهای زیر اجرا نموده ایم :
در کد بالا، innerHTML برای تغییر محتوای درون یک عنصر (تگ p با id برابر kelidestan_output) به کار رفته است.
نتیجه :
بر روی دکمه (Button) کلیک نمایید :
