如何使用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;
?>