将 SQL 数据加载到数据表中

Question

我正在尝试将一些 mySQL 数据加载到数据表中，以便轻松进行排序和搜索等... 我希望数据采用 div 的形式，这样我就可以轻松地了解它的外观。 我有以下代码，它会导致本文底部列出的错误。

index.php

<?php
include 'includes/SQL/connect.php';
include 'includes/structure/header.php';
?>

  <script>
    $('document').ready(function() {
      $.ajax({
        url: 'includes/SQL/getData.php',
        type: 'POST',
        dataType: 'html',
        success: function(newContent) {
          $.each(newContent, function(newContent) {
            console.log(newContent);
            $('#example').append('<tr><td>' + newContent + '</td></tr>');
          })
        }
      });
    });
  </script>

  <div class="container">
    <div class="row">
      <div class="col-lg-12 posts-list" style="padding-top: 30px; padding-bottom: 35px">
        <table id="example" class="table table-striped table-bordered">
          <thead>
            <tr>
              <th>Word</th>
              <th>deff dic</th>
              <th>deff simp</th>
            </tr>
          </thead>
        </table>
      </div>
    </div>
  </div>

getdata.php

<?php
include 'connect.php';
$columns = array();

$sql = "SELECT * FROM glossary";
$res = mysqli_query($conn, $sql) or die("Error: ".mysqli_error($conn));
$dataArray = '';

while($row = mysqli_fetch_array($res) ) {
    $dataArray .= '<div class="post" id="post_'.$row["id"].'">
    <div class="single-post row generic-blockquote" style="background-color: #F1F1F1; margin-bottom: 10px;">
      <div class="col-lg-9 col-md-9 ">
        <a class="posts-title" href="blog-single.html"><h1>'.$row["Word"].'</h1></a>
        <p class="excert">
          Accounts help you do money stuff.
        </p>
        <a href="blog-single.html" class="genric-btn primary">More info</a>
      </div>
    </div>
    </div>
    ';
}

echo json_encode($dataArray);

错误

Uncaught TypeError: url.indexOf is not a function
    at jQuery.fn.init.jQuery.fn.load (jquery-3.3.1.js:9857)
    at waypoints.min.js:8
    at waypoints.min.js:8
    at waypoints.min.js:8
    at waypoints.min.js:8
jquery-3.3.1.js:489 Uncaught TypeError: Cannot use 'in' operator to search for 'length' in "<div class=\"post\" id=\"post_1\">\r\n    <div class=\"single-post row generic-blockquote\" style=\"background-color: #F1F1F1; margin-bottom: 10px;\">\r\n      <div class=\"col-lg-9 col-md-9 \">\r\n        <a class=\"posts-title\" href=\"blog-single.html\"><h1>management<\/h1><\/a>\r\n        <p class=\"excert\">\r\n          Accounts help you do money stuff.\r\n        <\/p>\r\n        <a href=\"blog-single.html\" class=\"genric-btn primary\">More info<\/a>\r\n      <\/div>\r\n    <\/div>\r\n    <\/div>\r\n    <div class=\"post\" id=\"post_2\">\r\n    <div class=\"single-post row generic-blockquote\" style=\"background-color: #F1F1F1; margin-bottom: 10px;\">\r\n      <div class=\"col-lg-9 col-md-9 \">\r\n        <a class=\"posts-title\" href=\"blog-single.html\"><h1>profit<\/h1><\/a>\r\n        <p class=\"excert\">\r\n          Accounts help you do money stuff.\r\n        <\/p>\r\n        <a href=\"blog-single.html\" class=\"genric-btn primary\">More info<\/a>\r\n      <\/div>\r\n    <\/div>\r\n    <\/div>\r\n    <div class=\"post\" id=\"post_3\">\r\n    <div class=\"single-post row generic-blockquote\" style=\"background-color: #F1F1F1; margin-bottom: 10px;\">\r\n      <div class=\"col-lg-9 col-md-9 \">\r\n        <a class=\"posts-title\" href=\"blog-single.html\"><h1>marketing<\/h1><\/a>\r\n        <p class=\"excert\">\r\n          Accounts help you do money stuff.\r\n        <\/p>\r\n        <a href=\"blog-single.html\" class=\"genric-btn primary\">More info<\/a>\r\n      <\/div>\r\n    <\/div>\r\n    <\/div>\r\n    "
    at isArrayLike (jquery-3.3.1.js:489)
    at Function.each (jquery-3.3.1.js:351)
    at Object.success (test.php:62)
    at fire (jquery-3.3.1.js:3268)
    at Object.fireWith [as resolveWith] (jquery-3.3.1.js:3398)
    at done (jquery-3.3.1.js:9305)
    at XMLHttpRequest.<anonymous> (jquery-3.3.1.js:9548)

Answer 1

您基本上想要做的是在（大）文本字符串（您从 AJAX 请求收到的 HTML）上使用 jQuery 的 $.each。错误告诉你，它不能迭代它，因为它不是object or array：

at isArrayLike (jquery-3.3.1.js:489)
at Function.each (jquery-3.3.1.js:351)

有几种方法可以解决这个问题

1. 删除$.each() 并通过$('#example').html(newContent) 粘贴HTML。如果您仍然需要<tr><td>，只需将其添加到getData.php 的while 循环中的字符串中
2. 创建一个数组而不是字符串并将新字符串附加到该数组。那么你可能可以继续使用$.each()。 （别忘了设置dataType : 'json'）

例子：

getData.php

$dataArray = array();
while(...){
    $dataArray[] = 'big html string';
} 

print_r(json_encode($dataArray));

1. 或者只在请求中发送有用的数据，收到后制作HTML（个人喜欢）。

例子：

getData.php

$dataArray = array();
while(...){
    $subArray = array();
    $subArray['post_id'] = 1
    $subArray['post_name'] = 'My Awesome Post';
    $subArray['post_description'] = 'This is an awesome description'
    $dataArray[] = $subArray;
} 

print_r(json_encode($dataArray));

index.php

var myhtml = ''
$.each(newContent, function () {
     html += '<tr><td><div class="post" id="post_' + this.id + '"> ... </td></tr>';
}
$('#example').html(myhtml)

可能有更多方法可以做到这一点，但这应该会给你一个想法。

Answer 2

你应该试试这个。

<?php
include 'connect.php';
$columns = array();

$sql = "SELECT * FROM glossary";
$res = mysqli_query($conn, $sql) or die("Error: ".mysqli_error($conn));
$dataArray = array();

while($row = mysqli_fetch_array($res) ) {
    $dataArray[] = '<div class="post" id="post_'.$row["id"].'">
    <div class="single-post row generic-blockquote" style="background-color: #F1F1F1; margin-bottom: 10px;">
      <div class="col-lg-9 col-md-9 ">
        <a class="posts-title" href="blog-single.html"><h1>'.$row["Word"].'</h1></a>
        <p class="excert">
          Accounts help you do money stuff.
        </p>
        <a href="blog-single.html" class="genric-btn primary">More info</a>
      </div>
    </div>
    </div>
    ';
}

echo json_encode($dataArray);