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)

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

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

示例：

getData.php

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

print_r(json_encode($dataArray));

或者仅发送请求中的有用数据，并在收到HTML时制作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);

将SQL数据加载到数据表中

`index.php`

`getdata.php`

错误

2 个答案: