我的表单具有动态下拉的选择,选择一个值时,它会自动填充其他两个表单字段,即短而长的描述。我正在尝试使用Ajax根据下拉选择的值来检索短和长 desc。我可以接收xmlhttp.responseText数据并将其显示在表单页面上,但我无法将 responseText解析为相应的表单字段。
您可以看到“添加新记录”标题上方显示的 responseText。可能很难阅读,所以又来了:(我在想我可能有错误的格式)
{"Stitl":"CHF STAFF","Ltitl":"Chief Of Staff"}
HTML 文件:
<form id="addForm" method="post" action="units_add.php">
<legend>Add New Record</legend>
<label for="titleOrg" class="control-label">Title Org</label>
<select class="form-control" name="titleOrg" id="titleOrg" onChange="populate(this.value)">
<option value=" "></option>
<?php
while ($rowl1l5s = $l1l5Result->fetch_assoc()) {
echo "<option value=". $rowl1l5s['l1l5']. ">";
echo $rowl1l5s['l1l5'] . "    " .$rowl1l5s['Ltitl']; ;
echo "</option>";
}?>
</select>
<label for="shortDesc" class="control-label">Short Desc</label>
<input name="shortDesc" class="form-control" id="shortDesc" type="text" readonly="readonly">
<label for="longDesc" class="control-label">Long Desc</label>
<input name="longDesc" class="form-control" id="longDesc" type="text" readonly="readonly">
<button type="submit" class="btn btn-default" id="save"><i class="glyphicon glyphicon-ok glyphicon-white"></i> Save</button>
<a href="FDMAMaint_V10.php"
<button class="btn btn-default" id="cancel"><i class="glyphicon glyphicon-remove"></i> Cancel</button>
</a>
</form>
然后用户从动态下拉列表中选择一个值,它执行这个 JS 函数:
function populate(str)
{
if (str=="")
{
document.getElementById("shortDesc").innerHTML="";
return;
}
// Create an object
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)
{
data = xmlhttp.responseText;
document.getElementById("messages").innerHTML=xmlhttp.responseText;
document.getElementById("shortDesc").value=xmlhttp.responseText.shortDesc
document.getElementById("longDesc").value=xmlhttp.responseText.second;
}
}
xmlhttp.open("GET","getl2l5.php?q="+str,true);
xmlhttp.send();
}
我知道下面的代码(见下文)不起作用,因为它被错误地引用,而且它还没有被解析。我只是把它扔在那里以供参考为什么表单字段是“未定义的”
document.getElementById("shortDesc").value=xmlhttp.responseText.shortDesc
document.getElementById("longDesc").value=xmlhttp.responseText.second;
然后 JS 函数输出到 getL2L5 PHP 脚本:
<?php
define('DBHOST','**************');
define('DBUSER','********');
define('DBPASS','**********');
define('DBNAME','**********');
//Connect to database
if (!$db = new mysqli(DBHOST, DBUSER, DBPASS, DBNAME)) die("Can't connect to database");
// Retrieve the value from the title org drop down select
$q = $_GET['q'];
// Pull the Ltitl and Stitl based on the drop down value
$sql="SELECT Stitl, Ltitl FROM tl2l5 WHERE l1l5= '".$q."'";
// Execute the query
if (!$result = $db->query($sql))
{
die("There was an error running the query [" .$db->error. "]");
}
$data = array();
// Step through the query result and fetch the values
while ($row = $result->fetch_assoc()) {
$Stitl = $row['Stitl'];
$Ltitl = $row['Ltitl'];
$data = array( 'Stitl' => $Stitl, 'Ltitl' => $Ltitl);
}
echo json_encode($data);
?>
更新:
感谢您@TimSPQR
的 JSFiddle。这帮助我走上了正确的轨道。我意识到我的问题是我自己做的。我用你的 JSFiddle 来提醒它的值,var mydata
它显示了这个:
然后我去我的代码提醒我的变量并得到这个:
解决方案:一旦我将 html 注释标记为 php 注释,我就可以在 xmlhttp.responseText 上使用 JSON.parse 并填充引用其正确字段标题的两个表单字段(例如:data.Stitl)