动态下拉选择使用 ajax 填充来自 db 的文本字段

Question

我有 2 个文件。 html.php 和 getuser.php

在 html.php 中，我有一个动态下拉列表，其中填充了 mysql 数据库中的 id。 在 getuser.php 中，我的代码应该采用选定的下拉值并返回公司名称，其中 id 与下拉列表中的 id 值相同。

可以看到jsfiddle中的文件（在js区！）：

 html.php 

(http://jsfiddle.net/qHvZM/1/)

 getuser.php 

(http://jsfiddle.net/Ez9Hs/)

---

我想达到什么目标： 该数据库有以下详细信息：

cb_dealerid = 001, 002, 003, 004

cb_bedrijfsnaam = Joop BV, Kelly Ltd, Johan Ltd, Peter BV

当您从下拉值 002 中选择时，它应该在相应区域显示 Kelly Ltd.

感谢您的帮助！

Answer 1

您有一个包含用户数据库的选择字段的表单，然后在选择用户时，您希望该用户的公司名称出现在同一页面上，而无需重新加载表单。

html.php:

<script>
//AJAX request function
function createRequestObject(){
    var requestObject;
    requestObject = (window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
    return requestObject;
}

//AJAX needed var for request object
var http = createRequestObject();

//AJAX check for exsiting value for column in table in the database
function showUser(str){
    if (str==""){
        document.getElementById("txtHint").innerHTML="";
        return;
    }
    http.open("get","getuser.php?q="+str);//you may need to put in full path to your page such as "http://youdomain.com/getuser.php?q="
    http.onreadystatechange = AJAXresponseAction;
    http.send(null);
}

//AJAX function to run on status change
function AJAXresponseAction(){
    if(http.readyState == 4){
        var response = http.responseText;
        //update element with AJAX response text
        document.getElementById("txtHint").innerHTML=response;
    }
}
</script>
<?php
// Load Joomla! configuration file
require_once('configuration.php');
// Create a JConfig object
$config = new JConfig();
// Get the required codes from the configuration file
$server = $config->host;
$username   = $config->user;
$password   = $config->password;
$database = $config->db;
// Tools dropdown
$con = mysql_connect($server,$username,$password);
mysql_select_db($database);
$sql = "SELECT cb_dealerid FROM cypg8_comprofiler";
$result = mysql_query($sql);
?>
<form>
    <select name='cb_dealerid' onchange='showUser(this.value)'>
        <?php while ($row = mysql_fetch_array($result)) { ?>
        <option value="<?php print $row['cb_dealerid'];?>"><?php print $row['cb_dealerid'];?></option>
        <?php } ?>
    </select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here.</b></div>

getuser.php:

<?php
$q=$_GET["q"];
// Load Joomla! configuration file
require_once('configuration.php');
// Create a JConfig object
$config = new JConfig();
// Get the required codes from the configuration file
$server = $config->host;
$username   = $config->user;
$password   = $config->password;
$database = $config->db;

$con = mysqli_connect($server,$username,$password,$database);
if (!$con){
    die('Could not connect: ' . mysqli_error($con));
}

mysqli_select_db($con,$database);

//********************************************************************//
// ALWAYS MAKE SURE TO ESCPAE STRINGS WHEN USING VARIABLES IN QUERIES //
//********************************************************************//

$q = mysqli_real_escape_string($con,$q);

$sql="SELECT * FROM cypg8_comprofiler WHERE cb_dealerid = '".$q."' LIMIT 1";

$result = mysqli_query($con,$sql);

$row = mysqli_fetch_array($result);

//If a table is needed build it on the html page for easier coding.
print $row['cb_dealerbedrijfsnaam'];

mysqli_close($con);
?>