Question

我正在尝试将 images.php 的mysql结果显示为 index.php 。点击我的类别的一个链接（由 id 命名）后，我想显示 images.php 中的值。
每个类别都有一个<div>，其标记为 id
该脚本不能很好地工作，它只显示正在加载...

$("a.load").on('click',function() {
 var id = $(this).attr('data-gallery'); 
  $.ajax({
   url: 'http://example.com/images.php?c=' + id,
   beforeSend: function() {
   $("#" + id).html("Loading...");
  },
  success: function(data) {
   $("#" + id).html(data);
  }
 });
},function() {
   var id = $(this).attr('data-gallery'); 
    $("#" + id).html("");
});

由于

[编辑]

以下是 index.php

中的HTML代码

 <section class="mainmywork" id="categories">
    <div class="container">
    <!--<h1 class="myworkheading"><p>CATEGORIES</p></h1>!-->        
    <?php
     foreach($images as $categories) {
      echo '<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12 categories">
             <a class="load" data-gallery="'.$categories["code"].'" style="cursor: pointer;"><img class="center-block" src="'.showConfigValues("img_source").'/'.$categories["photos_name"].'" alt=""></a>
              <a class="load" data-gallery="'.$categories["code"].'" style="cursor: pointer;"><h2><p>'.$categories["name"].'</p></h2></a>
            </div>
            <div id="'.$categories["code"].'">

            </div>';
     }
    ?>
    </div>
   </section>

这是 images.php

中的内容

<?php
 if(isset($_GET["c"])) {
  $gallery_code = htmlspecialchars($_GET["c"]);

  require_once 'init.php';

 $db = new DB;

  $query = "SELECT * 
       FROM photos
       INNER JOIN gallery
        ON gallery.code = photos.gallery_code AND photos.title_photo != 'y'
       WHERE photos.gallery_code = '".$gallery_code."' OR gallery.name = '".$gallery_code."'
        ORDER BY photos.id"; 

     $photos = $db->get_special($query); 
  ?>

  <div id="lk-gallery">
   <div class="wrapper">
    <main id="main" role="main" class="photo-lk">
     <?php
   if($photos[0] != '') {
    foreach($photos as $image) {
     $mask_description = $image["photos_description"];
      echo '<img src="'.showConfigValues("img_source").'/'.$image["photos_name"].'" />'; 
    }    
   } 
    else 
         { echo '<p class="inprogress">Sorry, I am working on this one!<br><a href="/#categoriesanchor">Check out my other photos</a></p>'; } 
    ?>
    </main>
   </div>
  </div>

  <div class="lk-gallery-touch">
   <div class="flexslider">
    <div class="wrapper">
     <main id="main" role="main" class="photo-lk">
   <ul class="slides">
    <?php
     if($photos[0] != '') {
      foreach($photos as $image) {
       $mask_description = $image["photos_description"];
        echo '<li><img src="'.showConfigValues("img_source").'/'.$image["photos_name"].'" /></li>'; 
      }    
     } 
      else 
          { echo '<p class="inprogress">Sorry, I am working on this one!<br><a href="/#categoriesanchor">Check out my other photos</a></p>'; } 
    ?>
     </ul> 
    </main>
   </div> 
  </div>
 </div>
 <?php 
  }
  ?>

Answer 1

试试这个：

$("a.load").on('click',function() {
  var id = $(this).data('gallery'); // use .data() method 
  var $id = '#'+id;
  $.ajax({
      url: 'http://example.com/images.php?c=' + id,
      beforeSend: function() {
          $id.html("Loading...");
      },
      success: function(data) {
         $id.html(data);
      },
      error: function(){
         $id.html("Error...");
      }
  });
});

Answer 2

根据documentation，当{2}参数超过2时，.on函数的第二个参数是一个选择器字符串，但是你已经传递了看似你想要的事件处理程序。最后一个参数应该是您的代码示例中的事件处理程序：

function() {
   var id = $(this).attr('data-gallery'); 
   $("#" + id).html("");

如果删除最后一个函数，只留下2个参数.on，则应按预期调用您的处理程序。

AJAX - 没有回报价值

2 个答案: