如何将json数据传递到jquery data()或data-caption,data-image,data-any?

时间:2015-10-09 07:25:31

标签: php jquery html json ajax

这是我的json,ajax去的地方。

 <div id="pic"></div>  

这是我的模态,当我通过#pic上附加的html点击图像时,模态将显示点击的图像......

<div class="modal fade" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title" id="image-gallery-title"></h4>
        </div>
        <div class="modal-body">
            <img id="image-gallery-image" class="img-responsive" src="">
        </div>
        <div class="modal-footer">

            <div class="col-md-2">
                <button type="button" class="btn btn-primary" id="show-previous-image">Previous</button>
            </div>

            <div class="col-md-8 text-justify" id="image-gallery-caption">
                This text will be overwritten by jQuery
            </div>

            <div class="col-md-2">
                <button type="button" id="show-next-image" class="btn btn-default">Next</button>
            </div>
        </div>
    </div>
</div>

这是我的脚本,其中我想将json数据传递给jquery数据,似乎jquery数据不存储传递的json数据..我还检查了我的json是否错误但是它显示了img我也是传递一个json数据。

<script>
$.ajax({
type: "POST",
url: "response2.php",
dataType: "json",
success: function(JSONObject) {
    var peopleHTML = "";
    for (var key in JSONObject) {
        if (JSONObject.hasOwnProperty(key)) {           
            peopleHTML += "<div class='col-lg-3 col-md-4 col-xs-6 thumb'>";
            peopleHTML += "<a class='thumbnail' href='#' data-image-id=''
            data-toggle='modal' data-title='" + JSONObject[key]["title"] + "' 
            data-caption='" + JSONObject[key]["name"] + "' 
            data-image='./images/gallery/img/" + JSONObject[key]["img"] + "' 
            data-target='#image-gallery'>";
            peopleHTML += "  <img class='img-responsive' 
                src='./images/gallery/img/" + JSONObject[key]["img"] + "' 
                alt='Short alt text'>";
            peopleHTML += "</a>";
            peopleHTML += "</div>";
       }
   }
   $("#pic").html(peopleHTML).hide();
       $("#pic").fadeIn("slow");
   }
});
 </script>

这是我的php,我将json从数据库传递给jquery

<?php
  $connection = mysqli_connect("localhost", "root", "", "ecommerceagri");

 $query = mysqli_query($connection,
   "SELECT a.`Gallery.Photo.SRC` AS img, a.`Gallery.Photo.Title` AS title,
   a.`Gallery.Photo.Caption` AS caption FROM galleryphoto AS a;");

  $someArray = [];

 while ($row = mysqli_fetch_assoc($query)) {
   array_push($someArray, [
      'title'   => $row['title'],
      'caption' => $row['caption'],
      'img' => $row['img']
   ]);
  }

$someJSON = json_encode($someArray);
echo $someJSON;
?>

0 个答案:

没有答案