PHP，AJAX從HTML選擇自動填充輸入字段？

我一直在試圖找出一個正確的方法從基於在html下拉菜單上選擇的初始文本從數據庫中提取信息。PHP，AJAX從HTML選擇自動填充輸入字段？

這裏是我的代碼：

<html> 
<head> 
</head> 
<script src="testjs.js"></script> 
<?php 
    $host = ""; 
    $username = ""; 
    $password = ""; 
    $database = ""; 
    mysql_connect($host, $username, $password); 
    mysql_select_db($database); 
?> 
<body> 

<form> 
<select name="users" onchange="showUser(this.value)"> 
<option value="">Select a person:</option> 
<?php 
    $Query = mysql_query("SELECT * FROM population"); 
    while ($Rows = mysql_fetch_array($Query)) 
    { 
     $ID = $Rows['ID']; 
     $Pop = $Rows['Pop']; 
     $UniqueID = $Rows['uid']; 
     echo "<option value=\"$UniqueID\">$Pop</option>"; 
    } 
?> 
</select> 
</form> 
<br> 
<p>DB ID <input type="text" id="ids" name="ID" ></p> 
<p>Population <input type="text" id="content" name="contet" ></p> 
<p>Unique ID <input type="text" id="uid" name="uid" ></p> 
<div id="GetInformation"><b>Person info will be listed here.</b></div> 

</body> 
</html>

test.js包含：

function showUser(str) 
{ 
if (str=="") 
    { 
    document.getElementById("GetInformation").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("GetInformation").innerHTML=xmlhttp.responseText; 
    } 
    } 
xmlhttp.open("GET","getuser.php?q="+str,true); 
xmlhttp.send(); 
}

獲得用戶包括：

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

$con = mysql_connect('', '', ''); 
if (!$con) 
    { 
    die('Could not connect: ' . mysql_error()); 
    } 

mysql_select_db("DropDown", $con); 

$sql="SELECT * FROM population WHERE uid = '".$q."'"; 

$result = mysql_query($sql); 

while($row = mysql_fetch_array($result)) 
    { 
    $ID = $row['ID']; 
    $Pop = $row['Pop']; 
    $UID = $row['uid']; 
?> 
<script type="text/javascript"> 
var ids = '<?php echo json_encode($ID); ?>'; 
var content = '<?php echo json_encode($Pop); ?>'; 
var uid = '<?php echo json_encode($UID); ?>'; 
</script> 
<?php } 
mysql_close($con); 
?>

來源

2012-12-09 Dominic Jones

**警告！**您的代碼包含[SQL注入漏洞]（http://en.wikipedia.org/wiki/SQL_injection）。請[切換到PDO]（http://php.net/book.pdo）或[mysqli]（http://php.net/book.mysqli），以便您可以使用[帶有參數化查詢的預準備語句]（http： //en.wikipedia.org/wiki/Prepared_statement）。 – Charles

你真的想要什麼？ – thiagoh

@thiagoh我認爲OP希望使用Javascript從我的數據庫中的不同表中獲取信息;將這些變量提交給JavaScript，然後使用Javascript將包含在Javascript字符串中的信息顯示到'' –

嘗試改變

while($row = mysql_fetch_array($result)) 
    { 
    $ID = $row['ID']; 
    $Pop = $row['Pop']; 
    $UID = $row['uid']; 
?> 
<script type="text/javascript"> 
var ids = '<?php echo json_encode($ID); ?>'; 
var content = '<?php echo json_encode($Pop); ?>'; 
var uid = '<?php echo json_encode($UID); ?>'; 
</script> 
<?php }

到

while($row = mysql_fetch_array($result)) 
{ 
    $ID = $row['ID']; 
    $Pop = $row['Pop']; 
    $UID = $row['uid']; 
    echo $ID . ' - ' . $Pop . ' - ' . $UID; 
}

這應該工作。但有更好的方法，因爲它們會讓您在客戶端獲得更多訪問權限。例如發送一個JSON對象回來了，一個簡單的例子是：

$info = array(); 
while($row = mysql_fetch_array($result)) 
{ 
    $ID = $row['ID']; 
    $Pop = $row['Pop']; 
    $UID = $row['uid']; 

    $info[] = array('id' => $ID, 'pop' => $Pop, 'uid' => $UID); 
} 
echo json_encode($info);

和你的JS會是這樣的：

if (xmlhttp.readyState==4 && xmlhttp.status==200) 
{ 
    var data = JSON.parse(xmlhttp.responseText); 
    for(var i=0;i<data.length;i++) 
    { 
     document.getElementById("GetInformation").innerHTML += data[i].id + ' - ' + data[i].pop + ' - ' + data[i].uid; 
    } 
}

注：如果您正在使用不包含瀏覽器工作您需要加載的JSON庫http://www.json.org/js.html。如果您想使用jQuery，您的AJAX/DOM更改也會變得更加簡單

來源

2012-12-09 08:46:00 Gootik

PHP，AJAX從HTML選擇自動填充輸入字段？

回答

相關問題