2012-04-18 2 views
0

Я смотрю на этот сценарий из w3schools.com (Ajax, PHP и Mysql) http://www.w3schools.com/php/php_ajax_database.aspпередать несколько переменных в AJAX OnChange выбрать

<html> 
<head> 
<script type="text/javascript"> 
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(); 
} 
</script> 
</head> 
<body> 

<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> 
<option value="3">Glenn Quagmire</option> 
<option value="4">Joseph Swanson</option> 
</select> 
</form> 
<br /> 
<div id="txtHint"><b>Person info will be listed here.</b></div> 

</body> 
</html> 

Это показывает простой выбор с 4-мя значениями.

И это PHP-скрипт.

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

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

mysql_select_db("ajax_demo", $con); 

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

$result = mysql_query($sql); 

echo "<table border='1'> 
<tr> 
<th>Firstname</th> 
<th>Lastname</th> 
<th>Age</th> 
<th>Hometown</th> 
<th>Job</th> 
</tr>"; 

while($row = mysql_fetch_array($result)) 
    { 
    echo "<tr>"; 
    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); 
?> 

Теперь я понимаю, что он делает и как это работает, но давайте скажем, что я хочу передать еще 3 переменных в PHP скрипт, когда кто-то изменяет значение переключателя, как я могу это сделать ??

+0

Изменив строку запроса getuser.php вызов, который, в свою очередь, означает изменение функции onChange или добавление большего количества из них. Альтернативно, он меняет функцию onChange для выбора значений из каждого поля формы по идентификатору. В стороне, НИКОГДА не отправляйте имя пользователя/пароли в вопросах. Даже если вы публикуете «тестовые»/«демонстрационные», легко случайно отправлять реальные, если вы попадаете в эту дурную привычку. Если это то, что вы делаете с нуля, рассмотрите структуру, упрощающую этот jQuery, чтобы помочь в кросс-браузерной совместимости. –

+0

Что делать, если я хочу отправить что-то вроде даты (не сегодняшней даты) и времени. Итак, мне нужно будет изменить этот код? xmlhttp.open ("GET", "getuser.php? Q =" + str, true); Если бы я хотел передать переменную d или t. xmlhttp.open ("GET", "getuser.php? Q =" + str, true "& d =" + date, true); Что-то в этом роде? – Student

+1

http://bobby-tables.com/ - что, если '$ _GET [" q "]' значение было '1 '; drop table ; --'? – fcalderan

ответ

0

Исходя из моих комментариев, вот пример, который принимает значения от 2 выбирает, и подает АЯКС вызов, когда оба заполнены в

// Notice the arguments are gone at the moment 
function showUser() { 
    // Retrieve values from the selects 
    var u = document.getElementByID('userSelect').value; 
    var g = document.getElementByID('groupSelect').value; 

    if (u=="" || g == "") { 
     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?u="+u+"&g="+g,true); 
    xmlhttp.send(); 
} 

И затем основная форма

<form> 
    <select name="users" id="userSelect" onchange="showUser()"> 
     <option value="">Select a person:</option> 
     <option value="1">Peter Griffin</option> 
     <option value="2">Lois Griffin</option> 
     <option value="3">Glenn Quagmire</option> 
     <option value="4">Joseph Swanson</option> 
    </select> 
    <select name="groups" id="groupSelect" onchange="showUser()"> 
     <option value="">Select a group:</option> 
     <option value="a">Aerosmith</option> 
     <option value="k">Kiss</option> 
     <option value="l">Led Zeppelin</option> 
     <option value="m">Metallica</option> 
    </select> 
</form> 

Это не фантастический вариант, хотя, и, как упоминалось бы рекомендовал вам в использовании рамки, такие как JQuery (http://jquery.com/), как вы будете иметь возможность тратить больше времени на логике, а не обеспечения совместимости с браузером

Однако вы пойдите, хотя, это не помешает экспериментировать, так что просто попробуйте некоторые вещи и посмотрите, что произойдет (пока вы не удаляете данные в реальном времени, так или иначе)

0

Для того чтобы послать значения mutliple, вы соответствующим образом измените строку запроса.

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

Чтобы что-то вроде

xmlhttp.open("GET","getuser.php?q="+str+"&nextvar="+value1,true); 
Смежные вопросы