如何使用Ajax/JavaScript基於onchange事件顯示數據庫中的記錄？

Question

我想顯示一個基於單選按鈕選擇的選擇框。有2個單選按鈕名稱爲「新項目」和「上一個項目」。如果用戶選擇以前的項目，那麼組合框將使用JavaScript顯示。

從這個組合框中，用戶必須選擇他/她以前的項目的id，並根據此項目id，使用JavaScript或Ajax將一些數據填充到文本框和組合框中。

解決方案是什麼？

Answer 1

我建議你開始學習jQuery。看看jQuery for Absolute Beginners Video Series

在本教程中，您將快速而實用地學習如何使用jQuery輕鬆處理創建AJAX請求。

Answer 2

你需要使用jQuery的post函數（http://api.jquery.com/jQuery.post/）。創建一個新的PHP文件，您可以在其中加載數據並創建JavaScript函數以使用返回的數據填充文本框。

HTML：

<input type="text" name="srcTextbox" value="test" /> 
<input type="text" 
     name="destTextbox" 
     onchange="$.post('get_values_from_db.php', { id : $('srcTextbox').value } , function(data) { $('destTextbox').value = data; });" /> 

PHP（get_values_from_db.php）：

<?php 
    $id = $_POST['id']; 
    //Get data here with the id from srcTextbox. 
    echo $data; 
?> 

Answer 3

1. index.html 

的頁面加載suggest.js文件其中t描述了他對searchSuggest函數的描述。這種情況下的鍵盤事件處理程序是onkeyup，它檢查輸入到文本框中的每個字母。還創建了div元素，以便可以處理由JavaScript傳遞的數據。

2. suggest.js 

    var searchReq = getXmlHttpRequestObject(); 

This above line creates a httpRequest object for passing values. 

    function searchSuggest() { 
    if (searchReq.readyState == 4 || searchReq.readyState == 0) { 
    var str = escape(document.getElementById(’PoNumber’).value); 
    searchReq.open(」GET」, ’searchSuggest.php?search=’ + str, true); 
    searchReq.onreadystatechange = handleSearchSuggest; 
    searchReq.send(null); 
    } 

}

str會從文本框中的值。在文本框中輸入的每個單詞都被傳遞給該變量，該變量構成該函數的一部分。稍後，將值傳遞給執行所有處理的searchSuggest.php文件。

var curLeft=0; 
if (str1.offsetParent){ 
while (str1.offsetParent){ 
curLeft += str1.offsetLeft; 
str1 = str1.offsetParent; 
} 
} 

curLeft限定了正被初始化爲0作爲開始時的當前左側位置。 offsetparent返回對包含元素的最近（在包容層次結構中最接近的）對象的引用。當元素將style.display設置爲「none」時，offsetParent返回null。由於元素可以在許多層次結構中，因此我們可以循環每個層次結構以獲取值。

ss.setAttribute(’style’,'position:absolute;top:’+curTop+’;left:’+curLeft+’;width:150;z-index:1;padding:5px;border: 1px solid #000000; overflow:auto; height:105; background-color:#F5F5FF;’); 

這裏ss表示圖層的文檔ID。在上面的行中，div標籤的style屬性正在設置中。 position應始終爲absolute否則該層將不會形成。下層元素將被下推以適應從數據庫中檢索的值。 top,left等也正在顯示下拉（div層）。overflow也是爲div標籤中的滾動效果設置的，當它穿過定義的height時。

該文件中的其他東西應該是自我解釋的，因爲它聲明瞭變量和函數。

database.php中

功能db_connect（$服務器= '本地主機'，$用戶名= '根'，$口令= '謎'，$數據庫=「建議」，$鏈接= 'db_link'）

請更改對應的你server，username，password和database名。

1. searchSuggest.php 一個不言自明的文件。這將從數據庫中檢索數據，並將輸出傳遞給suggest.js中的searchSuggest函數。