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

嗨，所以目前我有一组代码，它使用外部JSON数据通过AJAX动态创建HTML元素。当我创建这个时，我想将我的数据存储在外部文件而不是数据库中。基于mySQL数据动态创建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>

JSON数据：

[ 
     { 
      "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" 
     } 
]

当我试图使用PHP和它编码为JSON我的数据拉动，这给了我这个结果，并它没有创建任何需要的HTML元素。

来源

2017-08-03 nurul98

您可以使用PHP来从MySQL格式化数据，以JSON数据，然后在您的URL中，您可以执行类似以下操作：url：“CR/CR_Data/CR_QuickLookData.php” – 2017-08-03 04:33:29

您可以发布JSON数据样本吗？ – 2017-08-03 04:35:05

@PhilipBorbon嗨我用JSON数据更新了我的帖子 – nurul98

您可以创建一个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格式打印它，

你可以g香港专业教育学院的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);

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

来源

2017-08-03 05:11:11

@ nurul98，对不起，我错过了一个逗号，我更新了PHP代码 – 2017-08-03 05:45:31

不用担心。但是，我遇到了另一个问题，因为我无法获得所需的输出，因为它没有创建任何HTML元素。我添加了一张图片来显示我原来的帖子中的输出 – nurul98

你想让PHP写HTML吗？或者你想用JS写HTML吗？ – 2017-08-03 06:05:14

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

回答

相关问题