Принцип работы AJAX заключается в том, что при первом запросе вы пишете базовый HTML-код вашей веб-страницы, включая некоторый JavaScript, который обращается к серверу и запрашивает дополнительные данные.В зависимости от того, как вы планируете отправлять ваши данные, он может сделать один или несколько запросов после визуализации страницы, чтобы получить больше данных.Использование AJAX потребует от вас переосмысления способов доставки ваших данных.Например, вам понадобится один «скрипт» для загрузки страницы, затем другой «скрипт» для получения данных - конечно, они могут быть одинаковыми, только с разными параметрами.Я добавлю простой пример для демонстрации, так как рефакторинг вашего примера потребует большего понимания ваших данных и того, как они доставляются.Этот пример взят из w3schools.com .
HTML:
<script type="text/javascript">
$(function() {
$('#users').change(function() {
// here's the AJAX bit
$.get( '/users/load.php?q=' + $(this).val(),
function(html) {
$('#txtHint').html(html);
});
});
});
</script>
</head>
<body>
<form>
<select name="users">
<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
<?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 = '" . mysql_real_escape_string( $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);
?>