我正在使用PHP和JQuery构建一个轻量级的管理实用程序。该实用程序的目的是允许管理员从数据库中提取图像，查看附加到每个图像的标记，并根据需要添加新标记。整体功能相当简单，应用程序以其当前形式工作。
我的问题是这个：如何在PHP和JQuery之间来回传递信息，特别是考虑到Javascript可用的所有信息对DOM上的用户也是可见的？
目前，程序流程如下：index.php查询db并检索与某个事件相关的所有图片的信息;数组被格式化以显示在图像轮播中，并且还包含在页面底部的隐藏表中（这是我所知道的错误）。 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>
display.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;用户仍然必须显示与整套相关的正确图像编号，例如“Image＃1500”。
抱歉文字墙;我试图排除任何不相关的内容，同时仍然清楚地说明我在问什么以及我目前的解决方案是什么。
提前感谢您的帮助！
答案 0 :(得分：1)
更详细地阅读您的问题：
您可能会让用户更难以查看此信息。
生成html内容只是为了导航DOM并提取内容以用作Javascript中的数据而没有必要（或有效） - 您可以跳过整个步骤并对返回所有图像的PHP页面进行AJAX调用一个漂亮的JSON格式的数据（或者你喜欢它）。这将简化您的整个应用程序，可能会提高性能并使数据更难以供用户查看。这是帽子戏法！
答案 1 :(得分：0)
我不确定我的问题是什么，但我会尽力帮助你。
我猜你想从jquery发送有关特定图像的信息 - ＆gt; php ..但你不希望像图像ID等暴露的东西。
有一些方法可以在不显示DOM信息的情况下完成此任务，但是当发出ajax请求时，精明的用户仍然可以看到您发送给php的哪些参数查看开发人员面板。
如果我想让它不那么明显我可以将这些东西存储在javascript中的数组中.. IE ..
/* build this array when you get your json response.
store image name with its ID, but dont display on page.
then when user clicks a picture you can look up the id in the array */
var elems = [{'test.jpg':1}, {'test2.jpg':2}];
您还可以使用jquerys数据方法将任意信息存储在任何元素中
https://api.jquery.com/jQuery.data/
您也可以将图像名称设为唯一索引。那么你甚至不需要使用ID。你只需要用它的名字查找图像。它将是独一无二的，因此您将始终获得一个结果。
不知道这是否给了你任何想法，因为我仍然无法理解你的确切问题。