آموزش query string

query string چیست‌؟

query string یک فرمت قراردادی برای انتقال داده از طریق URL است.

یعنی بوسیله query string میتونیم اطلاعاتی رو از طریق آدرس صفحه ر مرورگر ارسال یا دریافت کنیم.

بوسیله query string میتونیم مقادیری رو به پارامترهای مورد نظرمون تخصیص بدیم.

query string چه کاربردی دارد؟

• ارسال کلیدواژه جستجو به سرور
• ارسال پارامتر های ورودی کاربر به سرور
• ایجاد صفحات جدید بدون نیاز به تغییر آدرس اصلی
• تبادل اطلاعات بین فرم های چند صفحه ای
• مدیریت وضعیت سبد خرید یا مراحل ثبت نام

ساختار query string

آدرس‌های حاوی Query String، بخش‌های مختلفی دارند:

• URL: این بخش شامل دامنه مورد نظر است. همچنین از اجزای دیگر آن می‌توان به پروتکل، زیردامنه و مسیر اشاره کرد که در نهایت یک URL را تشکیل می‌دهد.
• ?: ابتدای Query String با علامت سوال (?) مشخص می‌شود. محل استفاده این علامت پس از URL می‌باشد.
• نام پارامتر: در Query String پارامترهای مختلف را می‌بینیم که هر پارامتر یک نام و یک مقدار دارد. پس از علامت سوال، نام اولین پارامتر دیده می‌شود.
• =: برای تعریف مقدار یک پارامتر، از علامت مساوی (=) استفاده می‌شود. این علامت پس از نام هر پارامتر وجود دارد.
• مقدار پارامتر: هر پارامتر یک نام و یک مقدار دارد. پس از نام و علامت مساوی، مقدار پارامتر دیده می‌شود.
• &: برای جداسازی پارامترهای مختلف، از علامت & استفاده می‌شود. این علامت بین مقدار پارامتر قبلی و اسم پارامتر بعدی دیده می‌شود.

مزایای query string

• استفاده ساده
• سریع ترین روش انتقال اطلاعات بين صفحات
• عدم تحميل عمليات اضافه به سرويس دهنده و در نتیجه هزینه‌ی کم

معایب query string

• اطلاعات، محدود به رشته های ساده می‌باشد (فقط کاراکترهای مجاز)
• اطلاعات همواره به عنوان يك رشته بازيابی می گردند و در صورت نياز باید آن‌ها را به نوع داده مورد نظر تبديل كرد.
• اطلاعات توسط همه قابل مشاهده است. برای مواردی که لازم است اطلاعاتی بطور مخفی از يك صفحه به صفحه ديگر ارسال و يا بر روی آن حساسيت خاصی از نظر امنيتی وجود دارد، قابل استفاده نیست.
• كاربران می توانند محتويات Query String را تغيير داده و در بعضی موارد باعث ایجاد مشکل شوند.
• تعداد زيادی از مرورگرها دارای محدوديت برای طول يك URL می باشند. بنابراين، نمی توان حجم بالایی از اطلاعات را در Query String ذخيره كرد.

ارسال اطلاعات فرم از طریق query string

برای ارسال اطلاعات فرم دو روش وجود داره: متد get و متد post.

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

اگر فرم رو بوسیله متد get ارسال کنیم،‌اطلاعات داخل فرم به صورت نام-مقدار از طریق query string به صفحه مقصد ارسال میکنه.

یعنی از هر input فرم، اتریبیوت name اش رو بعنوان نام، و مقداری رو که کاربر داخل فرم پر میکنه رو بعنوان مقدار، توی query string می نویسه.

فرم زیر رو در نظر بگیرین:

        <form action="/weather" method="get">
            <input type="text" name="address" placeholder="City Name" class="form-control" required >
            <input type="text" name="number" placeholder="Number" class="form-control" >
            <input type="submit" value="submit">
        </form>

ارسال این فرم (که در اینجا به صفحه weather ارسال میشود) منجر به ارسال یک کوئری استرینگ به صورت زیر میشود:

https://javafarsi.com/weather?address=tehran&number=12345678

در صفحه مقصد، اطلاعات query string دریافت و پردازش میشه. مثلا در express.js بوسیله متد req.query به اطلاعات کوئری استرینگ (بصورت یک آبجکت جاوااسکریپت) دسترسی خواهیم داشت. این مورد رو توی آموزش express.js به صورت کامل براتون توضیح دادم.