Javascript $.ajax和隐藏字段，还是PHP表单数据？
我正在使用PHP和JQuery构建一个轻量级管理实用程序。该实用程序的目的是允许管理员从数据库中提取图像，查看附加到每个图像的标记，并根据需要添加新标记。整个功能相当简单，应用程序以当前的形式运行 我的问题是：如何在PHP和JQuery之间来回传递信息，特别是考虑到用户在DOM上也可以看到Javascript可用的所有信息这一事实 目前，程序流程是这样的：index.php查询数据库并检索与某个事件相关的所有图片的信息；该数组被格式化以显示在图像旋转木马中，并且作为隐藏表包含在页面底部（我知道这是错误的）。index.php需要display.html，它向用户显示旋转木马和标记表单。每当用户单击“更新”按钮时，就会触发ajax查询，将更新表单中的信息序列化并发送到updateTags.php，后者执行更新查询并添加标记 对于这个项目，我使用惰性加载来显示图像 下面是index.phpJavascript $.ajax和隐藏字段，还是PHP表单数据？,javascript,php,jquery,html,ajax,Javascript,Php,Jquery,Html,Ajax,我正在使用PHP和JQuery构建一个轻量级管理实用程序。该实用程序的目的是允许管理员从数据库中提取图像，查看附加到每个图像的标记，并根据需要添加新标记。整个功能相当简单，应用程序以当前的形式运行 我的问题是：如何在PHP和JQuery之间来回传递信息，特别是考虑到用户在DOM上也可以看到Javascript可用的所有信息这一事实 目前，程序流程是这样的：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');
?>
提前感谢您的帮助 我不确定我完全确定你的问题是什么。。但我会尽力帮助你 我猜您想从jquery->php发送关于特定图像的信息。。但是你不想让照片等暴露出来 有很多方法可以在不显示DOM信息的情况下实现这一点，但是当发出ajax请求时，精明的用户仍然可以通过查看开发人员面板看到您发送给php的参数 如果我想让它不那么明显，我可能会用javascript将这些东西存储在一个数组中。。 即 您还可以使用jquerys数据方法在任何元素中存储任意信息 您也可以将图像名称作为唯一索引。然后你甚至不需要使用ID。你只需要根据图像的名称查找它。它将是唯一的，因此您将始终得到一个结果
我不知道这是否给了你一些想法，因为我在理解你的确切问题时仍然有点困难。在更详细地阅读你的问题后： 您可能会使用户更难查看此信息
仅仅为了在DOM中导航并提取内容作为Javascript中的数据使用而生成html内容是不必要的（或高效的），您可以跳过整个步骤，对PHP页面进行AJAX调用，该页面以漂亮的JSON格式返回所有图像数据（或以您喜欢的方式返回）。这将简化整个应用程序，可能会提高性能，同时也会使用户更难查看数据。那是帽子戏法 感谢您发布关于堆栈溢出的帖子。您可以帮助我们塑造您的问题文本，以便我们能够轻松找到主要问题。请把它分开一点，这样问题就更清楚了。感谢并享受如果您试图对有权访问您的管理工具并知道如何查看源代码以查找信息的人隐藏此信息，您不想使用javascript-将其保留在服务器上。@Kristian，谢谢！编辑的目的是希望让一般问题更清楚一点。@JohnnyFaldo，我想可能是这样的。但是Javascript必须在每个图像上维护至少一条标识信息，否则就无法让服务器知道要编辑哪个图像。@BrentKlein已经给出了答案这肯定很有帮助，尤其是构建包含这些信息的Javascript数组的想法。这种方法所需要的一个区别是使用ajax提取所有图像，而不是允许服务器重新加载页面并将相关图像推送到页面上。当我使用ajax向旋转木马动态添加数千张图像时，浏览器的性能会开始下降吗？谢谢你的回答！为了澄清这一点，首先加载没有图像的页面，然后使用ajax将图像加载到旋转木马中应该是有效的？通常有成千上万的图像；我担心在浏览器上加载会导致性能问题。但是这种方法实际上可以很好地工作？在旋转木马中一次只能有一个，并且旋转木马被设置为在图像滚动时延迟加载图像
<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>
$(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);
}
});
/* 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}];