noobie web-builder，关于构建 html 库 [关闭]答案

【问题标题】：noobie web-builder, about building html gallery [closed]noobie web-builder，关于构建 html 库 [关闭]
【发布时间】：2014-06-13 16:27:09
【问题描述】：

我几天前问过，我意识到我的问题不够清楚。所以我再问一次更清楚。我即将完成一个本地业务网站，我的网站基于 bootstrap 3，还有一点 jquery。我现在正在处理网络目录。我正在寻找动态的方式来每次显示 20 种产品，无需制作每 20 个产品都有一个新的 html 页面。我不是在寻找它的代码，我只是在向你们寻求方向，因为我似乎找不到任何好主意，我必须在星期四之前完成它。谢谢你们。！（：

【问题讨论】：

从一个菜鸟到另一个菜鸟 - 我很同情。您的 ISP 可能可以让您访问 MySQL 数据库，因此您需要了解 Ajax 和 PHP 才能将信息发回。以下是我使用过的几页，它们可能会给您一些帮助以帮助您入门。 - sites.google.com/site/timspqr/home/programs/javascript-code/… ///// HTML 页面上的 PHP sites.google.com/site/timspqr/home/programs/php/… /// 用于制作 json 数组的服务器端代码 sites.google.com/site/timspqr/home/programs/php/make-json-array
我可以制作对象的静态数据库，然后使用 php 和/或 ajax 显示吗？ :D
是的，您可以在服务器上创建一个文件并使用 ajax 读取该文件。
php 文件？还是别的什么？
api.jquery.com/jquery.ajax - xml、html、脚本、json、jsonp、文本。

标签： css web gallery helpers catalog

【解决方案1】：

根据您背后的代码，我建议为您的产品页面构建一个类（也许一个简单的 PHP 文件也适用于您的情况。如果对您的项目没有更深入的了解，我只能猜测......）

希望对你有帮助。

编辑：如果您使用 jquery，则很容易实现 AJAX 来为您的页面动态重新加载内容。

【讨论】：

什么是 AJAX？在这里它：www acol co il
AJAX 代表 Asynchronus Javascript And XML，用于异步加载数据（顾名思义）。这意味着您不必重新加载整个页面或站点来更改其内容。相反，您可以使用 AJAX 请求。如果您以前从未使用过它，那么使用您选择的搜索引擎查找它并阅读相关文章可能会更容易......您可以通过这种方式更轻松地获取信息，因为您知道您正在寻找什么。
它正在从某个数据库加载内容？ AJAX 是服务器端还是客户端？谢谢（：以及您如何看待您的网站？我知道它可能不是您原来的语言，但设计如何？
AJAX 是客户端的，但您需要服务器端的设置，因为您会从服务器获得响应。如果我能帮助你，如果你支持我的回答，我会很高兴；）。关于您的设计：即使不是要在此处发布的问题...看起来很简单也很好，即使我会让它变得不同...“简单是复杂的终极形式” - leonardo da vinci
它告诉我我可以投票，因为我的声誉哈哈，我能做些什么来增加它？我真的很想投票给你..谢谢（：

【解决方案2】：

好的，您需要将两个文件移动到您的服务器。

第一个是执行“工作”的 .html 文件 - 它在下面。重点是：

带有典型标题的标准 HTML 文件，其中包含常用样式、标题和指向 Google CDN 库的链接。
div 内的按钮 - div 允许按钮四处移动。
包含数据的 div (.putmehere)。
底部的 javascript - 所有页面都应具有的“就绪功能”，“.on('click'” 启动 ajax 调用，以及 ajax 调用。

presidents.txt 文件只是我在互联网上找到的所有总统的列表。你必须让一些东西更有条理，你必须想办法解析它。

这两个文件都应该移动到您服务器的同一子目录中。然后在您的浏览器中，输入 html 文件的名称，按 Enter 即可开始使用！

<!DOCTYPE html>
<html>
<head>

<title>text file read</title>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<style>

.buttonholder {
          width: 150px;
          height: 40px;
          margin: 10px auto;
}
.putmehere {
  width: 400px;
  background-color: lightblue;
  margin: 10px auto;
}
</style>

</head>
<body>

<div class='buttonholder'>
  <button id='clickme'>CLICK ME</button>
</div>

<div class='putmehere'></div>

<script>
$(document).ready(function(){
      $('#clickme').on('click', function(){
                                           $.ajax({
                                                   url: "presidents.txt",
                                              dataType: "text"
                                                   })
                                                     .done(function(data){
                                                                          console.log( data );
                                                                          $('.putmehere').html( data );
                                                                          });
                                                    });//end ajax
                             });//end ready function

</script>
</body>
</html>

【讨论】：

哇，谢谢！我仍然有点难以理解代码大声笑.. 但我希望能弄清楚，你有 Skype 吗？我只是想更好地理解你的工作：D 谢谢！