預加載的數據在html中

什麼是在HTML中預加載數據，然後與JavaScript一起使用的最佳方式。我不想在javascript中使用變量或保存ajax查詢。預加載的數據在html中

它可能是一個XML數據到一個隱藏的div？。

例子：

1; Europe 
2; Latin America 

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

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

他必須將數據加載到您所選擇的國選擇不同。數據量大，需要快速，我更願意預先加載。

編輯。解決方案的基礎上，提出瞭解決方案：

<!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>

來源

2009-12-01 andres descalzo

爲什麼你不想在javascript中使用變量？ – 2009-12-01 14:24:35

，因爲我不同意在HTML文件中包含JavaScript – 2009-12-01 16:31:01

這與使用變量有什麼關係？ – Yacoby 2009-12-01 19:44:44

我已經做了相反的事在我的項目 - 我裝全選，然後保存它的內容與JavaScript和只插入我想要的東西。這樣，沒有JavaScript的用戶（或等待JavaScript加載的用戶）可以使用我的表單。

來源

2009-12-01 14:27:13 MBO

我不建議做這種方式，但如果你沒有其他選擇：你可以有以下HTML：

<!-- 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專區內的信息：

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

我想一個更好的辦法來解決這個問題是使用你的服務器端語言/框架（如果你使用一個）注入JavaScript對象爲script元素的的<head>頁因爲它在交付之前呈現。這樣你就不必像上面的例子那樣做任何時髦的解析。

來源

2009-12-01 14:36:12 JasonWyatt

我很好奇禁止只聲明一個JS變量，但另一種方法是在服務器端構建一個JSON字符串，並將其粘貼到隱藏表單字段的值屬性中：

<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的解決方案也是可行的。

來源

2009-12-01 14:39:26

我跟喬丹同意，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

只要確保您嘗試訪問數據之前已加載網頁。

來源

2009-12-01 14:56:16

我完全同意，但OP說：「我不想在JavaScript中使用變量。」我認爲他不想通過在服務器端生成JS變量來聲明JS變量，就像你在答案中做的那樣，但不清楚他爲什麼不想要這個變量，因爲正如你指出的那樣，它是最直接的解決方案。 – 2009-12-01 15:24:11

預加載的數據在html中

回答

相關問題