2013-06-01 3 views
0

을 읽고을 쿼리 문자열에 쓰려면 어떻게합니까?URL 쿼리 문자열에 프로그램 상태를 저장하는 방법은 무엇입니까?

var pageNumber = QueryString['pageNumber']; 
var pageSize = QueryString['pageSize']; 

$('#next').click(function() { 
    QueryString['pageNumber'] = ++pageNumber; 
    refresh(); 
}); 

function refresh() { /** get data and update page here **/ } 

물론 사용자가 부분 프로그램 상태가 포함 된 URL을 복사하여 붙여 넣을 수 있습니다.

QueryString (위 사용)과 유사한 API가 있습니까?

+0

이전에 'QueryString' 개체를 본 적이 없는데 어디에서 가져 왔습니까? – Barmar

+0

@Barmar - "QueryString과 비슷한 API가 있습니까?"; 요점은 OP가 그 대상을 보지 않았고 하나도 원하지 않는다고 생각합니다. –

+0

가능한 [jquery 쿼리 문자열 개체 플러그인을 사용하는 방법 - 설정, 비어, 제거 메서드가 작동하지 않음] (http://stackoverflow.com/questions/2906141/how-to-use-jquery-query-string-object- plugin-set-empty-remove-methods-not-wo) – Barmar

답변

0

브라우저가 활성화 된 JavaScript는 찾아보기 개체 모델의 window.location.search 속성을 사용하여 쿼리 문자열에 액세스 할 수 있습니다. 쿼리 문자열을 구문 분석하기위한 많은 기본 지원은 없습니다. (How can I get a specific parameter from location.search?도 참조하십시오.)

아마도 이와 같이 할 수 있을까요?

var GET = {}; // I've taken the liberty of re-naming your `QueryString` object 
       // to just `GET`, kind of in the style of PHP. 
       // Mostly because I find it confusing to refer to something which 
       // is not a string (it is an object/map) as a string. 
var queryString = window.location.search.replace(/^\?/, ''); // but this: *this* is a string! 
queryString.split(/\&/).forEach(function(keyValuePair) { 
    var paramName = keyValuePair.replace(/=.*$/, ""); // some decoding is probably necessary 
    var paramValue = keyValuePair.replace(/^[^=]*\=/, ""); // some decoding is probably necessary 
    GET[paramName] = paramValue; 
}); 

var pageNumber = GET['pageNumber']?Number(GET['pageNumber']):0; 

$('#next').click(function() { 
    GET['pageNumber'] = ++pageNumber; 
    refresh(); 
}); 

function refresh() { 
    var newQueryString = Object.keys(GET).reduce(function(keyValuePairs, paramName) { 
     keyValuePairs.push(escape(paramName)+"="+escape(GET[paramName])); 
     return keyValuePairs; 
    }, []).join('&'); 

    window.location.search = "?"+newQueryString; 
} 
+1

window.location.search를 호출해도 페이지로드가 트리거되지 않습니까? –

+0

@ landon9720 - 그건 "부름"이 무슨 뜻인지에 달려 있습니다. 값을 읽으면 페이지로드가 트리거되지 않습니다. 그것에 쓰는 것이 가능할 것입니다. 만약 당신이 원하지 않는다면 [page.location.hash] 값 ([Fragment Identifier] (http://en.wikipedia.org/wiki/Fragment_identifier)에 해당)은 페이지로드를 유발하지 않고 변경 될 수 있습니다. –

2

Richard가 언급 한 것처럼 window.location.search에 할당하여 쿼리 문자열을 변경하면 페이지가 다시로드됩니다.

이 때문에

, (이전 브라우저와 호환 "해시 라우팅") 또는 history.pushState (HTML5의 일부)을 사용하여 경로를 조작하는 대신에 프래그먼트 식별자 클라이언트 측의 상태를 인코딩하는 것이 일반적이다. pushState는 일반적으로 와일드 카드 경로의 형태를 취하는 서버 측 지원을 필요로합니다.

Director 또는 Backbone Router과 같은 라이브러리는 두 기술 모두에서 작동 할 추상화를 제공합니다.

업데이트 나는이 답변에 대한 연구를하고 때까지 몰랐다, 그러나 (는 URL의 일부 주어진 의미가 있습니다) pushState를 통해 쿼리 문자열을 조작하는 것이 가능하다. this demo의 저자가 지적했듯이, 특별한 서버 측 지원없이 pushState를 사용할 수 있습니다.

관련 문제