填充ajax，json和沒有jQuery的<select>菜單

我有一些選擇菜單，我想從我的php腳本中使用json填充（每個選擇菜單顯示取決於其他選擇菜單的內容不同的值）。我知道如何從js中清除並填充選擇菜單，只要我有一個數組可以使用。問題是，我不知道如何使用ajax調用來檢索數組或json的javascript來填充選擇菜單。填充ajax，json和沒有jQuery的<select>菜單

我不想使用jquery，因爲它簡直是太大了，這樣一個簡單的任務，恕我直言。

我希望就此事的任何意見。用於填充菜單

我的測試腳本：

var sl = document.getElementById(foo); 
sl.options.length = 0; 
for(var i=0;i<100;i++){ 
    sl.options[i] = new Option(i + "Option text", i+"optionValue"); 
}

謝謝。

來源

2013-11-09 GibsonLP

jquery是一個小小的jpg圖像的大小。對於跨瀏覽器Ajax，它非常方便 – mplungjan

您可以通過http://projects.jga.me/jquery-builder/ –

Zepto是一個輕量級實現的jQuery它有JQ Ajax的支持，這是非常小的，並可以爲您節省大量的時間。

來源

2013-11-09 13:15:27 silicakes

上的jQuery Builder使用精簡版。謝謝。不幸的是，我需要IE支持，因爲它彌補了我流量的20％... – GibsonLP

我敢肯定，所有支持香草ajax的IE支持ajax位，因爲它只是一個界面 – silicakes

如果你有在PHP腳本控制，那麼最簡單的（本地）的方法是使用JSON-P。

在服務器上：

<?php 

$callback = $_GET['callback']; 
$json = json_encode($data); 
print $callback . '(' . $json . ');'; 

?>

，並在客戶端上：

<script> 

function getJSON() { 
    var script = document.createElement('script'); 
    script.src = 'http://mysite.com/page.php?callback=updateSelect'; 
    document.getElementsByTagName('head')[0].appendChild(script); 
} 

function updateSelect(json) { 
    // do stuff with your JSON object 
} 

getJSON(); 

</script>

這使得一個基本的GET請求遠程頁面;該頁面將打印用您提供的回調名稱打包的編碼JSON，在這種情況下，立即調用updateSelect方法，傳入JSON對象。

來源

2013-11-09 13:24:29 Graham

如果我理解你的問題正確，你正在尋找向服務器發送一個請求，並以JSON格式找回了一些數據，而無需使用jQuery（和潛在的 - 不使用任何其他圖書館）。

好吧，非常容易...歡迎到2000年，在'prototype'，'jQuery'和其他庫被髮明之前，'Ajax'這個術語被創造出來之前（儘管這個範例已經被使用）。

XmlHttpRequest - 這是一個可以發送異步http請求並獲得響應的對象。最初，此對象（Microsoft Outlook Web Access）的發明者擁有XML內容，因此也是名稱，但您可以傳遞任何類型的MIME類型，包括json。此外，它最初只是作爲僅在IE中可用的ActiveX實現，但現在它是'窗口'頂級對象的子對象，並且它在所有瀏覽器上都可用。 jQuery以及基本上所有其他庫都使用此對象來支持Ajax功能。看看這裏：https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest獲取更多詳細信息和示例。
的XmlHttpRequest會讓你只發布到網頁是來自同一個域名的請求。爲了克服這個問題，我們發明了第二種稱爲JSON-P的技術，它利用了src指向其他域的元素。訣竅是在服務器上生成一個腳本，其數據作爲回調函數的參數。回調函數在您的頁面中實現。該函數的名稱將成爲URL的一部分。例如：

<script type="text/javascript" 
    src="http://blogname.blogspot.com/feeds/posts/default?alt=json-in-script&callback=myFunc" 
    ></script>

看看這個URL（從谷歌的博客帖子返回最近的職位）。請注意，所有內容都嵌入到對函數myFunc的調用中，並作爲參數傳遞。

您可以在代碼中嵌入<script>元素，或者您可以使用document.write動態生成元素，或者甚至可以使用DOM操作將元素添加到類型爲SCRIPT的元素。

來源

2013-11-09 14:01:03 Uri

填充ajax，json和沒有jQuery的<select>菜單

回答

相關問題