Задать вопрос

rebootbutton

Ответы пользователя по тегу JavaScript

  • Почему я не могу получить новые значения $_GET в AJAX+PHP, кто-то может помочь?

    @rebootbutton Автор вопроса
    Так! Товарищи, добрый день, снова я.
    Если читаете всё ещё, так это не зря. А случайным людям, которые зашли читать рекомендую комментарии и ругань здесь не читать, там правильного ответа нет.
    Особенно фразы как
    пхп код ВЕСЬ выносится ДО хтмл.

    мне непонятны. Я подумал наверно пхп код должен в документе выше идти, если это имелось ввиду, то дело совсем не в этом - и это мне ни капли не помогло.
    Теперь правильный ответ:
    Что я сделал и как решил вопрос?
    1.Файл 002.php:
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PHP</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<h2>PHP AJAX Try</h2>
<p class="article">For more information please <a href="001.php">see</a></p>
<p class="article">or get <a href="002.php">back to table</a></p>
<p class="article"></p>
<table>
    <tr>
        <th>Идентификатор товара
        </th>
        <th>Наименование товара
            <form action="002_table.php" method="get">
            
            <input id="search" type="text" name="search" autocomplete="off" placeholder="Поиск...">
            </form>
        </th>
        <th>Цена товара</th>
    </tr>
 <tbody id="tbl">
</tbody>
</table>
<script>
//------------4.SCRIPTS. AJAX. SENDING --------------------------
var search = document.getElementById('search');
search.addEventListener('input', function () {
    searchval = document.getElementById('search').value;
    var xhr = new XMLHttpRequest();
    console.log(xhr);
     xhr.onreadystatechange = function(){
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById('tbl').innerHTML = this.responseText;
            console.log('xhr');
            console.log(this.readyState + 'readyState');
            console.log(this.status + 'status');
        }
    }
    xhr.open("GET", "002_table.php?search=" + searchval, true);
    xhr.send();
});

</script>
</body>
</html>

    здесь самое важное для меня нужное была строка:
    document.getElementById('tbl').innerHTML = this.responseText;

    при этом в таблице (внутри тега table, после строки тега tr для заголовок) я создал тег tbody и присвоил к нему идентификаторid="tbl"
    То есть tbody в 002.php включать будет в себя содержание 002_table.php, вернее 002_table.php?search=нашзапрос
    2.Часть кода, где отображается таблица, убрал в документ (новый) 002_table.php:
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

<?php
//------------1.CONNECTION--------------------------
$conn = mysqli_connect('localhost', 'root', '', 'tovarlar');
$query = "SELECT * from royhat";
$result = mysqli_query($conn, $query);
//------------2.TABLE CREATION--------------------------
?>

<?php 
//------------3.1.PHP CHECK GET REQUEST --------------------------

if (isset($_GET['search'])) {
    //------------3.2.FETCH DATA IF FILTER IS SET--------------------------
    $query = "SELECT * from royhat where tovar_nomi LIKE '%$_GET[search]%'";
    $result = mysqli_query($conn, $query);
    while ($rows = mysqli_fetch_assoc($result)) {
        echo "<tr>";
        echo "<td>$rows[tovar_id]</td>";
        echo "<td>$rows[tovar_nomi]</td>";
        echo "<td>$rows[tovar_narxi]</td>";
        echo "</tr>";
    }
}else{
    //------------3.3.FETCH DATA IF FILTER IS NOT SET--------------------------
    while ($rows = mysqli_fetch_assoc($result)) {
        echo "<tr>";
        echo "<td>$rows[tovar_id]</td>";
        echo "<td>$rows[tovar_nomi]</td>";
        echo "<td>$rows[tovar_narxi]</td>";
        echo "</tr>";
    }
}
?>


</body>
</html>


    3.Всё. В итоге что получилось. При открытии 002.php
    62b327755b82f453877343.png
    Если мы вносим какие то данные в поле поиска, сразу же появятся выбранные строки:
    62b327c073e34286859652.png
    4.В идеале для меня нужно было, чтобы при первой открытии (до отправки GET запроса) показалась вся таблица.
    5.Маловажная инфа: CSS код, который находится у меня в "style.css" файле:
    h2{
    font-size: 36px;
}
ul>li, ol>li{font-family: monospace;} h2{width:300px;}
.article{
    margin-bottom: 10px;
    font-family: "Bookman Old Style";
    font-weight: bold;
    font-size: 16px;
    width: 40%;
}
.article:hover, ul>li:hover, ol>li:hover, textarea:hover{
    background-color: black; color: greenyellow;
}
.article:hover code, code:hover{color:white;background-color: darkred;}
code, h2{
    font-family: monospace;
    background-color: hsl(178, 76%, 65%);
}
textarea{
    width:500px; max-width:600px;
    height:140px; max-height:450px; min-height:50px; font-family: monospace; font-weight: 800;
}

.pic{
    max-width: 40%;
}
.pic:hover{
    box-shadow: black 0px 0px 30px;
}
table, tr, td, th{
    border: 1px black solid;
    border-collapse: collapse;
}


    Итог:
    1.вопрос решился - это хорошо. Я выяснил - это хорошо.
    2.Специалисты, кураторы - либо здесь дают плохие, нерабочие советы, не понимают вопрос, либо сам дурак неправильно выразился. В общем по пункту 2 выводы делайте сами.
    Ответ написан
    4 комментария
    4 комментария