1
我正在構建一個使用PHP和JQuery的輕量級管理實用程序。該實用程序的目的是允許管理員從數據庫中提取圖像，查看附加到每個圖像的標籤，並根據需要添加新標籤。整體功能非常簡單，應用程序以當前形式工作。
我的問題是這樣的：應該如何在PHP與JQuery之間來回傳遞信息，特別是考慮到Javascript中可用的所有信息對用戶來說在DOM上也是可見的？
目前，程序流程如下：index.php查詢數據庫並檢索與某個事件相關的所有圖片的信息;該數組被格式化以顯示在圖像輪播中，並且還被包含在頁面底部的隱藏表格中（這是我所知道的錯誤）。 index.php需要display.html，它向用戶顯示傳送帶和標記表單。每當用戶點擊「更新」按鈕，ajax查詢就會觸發，將更新表單中的信息序列化併發送到updateTags.php，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;用戶仍然必須將顯示與全套相關的適當圖像編號，例如「圖像＃1500」）。
對不起，文本的牆;我試圖排除任何不相關的東西，同時仍然清楚說明我在問什麼，以及我目前的解決方案是什麼。
在此先感謝您的幫助！
感謝張貼在堆棧溢出。您可以通過塑造您的問題文字來幫助我們，以便我們輕鬆找到主要問題。請把它分開一點，這樣問題就更清楚了。感謝並享受 – Kristian
如果您想要向有權訪問管理工具的人隱藏此信息，並且知道如何查看源以查找信息，則不需要使用JavaScript - 將其保留在服務器上。 – JohnnyFaldo
@克里斯蒂安，謝謝！編輯希望能夠使一般問題更加清晰。 –