20
Апр
2021

Как в JS из полученный через ajax массива собрать таблицу и вывести ее на страницу

я новичок , и не совсем понимаю как сделать задание , которое мне выдали на курсах. У меня есть два файла 1-й index.html --> сама страницу + ajax запрос и 2-й --> some.php где находится обработчик. Суть задания заключается в :

  1. Ajax запрос должен возвращать json-объект со структурой {"success":1,"results":[]}
  2. В js из полученный через ajax массива нужно собрать таблицу и вставить в страницу.

Заранее спасибо!

1-й файл index.html

<html>
<head>
         <style  type="text/css" media="screen"> 
        ul  li { 
        list-style-type:none; 
        } 
     </style>
</head>
<meta charset="utf-8">
<script
              src="https://code.jquery.com/jquery-3.6.0.min.js"
              integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
              crossorigin="anonymous"></script>
<body>
    <table border="1" width="30%" cellpadding="5">
    <input type="text" name= "bdate" class="bdate"> <br>
    <button class="otpravka">Poisk</button>



<script>
    $(document).ready (function () {
            $("button.otpravka").on("click", function() {
                var bdateValue =  $('input.bdate').val();


                $.ajax({                                                                                
                  method: "POST",
                  url: "some.php",
                  dataType: 'json',
                  data: { bdate:bdateValue},
                  success: function(response)
            {

                    
                    alert(response);

           }
                })


                 $('input.bdate').val(); 


            })
    })



</script>

</body>
</html>

2-й файл some.php

<?php 

    $name=$_POST['bdate'];

                $connection = new PDO('mysql:host=localhost;dbname=fp;charset=utf8','root');
                $sql = ("SELECT * FROM users WHERE firt_name LIKE :n OR last_name LIKE :n1 OR bdate LIKE :n2 ");
                $query = $connection->prepare($sql);
                $query->execute(["n"=>$name,"n1"=>$name,"n2"=>$name]);
            while($row = $query->fetch(PDO::FETCH_ASSOC))
{
  $output = '
    <tr>
      <td>'.$row['firt_name'].'</td>
      <td>'.$row['last_name'].'</td>
      <td>'.$row['bdate'].'</td>
    </tr>'; 
}
echo json_encode($output);

Источник: https://ru.stackoverflow.com/questions/1272306/%D0%9A%D0%B0%D0%BA-%D0%B2-js-%D0%B8%D0%B7-%D0%BF%D0%BE%D0%BB%D1%83%D1%87%D0%B5%D0%BD%D0%BD%D1%8B%D0%B9-%D1%87%D0%B5%D1%80%D0%B5%D0%B7-ajax-%D0%BC%D0%B0%D1%81%D1%81%D0%B8%D0%B2%D0%B0-%D1%81%D0%BE%D0%B1%D1%80%D0%B0%D1%82%D1%8C-%D1%82%D0%B0%D0%B1%D0%BB%D0%B8%D1%86%D1%83-%D0%B8-%D0%B2%D1%8B%D0%B2%D0%B5%D1%81%D1%82%D0%B8-%D0%B5%D0%B5-%D0%BD%D0%B0-%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8

Тебе может это понравится...

Добавить комментарий