Question

我确信这是一个简单的答案，但我到处寻找，似乎无法找到答案。我在表格的开头有一个下拉框，用于从sql表填充办公室名称。根据用户选择的办公室，我希望用该记录的相应信息填写其他字段。我使用w3schools php ajax数据库页作为我的向导，但它只显示如何更新页面中的一个id，我需要更新地址，城市，州，邮政编码和联系人的输入字段。

这是无效的相关代码。用于触发下拉列表的代码：

<select name="users" onchange="showOffice(this.value)" class="field select" tabindex="1" >

该页面上的脚本：

<script>
function showOffice(str)
{
if (str=="")
{
document.getElementById("practice_name").innerHTML="";
document.getElementById("contact").innerHTML="";
document.getElementById("address").innerHTML="";
document.getElementById("city").innerHTML="";
document.getElementById("state").innerHTML="";
document.getElementById("zip").innerHTML="";
return;
} 
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("practice_name").innerHTML=xmlhttp.practice_name;
document.getElementById("contact").innerHTML=xmlhttp.contact;
document.getElementById("address").innerHTML=xmlhttp.address;
document.getElementById("city").innerHTML=xmlhttp.city;
document.getElementById("state").innerHTML=xmlhttp.state;
document.getElementById("zip").innerHTML=xmlhttp.zip;
}
}
xmlhttp.open("GET","getoffice.php?q="+str,true);
xmlhttp.send();
}
</script>

然后是我的getoffice.php代码：

<?php
$q=$_GET["q"];


$host="********"; // Host name 
$db_username="******"; // Mysql username 
$db_password="******"; // Mysql password 

// Connect to server and select database.
$con = mysqli_connect("$host", "$db_username", "$db_password"); 
if (!$con)
{
die('Could not connect: ' . mysqli_error($con));
}

mysqli_select_db($con,"*****");
$sql="SELECT * FROM initial_practice WHERE id = '".$q."'";

$result = mysqli_query($con,$sql);
$row=mysql_fetch_array($result);
?>
var practice_name = <? echo $row['practice_name']; ?>
var contact = <? echo $row['contact']; ?>
var address = <? echo $row['address']; ?>
var city = <? echo $row['city']; ?>
var state = <? echo $row['state']; ?>
var zip = <? echo $row['zip']; ?>
<?
mysqli_close($con);
?>

非常感谢任何帮助。

Answer 1

您的问题是您没有正确使用响应文本。这可以通过几个步骤来解决。 AJAX请求会从getoffice.php中删除所有打印出的内容。

<强>第一

我们想要在页面脚本上更改这些行：

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("practice_name").innerHTML=xmlhttp.practice_name;
        document.getElementById("contact").innerHTML=xmlhttp.contact;
        document.getElementById("address").innerHTML=xmlhttp.address;
        document.getElementById("city").innerHTML=xmlhttp.city;
        document.getElementById("state").innerHTML=xmlhttp.state;
        document.getElementById("zip").innerHTML=xmlhttp.zip;
    }
}

稍微容易一点（我倾向于将readyState和status if分开，我的妄想认为它可以在组合时随机失败）：

xmlhttp.onreadystatechange=function()
{
    if(xmlhttp.readyState==4)
    {
        if(xmlhttp.status==200)
        {
            eval(xmlhttp.responseText);
        }
    }
};

现在我们只是评估我们从请求中获得的所有内容。另外，请注意我在onreadystatechange函数的末尾添加了一个分号。

<强>第二

更改getoffice.php中的以下行：

var practice_name = <? echo $row['practice_name']; ?>
var contact = <? echo $row['contact']; ?>
var address = <? echo $row['address']; ?>
var city = <? echo $row['city']; ?>
var state = <? echo $row['state']; ?>
var zip = <? echo $row['zip']; ?>

要：

document.initialpractice.practice_name.value = <?php echo $row['practice_name']; ?>
document.initialpractice.contact.value = <?php echo $row['contact']; ?>;
document.initialpractice.address.value = <?php echo $row['address']; ?>;
document.initialpractice.city.value = <?php echo $row['city']; ?>;
document.initialpractice.state.value = <?php echo $row['state']; ?>;
document.initialpractice.zip.value = <?php echo $row['zip']; ?>;

现在，当我们从服务器获得响应时，javascript将适当地评估上述响应并填写字段。至少它应该，提供查询不会失败。

此外，您可以将mysqli_fetch_array()更改为mysqli_fetch_assoc()，因为您只需要关联数组。

注意：我们可以通过在readyState / status检查下添加eval(xmlhttp.responseText);并在所有innerHTML变量前删除xmlhttp.来解决问题。

Answer 2

终于明白了。对于任何遇到同样问题的人来说，这是一个修复。

php代码：

$row=mysqli_fetch_assoc($result);

$name = $row['practice_name'];
$contact = $row['contact_name'];
$address = $row['address'];
$city = $row['city'];
$state = $row['state'];
$zip = $row['zip'];

echo $name."#".$contact."#".$address."#".$city."#".$state."#".$zip;

页面上的脚本：

function showOffice(str)
{
if (str=="")
{
document.getElementById("practice_name").innerHTML="";
document.getElementById("contact").innerHTML="";
document.getElementById("address").innerHTML="";
document.getElementById("city").innerHTML="";
document.getElementById("state").innerHTML="";
document.getElementById("zip").innerHTML="";
return;
} 
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
{

    if(xmlhttp.status==200)
    {
        var data = xmlhttp.responseText.split("#");
        var name = decodeURIComponent(data[0]);
        var contact = decodeURIComponent(data[1]);
        var address = decodeURIComponent(data[2]);
        var city = decodeURIComponent(data[3]);
        var state = decodeURIComponent(data[4]);
        var zip = decodeURIComponent(data[5]);
        document.initialpractice.practice_name.value = name;
        document.initialpractice.contact.value = contact;
        document.initialpractice.address.value = address;
        document.initialpractice.city.value = city;
        document.initialpractice.state.value = state;
        document.initialpractice.zip.value = zip;
    }
}
};
xmlhttp.open("GET","getoffice.php?q="+str,true);
xmlhttp.send();
}
</script>

使用AJAX从SQL更新多个字段

2 个答案: