Question

我正在使用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”。

抱歉文字墙;我试图排除任何不相关的内容，同时仍然清楚地说明我在问什么以及我目前的解决方案是什么。

提前感谢您的帮助！

Answer 1

更详细地阅读您的问题：

您可能会让用户更难以查看此信息。

生成html内容只是为了导航DOM并提取内容以用作Javascript中的数据而没有必要（或有效） - 您可以跳过整个步骤并对返回所有图像的PHP页面进行AJAX调用一个漂亮的JSON格式的数据（或者你喜欢它）。这将简化您的整个应用程序，可能会提高性能并使数据更难以供用户查看。这是帽子戏法！

Answer 2

我不确定我的问题是什么，但我会尽力帮助你。

我猜你想从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。你只需要用它的名字查找图像。它将是独一无二的，因此您将始终获得一个结果。

不知道这是否给了你任何想法，因为我仍然无法理解你的确切问题。

$ .ajax和隐藏字段，或PHP表单数据？

2 个答案: