У меня довольно сильный фон в HTML, CSS, JavaScript и PHP. К сожалению, когда дело доходит до jQuery и Ajax, я немного склонен к минимуму. Я занимаюсь веб-дизайном на работе, но имею дело в основном с барами, ночными клубами (люди, которые предпочитают отличную работу). Я недавно приступил к работе, которая требует всего вышеперечисленного, плюс у нее есть бэкэнд mySQL, который использует PHP.
У меня есть главная страница. На этой странице он содержит таблицу. Эта таблица прокручивается, что означает, что сама страница составляет всего около 750 пикселей (обычный размер экрана), но таблица может прокручиваться столько, сколько нужно (информация вытащилась из БД). В правом столбце содержится 2 кнопки, 1 для просмотра деталей этого столбца. Эта кнопка перенаправляется на другую страницу (тип ввода = submit и PHP обрабатывает перенаправление), легко. Однако другая кнопка (кнопка ввода =) при нажатии (например, это связано с пунктом A) предполагает создание другой таблицы на той же странице, которая относится к подпунктам на основе элемента A. Снова сначала это не было вопрос. Простая кнопка отправки и PHP проверяет, была ли нажата кнопка отправки. Теперь проблема заключается в том, что в базе данных так много элементов, что, когда пользователь нажимает на кнопку для просмотра подпунктов, страница быстро обновляет, что делает первую таблицу (возможно, 100 элементов долго) обновляться до вершины. Моя главная цель – просто запустить jQuery или Ajax внешний скрипт PHP, который будет эхо-код нужного кода, чтобы «построить» другую таблицу на текущей странице html, не обновляя верхнюю таблицу.
Вот что я / попробовал.
<script> function callAjax() { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("POST","test.php",true); xmlhttp.send(); document.getElementById("divClass3").innerHTML=xmlhttp.responseText; } </script> Кроме того, мой код на странице html выглядит следующим образом (Пожалуйста, сообщите, что я использовал код test.php внутри моего html-файла. Это работало правильно, и пока я не изменился в зависимости от моих результатов от моего попытки):
<div id="divClass3"> <?php if (sizeof($rows2) > 0) echo' <table class="tableClass3"> <colgroup> <col class="fifteenper" /> <col class="fifteenper" /> <col class="fifteenper" /> <col class="fifteenper" /> <col class="fifteenper" /> <col class="fifteenper" /> <col class="tenper" /> </colgroup> <tbody> <tr class="tableRowClass3"> <th class="tableHeadingClass1"> heading1 </th> <th class="tableHeadingClass1"> heading2 </th> <th class="tableHeadingClass1"> heading3 </th> <th class="tableHeadingClass1"> heading4 </th> <th class="tableHeadingClass1"> heading5 </th> <th class="tableHeadingClass1"> heading6 </th> <th class="tableHeadingClass1"> heading7 </th> </tr> </tbody> </table> <div class="divClass2"> <table class="tableClass2"> <colgroup> <col class="fifteenper" /> <col class="fifteenper" /> <col class="fifteenper" /> <col class="fifteenper" /> <col class="fifteenper" /> <col class="fifteenper" /> <col class="tenper" /> </colgroup> <tbody class="tableBodyClass2"> '?> <?php if (sizeof($rows2) > 0) {foreach($rows2 as $row2): ?> <tr class="tableRowClass2"> <td class="tableDataClass2"> <form method="post"> <?php echo $row2['echo1']; ?> </form> </td> <td class="tableDataClass2"> <form method="post"> <?php echo $row2['echo2']; ?> </form> </td> <td class="tableDataClass2"> <form method="post"> <?php echo $row2['echo3']; ?> </form> </td> <td class="tableDataClass2"> <form method="post"> <?php echo $row2['echo4']; ?> </form> </td> <td class="tableDataClass2"> <form method="post"> <?php echo htmlentities($row2['echo5'], ENT_QUOTES, 'UTF-8'); ?> </form> </td> <td class="tableDataClass2"> <form method="post"> <?php echo htmlentities($row2['echo6'], ENT_QUOTES, 'UTF-8'); ?> </form> </td> <td class="tableDataClass2"> <form method="post"> <input name="View" type="submit" value="View" /> <input name="WorkID" type="hidden" value="<?php echo $row2['WorkID']; ?>" /> </form> </td> </tr> <?php endforeach;} ?> <?php if (sizeof($rows2) > 0) echo' </tbody> </table> </div> '?> </div>2<div id="divClass3"> <?php if (sizeof($rows2) > 0) echo' <table class="tableClass3"> <colgroup> <col class="fifteenper" /> <col class="fifteenper" /> <col class="fifteenper" /> <col class="fifteenper" /> <col class="fifteenper" /> <col class="fifteenper" /> <col class="tenper" /> </colgroup> <tbody> <tr class="tableRowClass3"> <th class="tableHeadingClass1"> heading1 </th> <th class="tableHeadingClass1"> heading2 </th> <th class="tableHeadingClass1"> heading3 </th> <th class="tableHeadingClass1"> heading4 </th> <th class="tableHeadingClass1"> heading5 </th> <th class="tableHeadingClass1"> heading6 </th> <th class="tableHeadingClass1"> heading7 </th> </tr> </tbody> </table> <div class="divClass2"> <table class="tableClass2"> <colgroup> <col class="fifteenper" /> <col class="fifteenper" /> <col class="fifteenper" /> <col class="fifteenper" /> <col class="fifteenper" /> <col class="fifteenper" /> <col class="tenper" /> </colgroup> <tbody class="tableBodyClass2"> '?> <?php if (sizeof($rows2) > 0) {foreach($rows2 as $row2): ?> <tr class="tableRowClass2"> <td class="tableDataClass2"> <form method="post"> <?php echo $row2['echo1']; ?> </form> </td> <td class="tableDataClass2"> <form method="post"> <?php echo $row2['echo2']; ?> </form> </td> <td class="tableDataClass2"> <form method="post"> <?php echo $row2['echo3']; ?> </form> </td> <td class="tableDataClass2"> <form method="post"> <?php echo $row2['echo4']; ?> </form> </td> <td class="tableDataClass2"> <form method="post"> <?php echo htmlentities($row2['echo5'], ENT_QUOTES, 'UTF-8'); ?> </form> </td> <td class="tableDataClass2"> <form method="post"> <?php echo htmlentities($row2['echo6'], ENT_QUOTES, 'UTF-8'); ?> </form> </td> <td class="tableDataClass2"> <form method="post"> <input name="View" type="submit" value="View" /> <input name="WorkID" type="hidden" value="<?php echo $row2['WorkID']; ?>" /> </form> </td> </tr> <?php endforeach;} ?> <?php if (sizeof($rows2) > 0) echo' </tbody> </table> </div> '?> </div>
И, наконец, это test.php
<?php $query2 = " SELECT SOMETHING FROM TABLE1 INNER JOIN TABLE2 ON CAT1=CAT2 AND CAT3 = :CAT4 "; $query_params2 = array( ':CAT4' => $_POST['BUTTON'] ); try { $stmt2 = $db->prepare($query2); $stmt2->execute($query_params2); } catch(PDOException $ex) { die("Failed to run query: " . $ex->getMessage()); } $rows2 = $stmt2->fetchAll(); ?>
Я заранее ценю любую помощь. Я просто публикую это, чтобы другие могли извлечь из этого пользу. Я застрял на несколько дней безрезультатно. Я видел подобные проблемы, но ничего не соответствовало этому, поэтому я подумал, что попробую. Я очень благодарю вас!
ура
Во-первых: проблема с вашим скриптом заключается в том, что вы пытаетесь сразу установить innerhtml после вызова ajax. Запросы Ajax являются асинхронными (если вы не говорите им, что они не были), поэтому они будут запускаться в свое время, и все, что вы ставите после того, как вызов может выполнить до или после. Но в принципе, если вы не скажете, что вызов ajax синхронный (который приостанавливает скрипт, пока вы не получите ответ), xmlhttp.responseText ничего не значит. Способ обработки асинхронного запроса в обычном javascript – это указать функцию обратного вызова через onreadystatechange . Например
function myCallback() { ... } xmlhttp.onreadystatechange=myCallback; xmlhttp.send();
вы также можете сделать это анонимно с помощью xmlhttp.onreadystatechange = function() { ... };
В любом случае, для асинхронных вызовов вам нужен этот обратный вызов. И, более конкретно, вам необходимо обработать обратный вызов, когда для Readistate определенно 200 (успешное возвращение), например
xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("divClass3").innerHTML=xmlhttp.responseText; } };
Другой вариант – сделать его синхронным, что замерзает ваш javascript до его загрузки (этот метод обычно не рекомендуется). Вы можете сделать это, просто изменив инструкцию .open на
xmlhttp.open("POST","test.php",false);
(последний параметр определяет, является ли вызов асинхронным или нет (true = async; false = sync)
Так вот как вы будете делать это в обычном javascript, но, поскольку вы упомянули об этом, я настоятельно рекомендую использовать jQuery, потому что это упростит вашу жизнь. Вот ваша вся функция ajaxcall с помощью jQuery:
function ajaxcall() { $.post('test.php', function(response) { $('#divClass3').html(response); }); }
Дайте мне знать, если у вас есть вопросы о том, как это работает 🙂