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

Question

我想顯示一個基於單選按鈕選擇的選擇框。 有兩個單選按鈕，名稱分別為“新項目”和“上一個項目”。 如果用戶選擇以前的項目，則組合框將使用JavaScript顯示。

用戶必須從此組合框中選擇其上一個項目的ID，然后根據該項目ID，使用JavaScript或Ajax將一些數據填充到文本框和組合框中。

解決辦法是什么？

Answer 1

1. index.html

該頁面加載了suggest.js文件，其中描述了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 position否則將不會形成該層。 較低的元素將被下推以適應從數據庫中檢索到的值。 top ， left等也被放到下拉菜單中（div層）。 還設置了overflow以便當div標簽超過定義的height時滾動效果。

文件中的其他內容應該是自解釋性的，因為它聲明了變量和函數。

3. database.php

   函數db_connect（$ server ='localhost'，$ username ='root'，$ password ='enigma'，$ database ='suggest'，$ link ='db_link'）

請更改與您相對應的server ， username ， password和database名稱。

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

Answer 2

我建議您開始學習jQuery。 看看jQuery絕對入門視頻系列

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

Answer 3

您需要使用jQuery（ http://api.jquery.com/jQuery.post/ ）中的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;
?>