Как динамически заполнить выпадающий список из базы данных, не отправляя форму и не обновляя страницу, используя AJAX в PHP? - PullRequest
Новая
       0

Как динамически заполнить выпадающий список из базы данных, не отправляя форму и не обновляя страницу, используя AJAX в PHP?

0 голосов
/ 19 июля 2011

У меня есть PHP-файл, в котором есть форма и в котором есть два выпадающих списка. Первое поле выбора заполнено некоторым значением.

Поле выбора Secont пусто.

Согласно требованию, если какое-либо значение выбрано из первого выпадающего списка, второе поле должно быть заполнено некоторыми значениями из базы данных.

Я хочу добиться этого, используя AJAX.

Я получил код с http://www.w3school.com сайта. Но в результате, что есть только один выпадающий список, и при событии onchange связанные значения выбранного значения отображаются в формате таблицы. Я могу заменить этот HTML-код для таблицы в коде на мой второй блок выбора. Но в соответствии с требованием я хочу показать второй выпадающий список выбора пустым до выбора, который должен быть заполнен в соответствии с выбором в первом поле выбора динамически и из базы данных. Итак, друзья, скажите, пожалуйста, как решить эту проблему. Если вы не понимаете следующий код из-за форматирования; тогда тот же код, который я получил с сайта http://www.w3school.com, находится по следующей ссылке на том же сайте.

http://www.w3schools.com/php/php_ajax_database.asp

Это HTML-страница с кодом ajax 

<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>

Это PHP-файл, который находится на сервере и вызывается с помощью AJAX и извлекает значения из базы данных 

<?php
$q=$_GET["q"];
$con = mysql_connect('localhost', 'peter', 'abc123');
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);
?>

Пожалуйста, ведите меня, друзья. Спасибо!

1 Ответ

1 голос
/ 19 июля 2011

вместо вывода результатов обратно в виде строки таблицы, возможно, отправьте их обратно в формате JSON, как это.вы также должны выполнить какую-то проверку на SQL-инъекцию посредством приведения (если ваша переменная 'q' является числом) или mysql_real_escape_string ().

PHP-файл: 

<?php
$q=$_GET["q"];
$con = mysql_connect('localhost', 'peter', 'abc123');
if (!$con)
{
  die('Could not connect: ' . mysql_error());
}
mysql_select_db("ajax_demo", $con);
$sql="SELECT `yourFieldName`, `yourFieldValue` FROM `yourTable` WHERE id = '".$q."'";
$result = mysql_query($sql);
$i = 0;
while ( $row = mysql_fetch_assoc($result) )
{
    $return[$i] = $row;
    $i++
}
$return["size"] = $i;
mysql_close($con);
echo json_encode($return);
?>

теперь все этоВ файле javascript необходимо изменить следующее: 

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        var responses = JSON.parse(xmlhttp.responseText);
        var size = responses.size;
        var selectBox =document.getElementById("yourSecondSelectBox");

        //clear any previous entries
        selectBox.options.length=0;
        for (var i = 0; i < size; i++){
            selectBox.options[i]=new Option(responses.i.yourFieldName, responses.i.yourFieldValue, false, false)
        }
    }
}

Конечно, вам необходимо скачать и включить JSON-файл JS в ваш HTML-тег head.в качестве альтернативы, вы можете включить jquery и использовать встроенную поддержку AJAX и JSON, но это потребует дополнительных исследований с вашей стороны.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...