• بيت
  •  > 
  • أمان
  •  > 
  • Js كيفية قراءة طلب الحصول على معين. معلمات السلسلة (GET) في Javascript

Js كيفية قراءة طلب الحصول على معين. معلمات السلسلة (GET) في Javascript

في كل موقع تقريبًا، يمكنك رؤية روابط تحتوي على معلمات بعد علامة "؟"، على سبيل المثال، http://some.site.com/?id=1. عادةً ما يعالج البرنامج النصي للخادم معالجة هذه المعلمات، ولكن في بعض الأحيان تكون هناك حاجة لمعرفة هذه المعلمات داخل JavaScript. ستخبرك قصة اليوم بكيفية القيام بذلك.

ما هي ما يسمى معلمات GET؟ في الواقع، هذه مجرد سلسلة عنوان، ولكن من المعتاد أنه إذا تم العثور على حرف "؟" في عنوان URL، فإن جميع الأحرف التي تليها هي معلمات. تفسير المعلمات هو المعيار: أولاً يأتي اسم المتغير، ثم الرمز "="، ثم قيمة المتغير، ويتم فصل المتغيرات بالرمز "&". يمكنك معرفة العنوان الحالي في JavaScript من خلال قراءة قيمة window.location. تحليل السطر بعد "؟" سيتعين عليك القيام بذلك في مرحلتين: أولاً قم بتقسيمها إلى مجموعات "المتغير = القيمة"، ثم قم بتقسيمها إلى الأجزاء المكونة لها.

أصبح تقسيم سلسلة المعلمات أسهل من خلال حقيقة أن JavaScript لديها وظيفة سلسلة خاصة - Split()، وستكون النتيجة عبارة عن مصفوفة من السلاسل. من أجل استخدامه، تحتاج أولاً إلى إنشاء كائن سلسلة، منذ ذلك الحين هذه الوظيفةهي طريقة لهذا الكائن. ويتم ذلك ببساطة:

someVar = new String("some text");

ثم نقوم بتقسيم السلسلة إلى سلاسل فرعية:

someArray = someVar.split("x");

حيث "x" هو الرمز لتقسيم السلسلة إلى سلاسل فرعية. من أجل العثور على حرف في سلسلة، تحتاج إلى استخدام آخر وظيفة السلسلة- دليل ل():

someVar.indexOf("؟");

مقدمة النظرية كاملة. لنبدأ بالتدرب. قررت أنه يجب تخزين جميع متغيرات GET في قسمين منفصلين المصفوفات العالمية: أحدهما يخزن الأسماء والآخر يخزن القيم. لسوء الحظ، جافا سكريبت غير مدعوم المصفوفات الترابطية، لذلك دعونا نستخدم الطريقة التي أشرت إليها. من الضروري أيضًا حفظ عدد متغيرات GET. بالطبع، يمكنك دائمًا استدعاء الوظيفة لحساب حجم المصفوفة، ولكن طريقتي أفضل من الناحية الأسلوبية. وهكذا، المتغيرات والمصفوفات العالمية:

var_GET_Keys; // مصفوفة فارغة حاليًا var _GET_Values; var_GET_Count = 0; // لا توجد عناصر بعد var _GET_Default = ""

سيتم شرح معنى المتغير _GET_Default لاحقًا. بعد ذلك، سأقوم بإنشاء دالة get_parseGET()‎ التي ستقوم بتحليل عناوين URL وإنشاء صفائف تحتوي على متغيرات. في البداية، تقوم الدالة بإنشاء كائن سلسلة والتحقق من وجود الحرف "؟" فيه:

ل = الحصول على الطول؛ get = get.substr(x+1, l-x);

الآن نقوم بتقسيم السطر إلى مجموعات "المتغير = القيمة"، ونحسب العدد الإجمالي للمتغيرات ونستعد لإنشاء المصفوفات الضرورية:

l = get.split("&"); س = 0; _GET_Count = l.length; _GET_Keys = new Array(_GET_Count); _GET_Values ​​​​= new Array(_GET_Count);

وأخيرًا، نقسم المجموعات الناتجة إلى مصفوفتين بأسماء المتغيرات وقيمها:

for(i in l) ( get = l[i].split("="); _GET_Keys[x] = get; _GET_Values[x] = get; x++; )

في في هذا المثاليتم استخدام for .. في البناء، والذي يتكرر عبر جميع عناصر المصفوفة. بناء جملة هذا البناء هو:

لـ (المفتاح في المصفوفة) (/ أفعالك)

حيث المفتاح هو اسم المفتاح الذي سيتم الاختيار منه مجموعة مصفوفة. في نص الحلقة، يمكن الوصول إلى العنصر الحالي عن طريق المصفوفة.

الوظيفة الثانية من المكتبة، get_fetchVar(key)، تسمح لك بمعرفة قيمة متغير GET معين. إنه يعمل ببساطة عن طريق التكرار عبر مجموعة _GET_Keys. إذا لم يتم العثور على المفتاح، فإنه يقوم بإرجاع القيمة _GET_Default المذكورة أعلاه. أود أن أشير إلى أنه ليس من الضروري تغيير القيمة _GET_Default في المكتبة نفسها - إذا لزم الأمر، يمكن القيام بذلك في كود HTML الخاص بك:

_GET_Default="tra la la";

في نهاية البرنامج النصي يوجد استدعاء لـ get_parseGET(); وهذا هو المكان الذي تنتهي فيه المكتبة.

جيد سيئ

    في كل موقع تقريبًا، يمكنك رؤية روابط تحتوي على معلمات بعد علامة "؟"، على سبيل المثال، http://some.site.com/?id=1. عادةً ما تتم معالجة هذه المعلمات...

    هناك عدة طرق لإزالة عنصر صفيف في JavaScript. وتشمل هذه أساليب البوب ​​والتحول. تقوم طريقة pop بإزالة العنصر الأول من مجموعة معينة. طريقة التحوليحذف...

سأخبرك الآن كيف يمكننا، باستخدام js، معالجة عنوان URL في المتصفح بسهولة وبساطة دون إعادة تحميل الصفحة. للقيام بذلك سوف نستخدم الوظيفة التالية: History.pushState(). يجدر الانتباه إلى حقيقة أنه يعمل فقط مع المتصفحات المدعومة بـ html5! يحتوي على 3 معلمات لا يمكننا تمرير أي شيء فيها بشكل أساسي، أي:

History.pushState(""،"،"")؛

في الطريقة الأولى نمرر حالة الكائن. والثاني ليس أكثر من الاسم (بالمناسبة، اليوم يتم تجاهله...). والمعلمة الثالثة هي عنوان URL نفسه.

في هذه المقالة سننظر في الثالث فقط.

في معلمة URL، نحتاج ببساطة إلى تمرير سلسلة سيتم استبدالها في عنوان URL من جذر الموقع.

دعونا نضيف عنوان URL

من المحتمل أن يكون عنوان URL نفسه هو الأبسط: http://localhost/

var newUrl = "/catalog/?login=myLogin&page=phone"; History.pushState(""، ""، newUrl);

بعد تشغيل هذا البرنامج النصي سترى في شريط العنوان: localhost/catalog/?login=myLogin&page=phone

لكن كن حذرا. منذ أن تغير عنوان URL الخاص بنا. ثم عند النقر فوق تحديث الصفحة، سيحاول المتصفح الانتقال إلى عنوان URL الجديد. وإذا كان موقعك لا يحتوي على قسم /catalog/، فسوف ترى خطأ 404.

دعونا نغير عنوان URL الحالي

سيتم وضع المثال الثاني هنا: localhost/catalog/samsung/?login=myLogin&page=phone

var arUrl = window.location.pathname.split("/"); var newUrl = "/bazar/"+arUrl+"/"+window.location.search; History.pushState(""، ""، newUrl)؛

السطر 1: احصل على المسار المتعلق بالمضيف واستخدم التقسيم لتقسيمه إلى مصفوفة
السطر الثاني: نقوم بإنشاء عنوان URL جديد يتكون من كلمة "bazar" + المفتاح الثاني لمصفوفتنا، والذي يحتوي على كلمة samsung، وفي النهاية أضفنا get الخاص بنا
السطر 3: في الواقع الاستبدال نفسه.

بعد تنفيذ هذا البرنامج النصي، ستشاهد في شريط العناوين: localhost/bazar/samsung/?login=myLogin&page=phone

تغيير معلمات GET

دعونا ننظر إلى نفس المثال.

var arUrl = window.location.search.split("&"); arUrl = arUrl.slice(1); فار آر=; $.each(arUrl,function(i,elem)( arr[i] = elem.split("="); )); var newUrl = arr+"="+arr+"&"+arr+"="+arr; newUrl = window.location.pathname+"؟"+newUrl; History.pushState(""، ""، newUrl)؛

بالطبع هذا البرنامج النصيهو مظاهرة وربما أبسط. بعد تنفيذه، سيتم تبديل القيم الموجودة في شريط عنوان المتصفح الحصول على المعلمات. ?login=myLogin&page=phone سيتم تغييره إلى ?login=phone&page=myLogin. حسنا، الآن، بالترتيب.

  • السطر: نحصل على مجموعة من معلمات GET المقسمة باستخدام الرمز &
  • السطر: نظرًا لأن window.location.searche يُرجع المعلمات مع الفاصل - ?، فإننا نقوم بإزالته.
  • السطر: إنشاء مصفوفة
  • الخط: دعونا نذهب من خلال مجموعة لدينا
  • السطر: قسمة قيمة المفاتيح.
  • الخط: جمع خط جديدمع المعلمات.
    بالتأكيد هذه المادهكان من الممكن القيام بذلك بشكل مختلف، ولكن في إطار الدرس سنفعل ذلك بأبسط طريقة.
  • السطر: جمع عنوان URL جديد
  • سطر استبدال عنوان url

    • بعد تنفيذ البرنامج النصي، عنوان URL القديم الخاص بنا: localhost/catalog/samsung/?login=myLogin&page=phone
    سيتم استبداله بآخر جديد: localhost/catalog/samsung/?login=phone&page=myLogin

    في الواقع، هذا كل ما أردت أن أخبرك به اليوم. اترك تعليقاتك ولا تنسى مشاركة هذا المنشور على الشبكات الاجتماعية.

    موارد الويب الحديثة لا توفر المعلومات للزائر فحسب، بل تتفاعل معه أيضًا. للتفاعل مع المستخدم، تحتاج إلى الحصول على بعض المعلومات منه. هناك عدة طرق لاسترداد البيانات، والطرق الشائعة جدًا هي GET وPOST. وبناءً على ذلك، تدعم PHP طرق نقل البيانات هذه GET وPOST. دعونا نرى كيف تعمل هذه الأساليب.
    يتم نقل بيانات طريقة GET باستخدام طريقة GET عن طريق إلحاقها بعنوان URL الخاص بالبرنامج النصي الذي تم استدعاؤه لمعالجة المعلومات المستلمة. للتوضيح هذه الطريقةاكتب عنوان URL للمورد في شريط عنوان المتصفح وأضف أولاً علامة استفهام (؟) ثم السطر num=10. على سبيل المثال

    http://domain.ru/script.php?num=10


    اذا كنت تمتلك الملقم المحليفعادة ما يكون المجال هو المضيف المحلي ثم سيبدو الإدخال السابق

    http://localhost/script.php?num=10


    في هذه الحالة نقوم بتمرير المعلمة num التي تساوي 10. للإضافة المعلمات التاليةيحتاج البرنامج النصي إلى استخدام محدد علامة الضم (&)، على سبيل المثال

    http://domain.ru/script.php?num=10&type=new&v=text


    في في هذه الحالةمررنا ثلاث معلمات إلى البرنامج النصي: num بالقيمة 10، والنوع بالقيمة "new" وv بالقيمة "text".
    للحصول على هذه المعلمات في البرنامج النصي، تحتاج إلى استخدام المصفوفة المضمنة $_GET $_GET["num"], $_GET["type"],$_GET["v"] . ستحتوي عناصر المصفوفة هذه على قيم المعلمات التي تم تمريرها. لتوضيح هذا المثال، قم بإنشاء ملف script.php بالمحتويات التالية



    فحص الحصول على الطريقةفي PHP





    والآن اتصل بهذا الملف في المتصفح

    http://path/script.php?num=10&type=new&v=text


    وسترى المعلمات التي تم تمريرها في نافذة المتصفح. ولكن إذا قمت باستدعاء هذا الملف بدون معلمات إضافية http://path/script.php، سترى الأخطاء التي سيقدمها مترجم PHPأنه لا توجد مثل هذه العناصر في المصفوفة $_GET. من الممكن تخصيص أكثر من مقال للتحقق من البيانات الواردة من المستخدم، لذلك لن أتطرق في هذا المقال لهذه النقطة.
    كما تفهم، فإن إجبار المستخدم على كتابة البيانات في شريط عنوان المتصفح ليس جيدًا جدًا وغير مريح تمامًا. ولذلك، لتلقي البيانات من المستخدم تحتاج إلى استخدام نماذج HTML. دعونا نكتب نموذج HTML بسيط.


    أدخل الرقم

    هل لديك جهاز كمبيوتر؟
    نعم
    لا


    تعليقك:





    اسمحوا لي أن أعلق قليلا على النموذج الذي تم إنشاؤه. يتم إنشاء النماذج باستخدام علامة النموذج. يتم إنشاء حقول النموذج باستخدام علامات الإدخال والتحديد ومنطقة النص (يمكنك قراءة المزيد). في علامة النموذج، تحدد سمة الإجراء عنوان URL للبرنامج النصي الذي سيتلقى بيانات النموذج. في حالتنا، قمنا بتحديد ملف script.php الموجود لدينا. تحدد سمة الطريقة طريقة إرسال البيانات. لقد حددنا طريقة GET. الآن عرفنا إلى أي ملف سيتم نقل بيانات النموذج، وبأي طريقة، كل ما تبقى هو معرفة أين نبحث عنها؟!
    سيتم تمرير بيانات النموذج هذه إلى مورد الويب بواسطة المتصفح عن طريق إلحاقها بعنوان URL: أولاً ستكون هناك علامة استفهام (؟)، ثم سيتم عرض المعلمات مفصولة بعلامة العطف (&). سيتم أخذ اسم المعلمة من سمة الاسم، والتي يجب تحديدها لأي حقل نموذج. تعتمد قيمة المعلمة على نوع الحقل. إذا كان الحقل عبارة عن حقل نصي، فستكون القيمة هي النص الذي أدخله المستخدم. إذا كان الحقل عبارة عن قائمة أو مجموعة من أزرار الاختيار أو خانات الاختيار، فستكون قيمة المعلمة هي قيمة سمة القيمة للعنصر المحدد. اسمحوا لي أن أشرح استخدام نموذجنا كمثال. إذا أدخل المستخدم الرقم 10 في حقل الإدخال، فسيكون اسم المعلمة num (قيمة سمة الاسم لعلامة الإدخال) وستكون القيمة 10 (الرقم الذي أدخله المستخدم). وبناءً على ذلك، سيقوم المتصفح بإنشاء زوج "num=10". إذا اختار المستخدم "نعم" من القائمة، فسيكون اسم المعلمة من النوع (قيمة سمة الاسم حدد العلامة)، وستكون القيمة نعم (قيمة سمة القيمة لعلامة الخيار). وفقًا لذلك، سيقوم المتصفح بإنشاء زوج "type=yes".
    الآن سوف نقوم بوضع هذا النموذج على صفحة forma.php.



    نموذج لنقل البيانات باستخدام أساليب GET وPHP



    أدخل الرقم

    هل لديك جهاز كمبيوتر؟
    نعم
    لا


    تعليقك:







    أدخل أي قيم في حقول النموذج وانقر على زر "إرسال". بعد الضغط على الزر، سيفتح المتصفح صفحة أخرى (script.php) وسيتم عرض البيانات التي أدخلتها في نافذة المتصفح. أعتقد أن السبب واضح: سيقوم المتصفح بتمرير البيانات إلى البرنامج النصي script.php، وفي البرنامج النصي ستتم معالجة هذه البيانات وعرضها على الشاشة.
    طريقة POST الآن دعونا نلقي نظرة على كيفية عمل طريقة POST.
    لإرسال البيانات باستخدام طريقة POST، تحتاج إلى استخدام نماذج HTML. كما نتذكر، فإن سمة الطريقة لعلامة النموذج هي المسؤولة عن طريقة إرسال بيانات النموذج. لذلك، تحتاج إلى تحديد القيمة POST في سمة الطريقة لعلامة النموذج. وبخلاف ذلك، يمكن أن يكون النموذج هو نفسه الموجود في أسلوب GET. دعونا نغير النموذج الذي استخدمناه بالفعل لإرسال البيانات باستخدام طريقة GET، إلى الإرسال باستخدام طريقة POST.


    أدخل الرقم

    هل لديك جهاز كمبيوتر؟
    نعم
    لا


    تعليقك:





    كما ترون، يظل النموذج كما هو باستثناء سمات الطريقة والإجراء. سيتم الآن تمرير البيانات إلى البرنامج النصي script_post.php. لنضع نموذجنا على صفحة forma_post.php.



    نموذج لنقل البيانات باستخدام طرق POST وPHP



    أدخل الرقم

    هل لديك جهاز كمبيوتر؟
    نعم
    لا


    تعليقك:







    نحن الآن بحاجة إلى كتابة برنامج نصي لمعالجة بيانات النموذج الخاصة بنا.
    لتلقي البيانات من طريقة POST في برنامج نصي، تحتاج إلى استخدام المصفوفة $_POST المضمنة. ستكون مفاتيح هذه المصفوفة هي أسماء المعلمات. في حالتنا، نحتاج إلى استخدام $_POST["num"], $_POST["type"],$_POST["v"] . ستحتوي عناصر المصفوفة هذه على قيم البيانات المنقولة. كما ترون، يتم التعبير عن الفرق بين استخدام أسلوب GET فقط في استخدام المصفوفة $_POST. لذلك لن يكون من الصعب علينا كتابة ملف script_post.php:



    التحقق من صحة طريقة POST في PHP





    الآن افتح الملف forma_post.php في متصفحك. أدخل بعض البيانات في حقول النموذج وانقر على زر "إرسال". ربما لاحظت الآن الفرق بين طريقة POST وطريقة GET - حيث لم تظهر بيانات النموذج في شريط عنوان المتصفح. لا يمكن إرسال البيانات باستخدام طريقة POST من خلال شريط عنوان المتصفح. وهذا فرق كبير يجب تذكره.
    في PHP، بغض النظر عن كيفية إرسال البيانات - طريقة POST أو طريقة GET - يمكنك الحصول على البيانات باستخدام مصفوفة $_REQUEST مقارنة بين طريقتي GET وPOST. عند استخدام طريقة GET، يتم نقل البيانات عن طريق إلحاقها بـ عنوان URL. وبالتالي، ستكون مرئية للمستخدم، وهو أمر ليس جيدًا دائمًا من الناحية الأمنية. كما سيعتمد الحد الأقصى لمقدار البيانات المنقولة على المتصفح - على الحد الأقصى المسموح به لعدد الأحرف في شريط عنوان المتصفح.
    عند استخدام طريقة POST، لن تكون البيانات مرئية للمستخدم (لا يتم عرضها في شريط عنوان المتصفح). وبالتالي فهي أكثر أمانًا، وبالتالي فإن البرنامج الذي يعالج هذه البيانات يكون أكثر حماية من حيث الأمان. كما أن حجم البيانات المرسلة غير محدود عمليا.
    عند اختيار طريقة نقل البيانات، عليك أن تأخذ في الاعتبار الميزات المذكورة أعلاه واختيار الطريقة الأنسب.