时间戳

首页 > 解决方案 > 在每次点击时使用 ajax 调用将从 mysql 获取的数据插入 div

php - 在每次点击时使用 ajax 调用将从 mysql 获取的数据插入 div

问题描述

所以，我想这很简单，但我无法真正理解它，我对 AJAX 很陌生，所以请耐心等待，我为我的小项目创建了简单的 REST API，它使用本地 php 从 MySQL 获取字符信息数据库，我想在每次单击链接时为每个字符插入该数据，想法是这个 带有链接的简单页面，页面的右侧是我创建的用于插入该数据的 div，

这是我目前无法使用的 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();

这是页面右侧的代码，带有 2 个 p 标签的简单 div

    <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 函数，所以它可以工作，我也想知道我是否需要创建 read_single 类型的函数，它只获取一个字符信息，但我仍然不能真正在 div 上显示它，所以弄清楚这是主要担心

无论如何，提前感谢您的回答，我希望得到一些帮助:)`

标签： phphtmlmysqlajaxfetch

解决方案

console.log() 对于调试 AJAX 方法很方便。

在 Chrome 和 Firefox 等浏览器中，您可以使用 Ctrl-shift-i 打开控制台

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

然后，您可以阅读控制台以查看characters变量是否符合您的预期，以及您是否正确解析它。

现在，从快速阅读看来，PHP 端正在创建一个多维数组（转换为 JSON 对象），而客户端loadCharacterInfo函数需要一个一维数组。

看来，如果 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
}

推荐阅读