Вставка извлеченных данных из mysql в div с помощью вызова ajax при каждом нажатии - PullRequest
Новая
       12

Вставка извлеченных данных из mysql в div с помощью вызова ajax при каждом нажатии

0 голосов
/ 16 октября 2018

Итак, я представляю, что это довольно просто, но я не могу по-настоящему обдумать это, я довольно новичок в AJAX, так что терпите меня, я создал простой REST API для моего маленького проекта с нативным php, который получает символыинформация из базы данных MySQL, и я хочу вставлять эти данные для каждого символа при каждом щелчке ссылки, идея заключается в том, что простая страница со ссылками , и правая часть страницы - это div, который я создал для вставки этогоdata in,

Это мой код для ajax, который в настоящее время не работает 

var title = document.getElementById('charactertitle');
var desc = document.getElementById('characterdesc');
var buttonClick = document.getElementsByClassName('content-button');

buttonClick.addEventListener('click', loadCharacterInfo);

function loadCharacterInfo(e){
 e.preventDefault();
 var xhr = new XMLHttpRequest();
 xhr.open('GET','/api/characters/read.php',true);

 xhr.onload = function(){
   var characters = JSON.parse(this.responseText);

  output = '';

  for(var i in characters){
    output += characters[i].title;
  }

  title.innerHTML = output;
}
 }

  xhr.send();

, и это код для правой стороны страницы с простым div с тегами 2 p 

    <div class="flex-shrink-1">
            <div class="card bg-dark text-white">
                    <img class="card-img" src="img/charactersbg.jpg" alt="no image">
                    <div class="card-img-overlay">
                      <p class="card-title display-4" id="charactertitle"></p>
                      <p class="card-text" id="characterdesc"></p>
                    </div>
                  </div>
              </div>

Это функция чтения, которая в основном получает данные из конца базы данных, кодирует их в JSON `

include '../../config/Database.php';
include '../../models/Characters.php';

// Instantiate DB & Connect
$database = new Database();
$db = $database->connect();

// Instantiate blog post object
$chars = new Characters($db);

//Blog Post Query
$result = $chars->read();

// Check if any characters
$num = $result->rowCount();

// Check if any characters
if ($num > 0) {
   // Post array
   $chars_arr = [];
   $chars_arr['data'] = array();

   while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
       extract($row);

       $chars_item = [
           'id' => $id,
           'title' => $title,
           'description' => html_entity_decode($description)
       ];

       // Push to data
       array_push($chars_arr['data'], $chars_item);
   }

   // Turn to JSON & output
   echo json_encode($chars_arr);
} else {
    // No posts
   echo json_encode(
        ['message' => 'No posts found']
    );
}

Я протестировал функцию чтения на Postman, чтобы она работала, мне также было интересно, нужно ли мнесоздать функцию типа read_single, которая получает только одну символьную информацию, но я все еще не могу отобразить ее на div, так что я понимаю, что это главное беспокойство

В любом случае, спасибо, яn заранее за ответы, я бы хотел помочь :) `

1 Ответ

0 голосов
/ 16 октября 2018

console.log () удобно для отладки методов AJAX.

В браузерах, таких как Chrome и Firefox, вы можете открыть консоль с помощью Ctrl-shift-i 

xhr.onload = function() {
  var characters = JSON.parse(this.responseText);
  console.log(characters);

Затем вы можете прочитать консоль, чтобы увидеть, выглядит ли переменная characters так, как выожидайте этого, и если вы анализируете это правильно.

Теперь, после быстрого чтения, похоже, что сторона PHP создает многомерный массив (превращенный в объект JSON), а сторона клиента *Функция 1009 * ожидает одномерный массив.

Похоже, что если все хорошо в сценарии PHP, единственным свойством объекта Javascript characters является data, который содержит массив символов.Если никакие символы не найдены, похоже, что единственным свойством является message, которое содержит сообщение об ошибке.

т.е. на стороне PHP верхний уровень $chars_array имеет только один элемент, data.На верхнем уровне нет title и т. Д.Это второй уровень, $chars_array['data'], который содержит массив символов, каждый со свойствами, такими как title и т. Д. 

var resp = JSON.parse(xhr.responseText);
if (resp.data) {
  // resp.data should correspond to the PHP $chars_array['data']
  var characters = res.data;
  for (var i in characters) {      
    // display as you wish
  }
} else if (resp.message) {
  // e.g. This could be the 'No posts found' message.
  var msg = resp.message; // display as you wish
}
...