代码之家 › 专栏 › 技术社区 › qoneal

如何转到JSON\u encode with jQuery返回的JSON数组中的下一个和上一个对象?

json html jquery php javascript

qoneal · 技术社区 · 7 年前

我目前正在尝试使用AJAX从PHP文件中加载一些JSON图像数据,并使用jQuery通过单击下一个/上一个按钮循环结果。当我指示指定的索引(data.record[0].image;)时,我可以成功加载数据但我希望它加载第一个索引,而不加载其他内容,然后转到下一个JSON。对象单击图像键/值对,但我似乎无法使前面的下一个按钮正常工作。以下是我到目前为止的情况。。

PHP:

    include('./connection.php');
    $query = "SELECT artist, title, year, image, description, ID FROM voting";
    $result = $mysqli->query($query);

    if (!$result) die($mysqli->error);
    $array = array();
    while ($row = $result->fetch_object()) {
        $array[] = $row;

    }
    echo json_encode(array('records' => $array), JSON_UNESCAPED_SLASHES);

JSON的格式如下:

{"records":[
            {
                "artist":"At The Drive In",
                "title":"Acrobatic Tenement ",
                "year":"1996",
                "image":"./img/atdi01.jpg",
                "description":"Arguably the the pioneering album of post-hardcore, Acrobatic Tenement is At The Drive In's seminal album. ",
                "ID":"1"
            }
    ]

剧本js文件:

      $("#get-data").click(function(){ //load JSON data...
        $.getJSON("api.php", //gets a JSON data from api.php
          function(data){     //callback function if request succeeds


            $.each(data.records, function(i,record){
              var current = 0;
              var img = $("<img/>").attr({
                id: "album_image", 
                class: "album", 
                src: data.records[i].image,
                });
              $("#content").html(img);
              $("#next-bt").click(function(){
                current + 1;
                return false;
              });
              $("#prev-bt").click(function(){
                current - 1;
                return false;
              });

            });
          });           //end of callback function and end of .getJSON statement
      });               //end of button.click function

请帮忙!我正要把头发拔出来。

1 回复 | 直到 7 年前

Randy Casburn 7 年前

不需要您的循环。在Ajax处理程序中,将数据移动到全局数据变量。然后打电话 render() . 尝试以下操作:

var records;
var current = 0;

$("#next-bt").click(next);
$("#prev-bt").click(prev);

$("#get-data").click(function(){ //load JSON data...
   $.getJSON("api.php", //gets a JSON data from api.php
      function(data){     //callback function if request succeeds
          var records = data.records;
          render();
   }); //end of callback function and end of .getJSON statement
 });
function render(){
    var img = $("<img/>").attr({
          id: "album_image", 
           class: "album", 
           src: records[current].image,
     });
    $("#content").html(img);
}
function next(){
    current++;
    render();
}
function prev(){
   current--;
   render();
}

免责声明:此代码中应该有错误检查,以确保我们不能越过数组的边界。