Как загрузить больше ajax-данных, ссылающихся на ID сообщения, полученного с помощью php - PullRequest
Новая
       0

Как загрузить больше ajax-данных, ссылающихся на ID сообщения, полученного с помощью php

0 голосов
/ 12 сентября 2018

  1. У меня есть список "img_title" .'Img_title' получает через php из базы данных - динамический список. 

    +------------------------+
| img_title:             |
+========================+
| golden Retriever       |
+------------------------+
| Appenzeller Sennenhund |
+------------------------+
| German Shepard         |
+------------------------+
| Alaskan Klee Kai       |
+------------------------+
|       . . . . .        |
+------------------------+

  2. Если пользователь нажимает на "img_title"... 

    +-----------------------------+
|<b>Appenzeller Sennenhund</b>|     
+-----------------------------+

  3. ... затем должен появиться новый блок div с "img_descr" отдельно и извлеченным черезAJAX : 

    +-----------------------------+     +-----------------------------+
|   Appenzeller Sennenhund    |     |<b>Swiss: ABC123...      </b>| 
+-----------------------------+     +-----------------------------+

    ... или 

    +-----------------------------+     +-----------------------------+
|   golden Retriever          |     |<b>UK: ZYX987...         </b>|
+-----------------------------+     +-----------------------------+

Мне нужно соединение между данными php и данными ajax.

Я только знаю, как получить все описания сразу, но не знаю, как извлечь "img_title - ID: 3" (php) только с "img_descr - ID: 3" (ajax).

Я думалсобирается извлечь также «img_id» и, ссылаясь на это, ajax может получить больше данных из базы данных.

Вот мой код (без соединения img_id между php и ajax fetched data)

HTML &PHP: 

<body>

  <?php
     $db     = mysqli_connect("localhost", "root", "", "xy");
     $result = mysqli_query($db, "SELECT * FROM images");
     while ($row = mysqli_fetch_array($result))
     {
        echo "<button class='img_title'>Title: <b>" . $row['img_title'] . "</b></button><br>";
     }
   ?>

   <div id="descrs"></div>

</body>

JavaScrpit & AJAX 

 <script>
   // Get the buttons (NodeList)
   var buttons = document.querySelectorAll("button.img_title");

   for(var x=0; x < buttons.length; x++) {
     buttons[x].addEventListener('click', loadDescr);
   }

 function loadDescr(e)
 {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'ajax.php', true);

    xhr.onload = function()
    {
       if (this.status == 200)
       {
         var descrs = JSON.parse(this.responseText);

         var output = '';

         for (var i in descrs) {
           output += '<ul>' +
               '<li class="ajax_img_descr">ID: ' + descrs[i].img_descr + '</li>' +  '</ul>';
         }

         document.getElementById('descrs').innerHTML = output;
     }
   }
   xhr.send();
 }
</script>

ajax.php 

<?php
// Create Connection
$conn = mysqli_connect('localhost', 'root', '', 'xy');
$query = 'SELECT * FROM images';
// Get Result
$result = mysqli_query($conn, $query);
// Fetch Data
$users = mysqli_fetch_all($result, MYSQLI_ASSOC);
echo json_encode($users);
?>

1 Ответ

0 голосов
/ 12 сентября 2018

Поскольку вам нужно передать ID на сервер, вы должны каким-то образом хранить его в button, самый простой способ - использовать data -attribute: 

 while ($row = mysqli_fetch_array($result))
 {
    echo "<button class='img_title' data-id='" . $row['id'] . "'>Title: <b>" . $row['img_title'] . "</b></button><br>";
 }

Далее вы должны получитьэтот идентификатор данных в обработчике событий.Это можно сделать с помощью функции getAttribute: 

function loadDescr(e)
{
    var id = e.target.getAttribute('data-id');
    // console.log(id);    // for testing purposes

    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'ajax.php?id=' + id, true);

    // more codes

}

На стороне сервера ваш идентификатор доступен через $_GET['id']: 

<?php
// Create Connection
$conn = mysqli_connect('localhost', 'root', '', 'xy');
$query = 'SELECT * FROM images WHERE id = ' . $_GET['id']; // I simplified this code, but you MUST use prepared statements here to avoid sql-injection
// Get Result
$result = mysqli_query($conn, $query);
// Fetch Data
$users = mysqli_fetch_all($result, MYSQLI_ASSOC);
echo json_encode($users);
?>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...