HTML表單：

<form> 
<select name="users" onchange="showUser(this.value)"> 
<option value="">Select a person:</option> 
<option value="1">Peter Griffin</option> 
<option value="2">Lois Griffin</option> 
</select> 
</form>

的.js素文字：

function showUser(str) 
{ 
     if (str=="") 
    { 
    document.getElementById("txtHint").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("txtHint").innerHTML=xmlhttp.responseText; 
    } 
    } 

xmlhttp.open("GET","getuser.php?q="+str,true); 
xmlhttp.send(); 
}

PHP腳本：

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

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

mysql_select_db("ajax_demo", $con); 

$sql="SELECT * FROM emp WHERE id = '$q'"; 

$result = mysql_query($sql); 

$i = 0; 

echo "<table class=\"table-master\"> 
<tr> 
<th>Firstname</th> 
<th>Lastname</th> 
<th>Age</th> 
<th>Hometown</th> 
<th>Job</th> 
</tr>"; 

while($row = mysql_fetch_array($result)) 
    { 
    $i++; 
    echo "<tr class=\"d".($i & 1)."\">"; 
    echo "<td>" . $row['FirstName'] . "</td>"; 
    echo "<td>" . $row['LastName'] . "</td>"; 
    echo "<td>" . $row['Age'] . "</td>"; 
    echo "<td>" . $row['Hometown'] . "</td>"; 
    echo "<td>" . $row['Job'] . "</td>"; 
    echo "</tr>"; 
    } 
echo "</table>"; 

mysql_close($con); 
?>

我想要做的是在我的HTML中有一個文本字段，它將被填充當用戶點擊'提交'時用戶輸出該信息，該信息被傳遞到包含AJAX段的js腳本中，由DB查詢並將結果輸入到我的DIV中。

我認爲我錯了 - 當使用文本表單作爲子表單時，顯然不能使用onchange。必須提交！？因此，我認爲我的AJAX部分很好。 PHP腳本也可以工作，但是當我嘗試從表單輸入文本時，所有事情都會崩潰。也許我的js腳本沒有設置捕獲傳入的文本表單變量！？任何幫助/指導將不勝感激。

來源

2011-09-22 Martin Kowalski

首先，我很懶，使用jQuery。但是，如果您的表單中有多個輸入，最好的方法是在提交按鈕上使用onsubmit處理程序或onclick處理程序。

你必須讓每一個元素的值，並適當地建立您的查詢字符串：

<form> 
<select id="users" name="users"> 
<option value="">Select a person:</option> 
<option value="1">Peter Griffin</option> 
<option value="2">Lois Griffin</option> 
</select> 
<input id="textfield" name="textfield" type ="text" /> 
<input type="submit" value="process" onclick="showUser()" /> 
</form> 


    function showUser() 
{ 
var sel = document.getElementById('users'); 
var selvalue = sel.options[sel.selectedIndex].value; 
var textfield = document.getElementById('textfield').value; 

     if (selvalue=="" || textfield = "") 
    { 
document.getElementById("txtHint").innerHTML=""; 
    return false; 
    } 
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("txtHint").innerHTML=xmlhttp.responseText; 
    } 
} 

xmlhttp.open("GET","getuser.php?q=" + selvalue + "&t=" + textfield,true); 
xmlhttp.send(); 
return false; 
}

你必須檢查你的PHP腳本變量t，做任何你想用它。請在與數據庫交互之前請清理您的輸入。

您應該將其轉換爲int，並使用mysql_real_escape_string（）或參數化查詢。

我假設這個工程。我習慣了Jquery，我只需要序列化表單並忘記它。

我敢肯定有人有更好的方法來做到這一點 - 我不知道JavaScript那麼好。

來源

2011-09-22 16:48:32 Ben

嘿本，謝謝你的時間。這是非常有用和信息豐富的。我很快就會開始想起Jquery。再次感謝您的幫助。 –

如果你想在這裏XmlHttp這是我如何做一個文本字段，添加更多的你自己。將名爲EMP測試表5場F1，F2，...，F5和這將工作：

的index.htm

<html> 
<head> 
<script type="text/javascript"> 

var request = false; 
try { 
    request = new XMLHttpRequest(); 
} catch (trymicrosoft) {       
    try { 
    request = new ActiveXObject("Msxml2.XMLHTTP"); 
    } catch (othermicrosoft) { 
    try { 
     request = new ActiveXObject("Microsoft.XMLHTTP"); 
    } catch (failed) {     
     request = false;  
    } 
    } 
} 

if (!request) 
    alert("Error initializing XMLHttpRequest!"); 
</script> 

<script type="text/javascript"> 
    function getEmp(emp) 
    { 
     document.getElementById('results').innerHTML="Please wait..."; 

     //we will call asychronously getData.php 
     var url = "getEmp.php"; 
     var params = emp;//no url parameters 
    var params = "empField=" +emp+""; 
     request.open("POST", url, true);//use post for connect harder to attack, lots of data transfer 

     //Some http headers must be set along with any POST request. 
     request.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=utf-8"); 
     request.setRequestHeader("Content-length", params.length); 
     request.setRequestHeader("Connection", "close"); 

     request.onreadystatechange = updatePage; 
     request.send(params); 

    }//////////////////// 

    //You're looking for a status code of 200 which simply means okay. 
    function updatePage() { 
    if (request.readyState == 4) { 
     if (request.status == 200) 
     { 
      document.getElementById('results').innerHTML=request.responseText; 
     } 
     else{ 
     //alert("status is " + request.status); 
     } 
    } 
    } 

</script> 
</head> 
<body > 


Write employ name: <input type="text" name="emp" id='empField' value='John'/> 
<span style="background-color:blue;color:yellow;" 
onClick="getEmp(document.getElementById('empField').value)"/> 
Click to find 
</span> 

<div id="results"> 

</div> 


</body> 
</html>

getEmp.php

<?PHP 

mysql_connect('localhost', 'root',''); 
mysql_select_db("ajax_demo"); 

$sq='\''; 
$sql="SELECT * FROM emp WHERE f1 = ".$sq.$_POST['empField'].$sq." "; 

$result = mysql_query($sql); 
$row = mysql_fetch_row($result); 

?> 

<table border=4> 
<tr><td>Field 1</td><td>Field 2</td><td>Field 3</td><td>Field 4</td><td>Field 5</td></tr> 
<tr> 
    <td><?PHP echo $row[0]; ?></td>  <td><?PHP echo $row[1]; ?></td> 
    <td><?PHP echo $row[2]; ?></td>  <td><?PHP echo $row[3]; ?></td> 
    <td><?PHP echo $row[4]; ?></td>  
<tr> 
</table>

來源

2011-09-22 17:15:14 Melsi

Ajax-MySql-Php問題（從表單提交文本，通過AJAX發送到php腳本，返回div）

HTML表單：

的.js素文字：

PHP腳本：

回答

相關問題