2009-12-01 5 views
0

html로 데이터를 미리로드 한 다음 javascript와 함께 사용하는 가장 좋은 방법은 무엇입니까? 자바 스크립트에서 변수를 사용하거나 아약스 쿼리를 저장하고 싶지 않습니다.html로 미리로드 된 데이터

숨겨진 div에 XML 데이터가있을 수 있습니까? .

예 :

1; Europe 
2; Latin America 

------------------ 

2, 1, Argentina 
2, 2; Brazil 
2, 3, Chile 
1, 4, France 
1, 5, Spain 
1, 6; Italy 

그는 당신이 선택한 국가에 따라 선택으로 데이터를로드 할 것입니다. 많은 데이터와 빠른 속도가 필요합니다, 나는 그것이 미리로드 된 것을 선호합니다.

EDIT. 제안 된 솔루션을 기반으로 솔루션 : 내 프로젝트에 반대 일을 한

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<title></title> 
<script type="text/javascript"> 
$(function(){ 

    $_save_data = $("<div>"); 

    $("#xselect optgroup").appendTo($_save_data); 

    $("#buttonAddA").click(function(){ 
     $("#xselect").empty(); 
     $_save_data.find("optgroup[id='a'] option").clone().appendTo("#xselect"); 
    }); 

    $("#buttonAddB").click(function(){ 
     $("#xselect").empty(); 
     $_save_data.find("optgroup[id='b'] option").clone().appendTo("#xselect"); 
    }); 

}); 
</script> 
</head> 
<body> 
<button id="buttonAddA">Add A</button> 
<button id="buttonAddB">Add B</button> 
<select id="xselect"> 
    <optgroup id="a"> 
     <option>a1</option> 
     <option>a2</option> 
     <option>a3</option> 
     <option>a4</option> 
     <option>a5</option> 
    </optgroup> 
    <optgroup id="b"> 
     <option>b1</option> 
     <option>b2</option> 
     <option>b3</option> 
     <option>b4</option> 
     <option>b5</option> 
    </optgroup> 
    <optgroup id="c"> 
     <option>c1</option> 
     <option>c2</option> 
     <option>c3</option> 
     <option>c4</option> 
     <option>c5</option> 
    </optgroup> 
</select> 
</body> 
</html> 
+6

왜 자바 스크립트에서 변수를 사용하지 않으시겠습니까? –

+0

나는 html 파일에 자바 스크립트를 포함하는 것에 동의하지 않기 때문에 –

+0

변수를 사용하는 것과 관련이 있습니까? – Yacoby

답변

1

- 나는 전체 선택로드와는 자바 스크립트와 컨텐츠의 저장 및 단지 내가 원하는 것을 삽입. 그렇게하면 JavaScript가없는 사용자 (또는 JavaScript가로드되기를 기다리는 사용자)가 내 양식을 사용할 수 있습니다.

1

나는 이런 식으로 일을 권하고 싶지 않다,하지만 당신은 다른 옵션이없는 경우 :

<!-- header above this line --> 
<div id="data" style="display:none"> 
    1; Europe 
    2; Latin America 

    ------------------ 

    2, 1, Argentina 
    2, 2; Brazil 
    2, 3, Chile 
    1, 4, France 
    1, 5, Spain 
    1, 6; Italy 
</div> 
<!-- footer below this line --> 

가 그런 다음이 data 사업부 내에서 정보를 검색하기 위해 다음과 같이 스크립트를 사용 : 다음 HTML을 가질 수 :

var dataDiv = document.getElementById('data'); 
var dataText = dataDiv.innerHTML; 
// do something to parse dataText.... 

나는 문제를 해결하기 위해 더 나은 방법이 (당신이 하나를 사용하는 경우)의 <head>script 요소에 자바 스크립트 객체를 주입하는 서버 측 언어/프레임 워크를 사용하는 것입니다 생각 페이지 배달되기 전에 렌더링됩니다. 이런 식으로 위의 예제와 같이 펑키 한 구문 분석을 수행 할 필요가 없습니다.

0

JS 변수를 선언하는 것에 대해 궁금한 점이 있습니다. 그러나 JSON 문자열을 서버 측에서 빌드하고 숨겨진 양식 필드의 value 속성에 붙여 넣으십시오.

<input type="hidden" id="some-id" value="{ abc: 123, ... }" /> 

and then... 

<script type="text/javascript"> 
    // assuming you have some kind of JSON parser available 
    var values = JSON.eval(document.getElementByID('some-id').value); 

    // do something with values 
</script> 

MBO 솔루션도 실행 가능합니다.

0

나는 JSON 갈 방법입니다 요르단에 동의하지만 값의 같은 대규모 JSON 객체에 입력 요소보다 사용하기 훨씬 쉬운 방법이있다 : 스크립트 태그에 JSON 객체를 선언

var continents = { 
1 : "Europe", 
2 : "Latin America" 
}; 
var countries = { 
1 : { 
1 : "France", 
2 : "Spain" 
}, 
2 : { 
1 : "Brazil", 
2 : "Argentina" 
} 
}; 

형식이 맞는지 확실하지 않지만 가까운 생각입니다. 데이터를 가져 오려면 다음과 같이 객체에 액세스하면됩니다.

alert(continents[1]); // Europe 
alert(countries[2][1]); // Brazil 

데이터에 액세스하기 전에 페이지가로드되었는지 확인하십시오.

+0

전적으로 동의하지만 OP는 "자바 스크립트에서 변수를 사용하고 싶지 않습니다."라고 전했다. 나는 당신이 답에서와 같이 JS 변수를 서버 측에서 생성함으로써 JS 변수를 선언하기를 원하지 않는다는 것을 의미한다고 생각했지만, 왜 그렇게 원하지 않는지는 불분명합니다. 가장 간단한 해결책. –