dongrang2140 2017-08-03 04:22
浏览 64
已采纳

基于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.

enter image description here

  • 写回答

1条回答 默认 最新

  • douchixu3686 2017-08-03 05:11
    关注

    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>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥20 对D盘进行分盘之前没有将visual studio2022卸载掉,现在该如何下载回来
  • ¥15 完成虚拟机环境配置,还有安装kettle
  • ¥15 2024年全国大学生数据分析大赛A题:直播带货与电商产品的大数据分析 问题5. 请设计一份优惠券的投放策略,需要考虑优惠券的数量、优惠券的金额、投放时间段和投放商品种类等因素。求具体的python代码
  • ¥15 有人会搭建生鲜配送自营+平台的管理系统吗
  • ¥15 用matlab写代码
  • ¥30 motoradmin系统的多对多配置
  • ¥15 求组态王串口自定义通信配置方法或代码?
  • ¥15 实验 :UML2.0 结构建模
  • ¥20 用vivado写数字逻辑实验报告撰写,FPGA实验
  • ¥15 为什么shp文件会有这种小方块?