Question

我想根据单选按钮选择显示一个选择框。有2个单选按钮，名称为“新项目”和“上一个项目”。如果用户选择了以前的项目，则组合框将使用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，否则不会形成图层。将下推下部元素以容纳从数据库中检索的值。 top，left等也正在展示下拉（div层）。对于div标记中的滚动效果，overflow也会设置为height。

文件中的其他内容应该是自解释的，因为它声明了变量和函数。

database.php中

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

请更改与您对应的server，username，password和database名称。

searchSuggest.php 一个不言自明的文件。这将从数据库中检索数据，并将输出传递给suggest.js中的searchSuggest函数。

Answer 2

我建议你开始学习jQuery。看看jQuery for Absolute Beginners Video Series

在本教程中，您将快速，实用地学习如何使用jQuery轻松处理创建AJAX请求。

Answer 3

您需要使用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;
?>

如何使用Ajax / JavaScript基于onchange事件显示数据库中的记录？

3 个答案: