Php 基于mySQL数据动态创建HTML元素_Php_Mysql_Json

Php 基于mySQL数据动态创建HTML元素

php mysql json

Php 基于mySQL数据动态创建HTML元素,php,mysql,json,Php,Mysql,Json,您好，现在我有一组代码，可以使用外部JSON数据通过AJAX动态创建HTML元素。当我创建它时，我希望将数据存储在外部文件中，而不是数据库中但是，我现在需要将它们存储在mySQL中，所以我想知道如何仍然可以动态创建这样的HTML元素，但是现在数据将来自mySQL，而不是从外部JSON文件检索。我对这一点还很陌生，所以我真的很困惑如何应对这种情况这就是我当前的代码： <script> $.ajax({ url : "CR/CR_Data/CR_

您好，现在我有一组代码，可以使用外部JSON数据通过AJAX动态创建HTML元素。当我创建它时，我希望将数据存储在外部文件中，而不是数据库中

但是，我现在需要将它们存储在mySQL中，所以我想知道如何仍然可以动态创建这样的HTML元素，但是现在数据将来自mySQL，而不是从外部JSON文件检索。我对这一点还很陌生，所以我真的很困惑如何应对这种情况

这就是我当前的代码：

 <script>
        $.ajax({
          url : "CR/CR_Data/CR_QuickLookData.json",
          type : "post", 
          contentType:"application/json", 
          success : function(list){           
              var divCol  = "<div class='col-sm-4 col-md-4'>";
              var divWell = "<div class='well' style='position:relative'>";
              var divClose = "</div>";

              console.log(list);

                list.forEach(function(obj, index) {

                //console.log(obj); 

                var title     = "<h5>"      + obj.title    + "</h5>";
                var linkStart = "<a href='" + obj.imagePath + "' rel='lightbox' title='" + obj.title + "'>"
                var image     = "<img data-toggle='tooltip' data-placement='left' class='wellImg' title='Click to enlarge image' src='" + obj.imagePath + "'/>"
                var desc      = "<p>"       + obj.desc + "</p>";
                var linkEnd   = "</a>";

                var div = divCol    +
                divWell     +
                title       +
                linkStart        +
                image       +
                desc +
                linkEnd     +
                divClose +
                divClose;

               $("#CR").append(div); // insert the div you've just created

               })
            }
        });
      </script>

当我尝试使用PHP提取数据并将其编码为JSON时，它给出了这个结果，并且没有创建任何所需的HTML元素

您可以像这样创建一个MySQL表

CREATE TABLE `record` (
  `id` INT NOT NULL AUTO_INCREMENT,
  `team` TEXT NULL,
  `title` TEXT NULL,
  `filePath` TEXT NULL,
  `imagePath` TEXT NULL,
  `desc` TEXT NULL,
  PRIMARY KEY (`id`));

然后您可以使用此查询插入数据

INSERT INTO `record` (`team`, `title`, `filePath`, `imagePath`, `desc`) VALUES ('Team Name', 'Title', '#', 'image path', 'Data Description');

之后，您可以创建一个PHP文件来提取数据并以JSON格式打印

您可以为PHP文件提供如下文件名：

CR_QuickLookData.php

使用PHP代码

<?php

$con=mysqli_connect("localhost","my_user","my_password","my_db");
// Check connection
if (mysqli_connect_errno()){
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$sql="SELECT team,title,filePath,imagePath,`desc`  FROM record";
$result=mysqli_query($con,$sql);

$list = array();
while($row=mysqli_fetch_array($result,MYSQLI_ASSOC)){
    $list[] = array (
        'team' => $row['team'],
        'title' => $row['title'],
        'filePath' => $row['filePath'],
        'imagePath' => $row['imagePath'],
        'desc' => $row['desc']
    );
}

mysqli_free_result($result);
mysqli_close($con);


echo json_encode($list);

您可以使用PHP将您的数据从MySQL格式化为JSON数据，然后在您的URL中，您可以执行如下操作：URL:“CR/CR_data/CR_QuickLookData.PHP”您可以发布JSON数据的示例吗？@PhilipBorbon Hi我已经用JSON更新了我的帖子data@PhilipBorbon当我用PHP格式化它时，JSON数据保存到哪里？您可以将数据保存到MySQL数据库中，然后可以使用PHP从MySQL查询/拉取数据database@nurul98，很抱歉，我漏掉了一个逗号，我更新了PHP代码，不用担心。但是，我遇到了另一个问题，因为它没有创建任何HTML元素，所以无法获得所需的输出。我在我的原始帖子中添加了一张图片来显示输出您希望PHP编写HTML还是希望使用JS编写HTML？我希望使用JS编写HTML，就像使用外部JSON数据一样如果您仍然希望使用JS脚本，您将需要两个页面，一个包含JS脚本的页面，和另一个页面来提供JSON数据
<?php

$con=mysqli_connect("localhost","my_user","my_password","my_db");
// Check connection
if (mysqli_connect_errno()){
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$sql="SELECT team,title,filePath,imagePath,`desc`  FROM record";
$result=mysqli_query($con,$sql);

$list = array();
while($row=mysqli_fetch_array($result,MYSQLI_ASSOC)){
    $list[] = array (
        'team' => $row['team'],
        'title' => $row['title'],
        'filePath' => $row['filePath'],
        'imagePath' => $row['imagePath'],
        'desc' => $row['desc']
    );
}

mysqli_free_result($result);
mysqli_close($con);


echo json_encode($list);

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <div id="CR"></div>
    <script>
        $(window).ready(function(e) {
            $.ajax({
                url : "CR_QuickLookData.php",
                type : "post", 
                dataType: "json",
                success : function(list){           
                    var divCol  = "<div class='col-sm-4 col-md-4'>";
                    var divWell = "<div class='well' style='position:relative'>";
                    var divClose = "</div>";

                    list.forEach(function(obj, index) {
                        var title     = "<h5>"      + obj.title    + "</h5>";
                        var linkStart = "<a href='" + obj.imagePath + "' rel='lightbox' title='" + obj.title + "'>"
                        var image     = "<img data-toggle='tooltip' data-placement='left' class='wellImg' title='Click to enlarge image' src='" + obj.imagePath + "'/>"
                        var desc      = "<p>"       + obj.desc + "</p>";
                        var linkEnd   = "</a>";

                        var div = divCol    +
                        divWell     +
                        title       +
                        linkStart        +
                        image       +
                        desc +
                        linkEnd     +
                        divClose +
                        divClose;

                        $("#CR").append(div); // insert the div you've just created
                    });
                }
            });
        });
    </script>
</body>
</html>