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

问题描述：

Hi so currently I have a set of codes which dynamically creates HTML elements through AJAX using an external JSON data. When I created this, I wanted to store my data in an external file rather than in a database.

However, I now need to store them in mySQL so I was wondering how I can still dynamically create the HTML elements like this but now the data will be from mySQL instead of retrieving it from an external JSON file. I'm still quite new to this so I am really confused as to how to tackle this situation.

This is what my current code looks like:

 <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>

JSON Data:

 [  
        {  
          "team":"Team Name",
          "title":"Title",
          "filePath":"#",
          "imagePath":"image path",
          "desc":"Data Description"
        },
        {  
          "team":"Team Name",
          "title":"Title",
          "filePath":"#",
          "imagePath":"image path",
          "desc":"Data Description"
        },
        {  
          "team":"Team Name",
          "title":"Title",
          "filePath":"#",
          "imagePath":"image path",
          "desc":"Data Description"
        }
]

When I tried pulling my data using PHP and encoding it to JSON, it gave me this result and it did not create any of the HTML elements needed.

答

You can create a MySQL table like this,

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`));

Then you can use this query to insert your data,

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

After that, you can create a PHP file to pull your data and print it in JSON format,

You can give the PHP file a filename like,

CR_QuickLookData.php

With PHP code,

<?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);

Then in index.html,

<!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>

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

相关推荐