个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
您好，目前我有一组代码可以使用外部 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>
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 元素。
最佳答案
你可以像这样创建一个 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);
然后在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>
关于php - 基于 mySQL 数据动态创建 HTML 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45474770/
26
4
0
目前我正在构建相当大的网络系统，我需要强大的 SQL 数据库解决方案。我选择 Mysql 而不是 Postgres，因为一些任务需要只读(MyISAM 引擎)而其他任务需要大量写入(InnoDB)。
我在 mysql 中使用如下命令。当它显示表格数据时，它被格式化为一个非常干净的表格，间距均匀且 |作为列分隔符。 SELECT * FROM TABLE_NAME; 当我从 CLI 运行命令时，如下
我知道这个问题之前已经被问过好几次了，我已经解决了很多问题，但到目前为止没有任何效果。 MySQL 试图将自身安装到的目录 (usr/local/mysql) 肯定有问题。关于我的错误的奇怪之处在于我
以下是我的 SQL 数据结构，我正在尝试如下两个查询: Select Wrk_ID, Wrk_LastName, Skill_Desc from Worker, Skill where
我们有一个本地 mysql 服务器(不在公共(public)域上)，并希望将该服务器复制到我们拥有的 google 云 sql 实例。我的问题是:1.这可能吗？2.我们的本地服务器只能在本地网络上访问
我有一个表(test_table)，其中一些字段值(例如字段 A、B 和 C)是从外部应用程序插入的，还有一个字段(字段 D)，我想从现有表(store_table)插入其值，但在插入前者(A、B 和
我想创建一个 AWS RDS 实例，然后使用 terraform 管理数据库用户。因此，首先，我创建了一个 RDS 实例，然后使用创建的 RDS 实例初始化 mysql 提供程序，以进一步将其用于用户
当用户在我的网站上注册时，他们会在我的一个数据库中创建自己的表格。该表存储用户发布的所有帖子。我还想做的是也为他们生成自己的 MySql 用户——该用户仅有权从他们的表中读取、写入和删除。 创建它应该
我有一个关于 ColdFusion 和 Mysql 的问题。我有两个表:PRODUCT 和 PRODUCT_CAT。我想列出包含一些标记为:IS_EXTRANET=1 的特殊产品的类别。所以我写了这个
我想获取 recipes_id 列的值，以获取包含 ingredient_id 的 2,17 和 26 条目的值。 假设 ingredient_id 2 丢失则不获取记录。 我已经尝试过 IN 运算符
在 Ubuntu 中，我通常安装两者，但 MySQL 的客户端和服务器之间有什么区别。 作为奖励，当一个新语句提到它需要 MySQL 5.x 时，它是指客户端、服务器还是两者兼而有之。例如这个链接ht
我重新访问了我的数据库并注意到我有一些 INT 类型的主键。 这还不够独特，所以我想我会有一个指导。 我来自微软 sql 背景，在 ssms 中你可以 选择类型为“uniqeidentifier”并自
我的系统上有 MySQL，我正在尝试确定它是 Oracle MySQL 还是 MySQL。 Oracle MySQL 有区别吗: http://www.oracle.com/us/products/m
我是在生产 MySQL 中运行的应用程序的新维护者。之前的维护者已经离开，留下的文档很少，而且联系不上了。 我面临的问题是执行以下请求大约需要 10 秒: SELECT COUNT(*) FROM `
我有两个位于不同机器上的 MySQL 数据库。我想自动将数据从一台服务器传输到另一台服务器。比方说，我希望每天早上 4:00 进行数据传输。 可以吗？是否有任何 MySQL 内置功能可以让我们做到这一
有什么方法可以使用 jdbc 查询位于 mysql 根目录之外的目录中的 mysql 表，还是必须将它们移动到 mysql 根目录内的数据库文件夹中？我在 Google 上搜索时没有找到任何东西。 最
我在 mysql 数据库中有两个表。成员和 ClassNumbers。两个表都有一个付费年份字段，都有一个代码字段。我想用代码数字表中的值更新成员表中的付费年份，其中成员中的代码与 ClassNumb
情况:我有 2 台服务器，其中一台当前托管一个实时 WordPress 站点，我希望能够将该站点转移到另一台服务器，以防第一台服务器出现故障。传输源文件很容易；传输数据库是我需要弄清楚如何做的。两台服
Phpmyadmin 有一个功能是“复制数据库到”..有没有mysql查询来写这个函数？类似于将 db A 复制到新的 db B。 最佳答案 首先创建复制数据库: CREATE DATABASE du
我有一个使用 mySQL 作为后端的库存软件。我已经在我的计算机上对其进行了测试，并且运行良好。 当我在计算机上安装我的软件时，我必须执行以下步骤: 安装 mySQL 服务器 将用户名指定为“root
我是一名优秀的程序员,十分优秀！