我正在使用 PHP 和 JQuery 构建一个轻量级管理实用程序。该实用程序的目的是允许管理员从数据库中提取图像，查看附加到每个图像的标签，并根据需要添加新标签。整体功能相当简单，应用程序以当前形式运行。
我的问题是这样的:信息应该如何在 PHP 和 JQuery 之间来回传递，特别是考虑到 Javascript 可用的所有信息对于 DOM 上的用户也是可见的？
目前，程序流程如下:index.php 查询数据库并检索与某个事件相关的所有图片的信息；该数组的格式设置为在图像轮播中显示，并且还作为页面底部的隐藏表格包含在内(这是我知道的错误)。 index.php 需要 display.html，它向用户显示轮播和标记表单。每当用户单击“更新”按钮时，就会触发 ajax 查询，序列化更新表单中的信息并将其发送到 updateTags.php，后者执行更新查询并添加标签。
对于这个项目，我使用 Owl Carousel使用延迟加载来显示图像。
这是index.php
<?php
// Displays picture data as HTML in order to allow javascript to traverse
// Rows are indexed using the image's location in the array, which will
// correspond to that image's location in the carousel
function FormatAsHTMLTable ($data) {
$dataTable = "<table id='data' class='table'><tbody>";
foreach ($data as $i => $member) {
$dataRow = "<tr class='" . $i . "'>";
foreach ($member as $key => $value) {
$dataRow .= "<td class='" . $key . "'>";
if (is_array($value)) {
$i = 0;
foreach ($value as $item) {
if (!$i++) {
$dataRow .= $item;
} else {
$dataRow .= ", " . $item;
}
}
} else {
$dataRow .= $value;
}
$dataRow .= "</td>";
}
$dataRow .= "</tr>";
$dataTable .= $dataRow;
}
$dataTable .= "</tbody></table>";
return $dataTable;
}
function FormatAsCarouselData ($data) {
// Formats array for display in the owl carousel
return $carouselData;
}
// This array would normally be retrieved from a query to the mySQL db;
// this is provided as an example
$pics = array(
array(
"id" => 5,
"tags" => array("foo", "bar"),
"url" => "img/demo-slides/owl1.jpg"
),
array(
"id" => 6,
"tags" => array("boo", "ya"),
"url" => "img/demo-slides/owl2.jpg"
),
array(
"id" => 7,
"tags" => array("I", "am", "second"),
"url" => "img/demo-slides/owl3.jpg"
),
array(
"id" => 8,
"tags" => array("bird", "is", "word"),
"url" => "img/demo-slides/owl4.jpg"
),
...
);
$dataTable = FormatAsHTMLTable ($pics);
$carouselData = FormatAsCarouselData ($pics);
require('display.html');
?>
这是 display.html，因为它会在插入数据表和轮播图像后查看:
<html>
<body>
...
<div class="row">
<div class="col">
<div id="imageContainer" class="owl-carousel">
<div class='item'>
<img class='lazyOwl' data-src='img/demo-slides/owl1.jpg' alt='Photo # 0'>
</div>
<div class='item'>
<img class='lazyOwl' data-src='img/demo-slides/owl2.jpg' alt='Photo # 1'>
</div>
<div class='item'>
<img class='lazyOwl' data-src='img/demo-slides/owl3.jpg' alt='Photo # 2'>
</div>
<div class='item'>
<img class='lazyOwl' data-src='img/demo-slides/owl4.jpg' alt='Photo # 3'>
</div>
...
</div>
</div>
<form method="post" action="lib/updateTags.php" id="updateForm">
<div class="col">
<input type="text" name="tag1" id="tag1" placeholder="Tag 1"/>
<br>
<input type="text" name="tag2" id="tag2" placeholder="Tag 2"/>
<br>
<input type="text" name="tag3" id="tag3" placeholder="Tag 3"/>
<br>
<input type="text" name="tag4" id="tag4" placeholder="Tag 4"/>
<br>
<input type="text" name="tag5" id="tag5" placeholder="Tag 5"/>
<br>
<button type="submit" id="updateButton">Update</button>
</div>
</div>
<input type="hidden" id="imageIdInput" name="imageIdInput" value="">
</form>
<table id='data' class='table' style='display:none'>
<tbody>
<tr class='0'>
<td class='num'>0</td><td class='id'>5</td><td class='tags'>foo, bar</td><td class='url'>img/demo-slides/owl1.jpg</td>
</tr>
<tr class='1'>
<td class='num'>1</td><td class='id'>6</td><td class='tags'>boo, ya</td><td class='url'>img/demo-slides/owl2.jpg</td>
</tr>
<tr class='2'>
<td class='num'>2</td><td class='id'>7</td><td class='tags'>I, am, second</td><td class='url'>img/demo-slides/owl3.jpg</td>
</tr>
<tr class='3'>
<td class='num'>3</td><td class='id'>8</td><td class='tags'>bird, is, word</td><td class='url'>img/demo-slides/owl4.jpg</td>
</tr>
...
</tbody>
</table>
</body>
</html>
显示.js:
$(document).ready(function() {
var updateForm = $("#updateForm"),
data = $("#data");
$("#imageContainer").owlCarousel({
items : 1,
lazyLoad : true,
navigation : true,
pagination : false,
afterMove : afterMove,
afterInit : afterInit
});
owl = $("#imageContainer").data('owlCarousel');
var form = $('#updateForm');
form.submit(function (e) {
e.preventDefault();
$.ajax( {
type: "POST",
url: form.attr( 'action' ),
data: form.serialize(),
success: function( response ) {
console.log( response );
}
} );
});
function updateInfo(that){
// Get the current position in the carousel
var current = parseInt(that.owl.currentItem);
// Get image information from data table based on carousel location
var num = data.find("." + current).find(".num").html(),
id = data.find("." + current).find(".id").html();
//Display image information to user
// update hidden form input
imageIdInput.value=id;
console.log("imageIdInput updated to: " + id);
}
function afterInit(){ // Called once the carousel is set up
console.log("init callback called");
var that = this;
updateInfo(that);
}
function afterMove(){ // Called when the carousel moves
console.log("Carousel moved");
var that = this;
updateInfo(that);
}
});
很明显，将所有图像信息显示为 HTML 表格是错误的方法。即使显示设置为无，快速浏览一下页面源代码也会显示所有这些信息。因为这是一个管理实用程序，永远不会面向客户，所以目前有效；但它很业余而且很老套。所以我的问题是:如何向 JQuery 提供特定于图像的信息，而不使其对用户完全透明？或者至少不使用单独的 html 表？我的假设是每次轮播移动时都会涉及一个单独的 $.ajax 调用；但即便如此，我仍然需要保留一些识别信息，以便准确地知道我正在查看哪个图像。
这个项目有几个独特的考虑因素，这使得我特别难以弄清楚:1)不能假设图像 ID 是连续的；因此，我无法从图像在轮播中的位置推断出图像 ID。 2)有时向用户显示图像的子集，而不是每个相关图像；在这种情况下，仍然有必要让用户知道他相对于全套图像的位置(例如，全套图像中可能有 8000 张图像；正在向用户显示 1000-2000 张图像；用户必须仍然显示与全套相关的正确图像编号，例如“图像# 1500”)。
抱歉文字墙；我试图排除任何不相关的内容，同时仍然明确我要问的内容以及我当前的解决方案是什么。
预先感谢您的帮助!
最佳答案
更详细地阅读您的问题后:
您可以让用户更难看到此信息。
没有必要(或高效)生成 html 内容只是为了导航 DOM 并提取内容以用作 Javascript 中的数据 - 您可以跳过整个步骤，并通过 AJAX 调用返回所有图像的 PHP 页面数据采用良好的 JSON 格式(或者您想要的任何格式)。这将简化您的整个应用程序，可能会提高性能，并使用户更难以查看数据。这真是帽子戏法!
关于javascript - $.ajax 和隐藏字段，还是 PHP 表单数据？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22204365/