个人中心
gpt4 book ai didi

javascript - $.ajax 和隐藏字段，还是 PHP 表单数据？

转载 作者：行者123 更新时间：2023-11-28 01:30:19 25 4
gpt4 key购买 nike

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

25 4 0
文章推荐： javascript - Angular UI-router 深度路由
文章推荐： javascript - AngularJS 在 JSON 文件上嵌套 ng-repeat 和 ng-if
文章推荐： javascript - 尝试开发绘画程序
文章推荐： html - 在 css 中使用翻译属性时文本变得模糊
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com