如何使用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函数。