머리말
첫째, 검색이 무엇인지 알아야합니다. 검색은 Window.location의 속성입니다. 예를 들어:
우선, 여기에는 http://www.a.com/list/2.html?page=2&color=4&size=3#pic입니다.
이 주소에 액세스 할 때 콘솔을 열고 Window.location을 입력하면 다음 그림에서 결과를 얻을 수 있습니다.
위에서 언급했듯이, 우리가 작동하려는 것은 위 그림의 상자의 일부입니다.
왜 이것을 운영해야합니까?
예를 들어, 두 번째 페이지의 세 번째 페이지로 점프 해야하는 경우 위의 페이지 = 2에서 Page = 3을 업데이트하고 다른 매개 변수를 유지해야합니다.
또는 처음에는 검색 결과가 없었습니다 (예 : 일반 목록의 첫 페이지와 같은 것은 없었지만 이제는 페이지 = 2를 추가해야합니다.
다음으로, 나는 지금 어떤 페이지를 가지고 있는지 알아야합니다. 즉, 페이지의 값을 얻어야합니다.
따라서 검색이 필요합니다. 이제 우리는 전면 및 후면에서 분리되어 있으며 검색은 매개 변수 구성에 매우 중요한 방법입니다.
건축 방법
검색에 지정된 매개 변수 값을 가져옵니다
바이두를 가져 가면 다음 방법을 찾았습니다.
함수 getQueryString (name) {var reg = new regexp ( "(^| &)" + name + "= ([^&]*) (& | $)"); var r = window.location.search.substr (1) .match (reg); if (r! = null) return Unescape (r [2]); 귀환 null;}방법 출처 : JS를 사용하여 주소 막대 매개 변수를 얻는 메소드
전체 기능 방법
나는 원래 구현 아이디어를 작성하고 싶었지만 한동안 기억할 수 없었기 때문에 최종 방법에 직접 주었다.
function funcurl (이름, 값, 유형) {var loca = window.location; var baseurl = type == undefined? loca.origin + loca.pathname + "?" : ""; var query = loca.search.substr (1); // 매개 변수 전송이없는 경우 return 검색 값이 (name == undefined) {return query} {return query} {return query}를 포함하지 않습니다. +"= ([^&]*) (& | $)")); return val! = null? unescape (val [2]) : null;}; var url; if (query == "") {// 검색 값이없는 경우 appled parameter = baseurl + "="= "=" + value;} else {// 검색 값이 없으면 varj = {varj = {varj = {varj}; query.split ( "&"); for (var i = 0; i <arr.length; i ++) {arr [i] = arr [i] .split ( "="); obj [arr [i] [0]] = arr [i] [1];}; obj [name] = value; url = baseurl+ json.stringify (obj) .replace (/[/"/{/}]/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과 같은 모든 문자 일 수 있습니다.
반환 내용 예제 Page = 2 & Color = 4 & size = 3;
일반적으로 URL에서 매개 변수를 얻은 다음 인터페이스에 도킹하는 데 사용됩니다.
요약
나는 원래 기성품 플러그인을 사용할 수 있기를 원했지만 이해하기에는 너무 컸거나 사용하기 쉽지 않았습니다. 물론, 주로 내 수준이 너무 가난했기 때문입니다.
그래서 나는 그것을 가지고 놀기 위해 바퀴를 만들었습니다. 코드는 충분히 우아하지는 않지만 여전히 내 요구를 충족시킵니다. 더 나은 제안이 있다면 메시지를 남겨주세요.
실제로, 그것은 주로 VUE와 함께 사용되지만 여기에는 vue 컨텐츠가 없으므로 VUE에 대한 일련의 튜토리얼로 간주되지 않습니다.
위는 편집자가 소개 한 JavaScript Operation URL에서 검색의 일부 방법과 기능에 대한 완전한 설명입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!