下拉人口與jQuery的Ajax和CFC

我想填充數據庫數據的HTML下拉列表。要做到這一點，我從檢索數據庫中的數據和建立選項元素如下：下拉人口與jQuery的Ajax和CFC

var obj = eval("(" + data + ")"); 
for (i = 1; i <= obj.DATA.length; i++) { 
    var col_val = obj.DATA[i - 1]; 
    $("#dropdown").append('<option value="' + col_val + '">' + col_val + '</option>'); 
}

我試圖也如下面的替代方法：

$("#dropdown").html(data);

其中，數據是一個包含列表的字符串在使用cfloop循環查看數據庫查詢後，由被調用的CFC頁返回的選項元素。

在添加新選項之前，我使用以下任一語句刪除較舊的選項。

$('#dropdown').empty(); 

$('#dropdown option').remove(); 

$('#dropdown').html('');

經過分析，我發現刪除選項會導致最大延遲。

是否有更快的備用JavaScript或Jquery函數可用於刪除選項？或者您是否建議改善性能的解決方法？

注意：爲此，我必須使用ColdFusion & AJAX。此外，我無法使用ColdFusion的內置AJAX功能。

謝謝！

來源

2012-10-11 Crash OR

您使用JavaScript填充此客戶端的任何原因與使用ColdFusion預生成服務器端的原因？ – BKK

第一：無需客戶端或服務器端技術，我不必刷新頁面。請讓我知道是否可以用服務器端技術完成同樣的工作，即ColdFusion。 –

第二：在我的情況下，ColdFusion的內置AJAX功能不是我的選擇，例如，cfajaximport等。 –

我通常從Ajax請求返回HTML這樣的反應看起來像

<option value = "1">1</option> 
<option value = "2">2</option> 
<option value = "3">3</option> 
<option value = "4">4</option> 
...

那麼就使用$("#selectName").html(data);填充選擇與它現在包含了一堆選項標籤的響應。

來源

2012-10-11 18:30:04 Travis

謝謝特拉維斯！我嘗試過這個選項，但是性能幾乎沒有任何改進。數據庫查詢返回的最小數量爲4000-5000行。因此，延遲主要可能是由它必須動態添加的選項元素的數量引起的。你是否建議其他替代方案來顯示和使用這些數據？ –

您是否定時查詢了輸出4-5k記錄所花費的時間？您可以在查詢之前和輸出之後放置getTickCount（）並減去差異。您還可以使用Chrome開發人員工具或螢火蟲查看請求並查看確切的延遲時間。 – Travis

我嘗試使用JavaScript的Date（）。getTime（）方法。我在Ajax調用之前立即開始時間，並在調用返回時使用'options'字符串立即結束時間。但是，與整體處理時間相比，時間要少得多。更清楚的是，查詢在avg中執行。 6秒。這些選項在平平凡意之後顯示。 16秒。 –

ColdFusion是未定義的錯誤可能是因爲您虛擬映射到/ CFIDE/scripts文件夾丟失了，您可以手動將其從類似的CF安裝拷貝到您的webroot中以解決此問題或修復您的安裝。

來源

2012-10-11 18:39:24 BKK

感謝Ben的投入！我早些時候嘗試過，得出了同樣的結論。但是這個選項對我沒有用。所以不能使用ColdFusion的內置AJAX功能。 –

您在循環的每次迭代中跳入DOM。您需要在退出循環後執行$（「＃下拉」）操作。

來源

2012-10-12 14:21:51

我嘗試過實施Travis的建議。在此，CFC頁面將創建一個

如果您通過ajax獲得您的選擇，您應該能夠運行firefox Firebug控制檯並查看獲取數據所需的確切時間。這將確保問題是下載時間還是渲染時間。還要考慮：查詢緩存，將js數組或列表寫入js文件，並使用直接js over CF或減少選項的數量（我無法通過5k選項滾動圖像）
您也可以嘗試下載數據列表，並使用
```
str.replace(',','<option>') 
```

在選項標籤「包裝」各列表項。請記住：如果值和文本相同，則不必具有值參數。和：你沒有關閉選項標籤：

<option>1<option>2<option>3...<option>N

最後，如果這仍然太慢，那麼我會建議使用延遲加載器加載更多可管理的塊你的選擇。你甚至可以觸發懶惰的加載器來保持加載塊，而不管用戶操作（settimeout）。

希望這會有所幫助。

來源

2012-10-14 08:37:22

非常感謝Alain對Firebug的建議！我知道它是導致延遲的刪除語句。（'＃'dropdown'）。'（'＃下拉選項'）。remove（）;' '和'$（'＃dropdown'）。html（''） ;'。但是，他們都沒有提供任何改進。是否有任何可以使用的替代JavaScript或Jquery函數？或者您是否建議改善性能的解決方法？ –

嘗試懶加載程序或甚至只是一個ajax加載程序，以便客戶端可用作列表加載。 –

你能舉出一個使用ajax loader或lazy loader加載下拉選項的例子嗎？ –

使用此語法，這可能使用ColdFusion僅

<CFSELECT NAME="name" 
    REQUIRED="Yes/No" 
    MESSAGE="text" 
    ONERROR="text" 
    SIZE="integer" 
    MULTIPLE="Yes/No" 
    QUERY="queryname" 
    SELECTED="column_value" 
    VALUE="text" 
    DISPLAY="text" 
    PASSTHROUGH="HTML_attributes"> 

</CFSELECT>

查詢附近的屬性，你可以通過你的查詢名稱是有幫助的。

來源

2013-08-12 09:21:43 uvk

下拉人口與jQuery的Ajax和CFC

回答

相關問題