คำนำ
ก่อนอื่นเราจำเป็นต้องรู้ว่าการค้นหาคืออะไร การค้นหาเป็นคุณสมบัติของ Window.location ตัวอย่างเช่น:
ก่อนอื่นเรามี URL ที่นี่ซึ่งก็คือ http://www.a.com/list/2.html?page=2&color=4&size=3#pic
เมื่อเราเข้าถึงที่อยู่นี้ให้เปิดคอนโซลป้อน window.location และเราจะได้รับผลลัพธ์ในรูปต่อไปนี้
ดังที่ได้กล่าวไว้ข้างต้นสิ่งที่เราต้องการใช้งานคือส่วนหนึ่งของกล่องในภาพด้านบน
ทำไมคุณต้องใช้งานนี้?
ตัวอย่างเช่นหากฉันต้องการข้ามไปยังหน้าสามในหน้าสองฉันต้องอัปเดตหน้าด้านบน = 2 เป็นหน้า = 3 และตรวจสอบให้แน่ใจว่าพารามิเตอร์อื่น ๆ จะถูกเก็บไว้
หรือไม่มีผลการค้นหาในตอนแรก (เช่นหน้าแรกของรายการทั่วไปไม่มีอะไร) แต่ตอนนี้ฉันต้องเพิ่มหน้า = 2
ต่อไปฉันต้องรู้ว่าตอนนี้ฉันอยู่หน้าไหนแล้วนั่นคือฉันต้องได้รับค่าของหน้า
ดังนั้นจำเป็นต้องค้นหา ตอนนี้เราถูกแยกออกจากด้านหน้าและด้านหลังการค้นหาเป็นวิธีที่สำคัญมากสำหรับการกำหนดค่าพารามิเตอร์
วิธีการก่อสร้าง
รับค่าพารามิเตอร์ที่ระบุในการค้นหา
ใช้ Baidu แล้วเราพบวิธีการดังต่อไปนี้:
ฟังก์ชั่น getQueryString (ชื่อ) {var reg = ใหม่ regexp ("(^| &)" + ชื่อ + "= ([^&]*) (& | $)"); var r = window.location.search.substr (1). -match (reg); if (r! = null) คืนค่า null;}แหล่งที่มาของวิธี: วิธีการรับพารามิเตอร์แถบที่อยู่โดยใช้ JS
วิธีการทำงานเต็มรูปแบบ
ตอนแรกฉันต้องการเขียนแนวคิดการใช้งาน แต่ฉันจำไม่ได้สักพักดังนั้นฉันจึงมอบวิธีสุดท้ายให้กับวิธีสุดท้าย:
ฟังก์ชั่น funcurl (ชื่อ, ค่า, ประเภท) {var loca = window.location; var baseUrl = type == undefined? loca.origin + loca.pathname + "?" : ""; var query = loca.search.substr (1); // หากไม่มีการส่งพารามิเตอร์ค่าการค้นหาส่งคืนไม่มีเครื่องหมายคำถามถ้า (ชื่อ == ไม่ได้กำหนด) {return query} // หากไม่มีการส่งค่าให้ส่งคืนค่าของพารามิเตอร์ +"= ([^&]*) (& | $)")); return val! = null? Unsescape (val [2]): null;}; var url; if (query == "") {// ถ้าไม่มีค่าการค้นหาให้ส่งคืน urlurl ด้วยพารามิเตอร์ที่ผนวกเข้า = baseUrl + name + "=" + value;} อื่น {// หากไม่มีค่าการค้นหา query.split ("&"); สำหรับ (var i = 0; i <arr.length; i ++) {arr [i] = arr [i] .split ("="); obj [arr [i] [0]] = arr [i] [1]; json.stringify (obj). reflace (/[/"/{/}]/g," "). แทนที่ (//:/g," = "). แทนที่ (//,/g," & ");}; return url;}วิธีใช้
funcurl () ได้รับค่าการค้นหาทั้งหมด (ไม่รวมเครื่องหมายคำถาม)
Funcurl (ชื่อ) ส่งคืนค่าของชื่อใน URL (รวมย่อหน้าก่อนหน้าของวิธีการของคนอื่น)
funcurl (ชื่อ, ค่า) ตั้งค่าของชื่อในการค้นหาเป็นค่าและส่งคืน URL เต็มรูปแบบ
ส่งคืนเนื้อหาเช่น http://www.a.com/list/2.html?page=2&color=4&size=3#pic
funcurl (ชื่อ, ค่า, ประเภท) ฟังก์ชั่นเดียวกับรายการที่สาม แต่สิ่งนี้จะส่งคืนเฉพาะสตริงการค้นหาที่อัปเดต
ประเภทที่นี่สามารถเป็นตัวละครใด ๆ เช่น 1;
ส่งคืนตัวอย่างเนื้อหา = 2 & color = 4 & size = 3;
โดยทั่วไปใช้เพื่อรับพารามิเตอร์จาก URL จากนั้นเชื่อมต่อกับอินเทอร์เฟซ
สรุป
ตอนแรกฉันต้องการหาปลั๊กอินสำเร็จรูปที่จะใช้ แต่มันใหญ่เกินไปที่จะเข้าใจหรือไม่ใช้งานง่าย แน่นอนว่ามันเป็นเพราะระดับของฉันแย่เกินไป
ดังนั้นฉันจึงทำล้อเพื่อเล่นกับมัน แม้ว่ารหัสจะไม่สง่างามพอ แต่ก็ยังตอบสนองความต้องการของฉัน หากคุณมีคำแนะนำที่ดีกว่าให้ฝากข้อความถึงฉัน
ในความเป็นจริงมันส่วนใหญ่จะใช้กับ Vue แต่ไม่มีเนื้อหา Vue ที่นี่ดังนั้นจึงไม่ถือว่าเป็นชุดของบทเรียนสำหรับ Vue
ข้างต้นเป็นคำอธิบายที่สมบูรณ์ของวิธีการและฟังก์ชั่นบางอย่างของการค้นหาใน URL Operation JavaScript ที่แนะนำโดยบรรณาธิการ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!