使用JQuery在mysql数据库中创建一个前进按钮和一个后退按钮以通过ID浏览数据答案

【问题标题】：Using JQuery to create a forward button and a backward button to go through data by ID in a mysql database使用JQuery在mysql数据库中创建一个前进按钮和一个后退按钮以通过ID浏览数据
【发布时间】：2019-06-26 23:50:03
【问题描述】：

我希望一个按钮可以通过来自 Mysql 数据库的 ID 向前浏览数据，而另一个按钮可以使用 JQuery 向后浏览相同的数据。我不想一次显示整个数据库。我想显示项目 ID 1，然后单击前进按钮，然后显示项目 ID 2。如果我想再次前进，我可以单击相同的按钮并显示项目编号 3。如果我想后退，我可以单击后退按钮，现在再次显示项目编号 2。

目前，它一次显示所有项目，每个项目重复6次，这是数据库中的列数。这是因为变量 station_dataP +=。如果我删除 += 并放置 = 符号，它只会显示最后一个 ID 7，这完全是我希望看到的，但它不会在它们之间来回循环。

ID：1 车站：卡迈克尔路。地址：迈尔斯路 54 号。销售：未定义操作员：迈克尔·西尔斯热门 SKU：未定义

ID：2 车站：白露山地址：杰克逊大街 564 号。销售：未定义操作员：马拉派克热门 SKU：未定义

等等。

我可以在 vanilla Javascript 中执行此操作，但在 JQuery 中无法执行此操作。我将在下面显示 Javascript 代码：

      <HTML>
     <button type = "button" id="previous"><<<<</button>
     <button type = "button" id="next">>>>></button>
     <br/>
     <br/>
     <div id="storesNav"></div>

   <JQUERY> - DOES NOT WORK PROPERLY

  $(document).ready(() => {
  $('#previous').click(()=> {
  $.ajax({
   url:'http://localhost:5000/alldata',
   type:'GET',
   datatype:'json',
   success:(data) => {

   var station_dataP ='';

   $.each(data, function (key,value){
      for(var i in value){
        if(i > 0){
        i--;
        }

   station_dataP +='<li>ID: '+value.ID+'</li>' +
                      '<li>Station: '+value.Station+'</li>' +
                      '<li>Address: '+value.Address+'</li>' +
                      '<li>Sales: '+value.Monthly_CStore_Sales+'</li>' +
                      '<li>Operator: '+value.Operator+'</li>' +
                      '<li>Top SKU: '+value.Top_SKU+'</li>' +
                      '</<li>'+'<br/>'; */

    });
   }      

   $('#storesNav').append(station_dataP);

     }
   });
 });  


 //(4)
 $('#next').click(()=> {
  $.ajax({
   url:'http://localhost:5000/alldata',
   type:'GET',
   datatype:'json',
   success:(data) => {

      var station_dataP ='';

      $.each(data, function (key,value){
      for(var i in value){
        len = value.length;
        if(i < len - 1){
        i++;
        }
        station_dataP +='<li>ID: '+value.ID+'</li>' +
                      '<li>Station: '+value.Station+'</li>' +
                      '<li>Address: '+value.Address+'</li>' +
                      '<li>Sales: '+value.Monthly_CStore_Sales+'</li>' +
                      '<li>Operator: '+value.Operator+'</li>' +
                      '<li>Top SKU: '+value.Top_SKU+'</li>' +
                      '</<li>'+'<br/>'; */

    });
   }      

   $('#storesNav').append(station_dataP);

     }
   });
 });

       <JAVASCRIPT> IT WORKS HERE BUT NOT THE JQUERY CODE. 

       function previous(xhttp){
        //var xhttp;
        //xhttp = new XMLHttpRequest();
        var users = JSON.parse(xhttp.responseText);
        len = users.length
        if(i > 0){
        i--;
        }

        var usersText2 = '';


        usersText2 += 
       '<div class="prev">' +
       'ID: ' + users[i].id + '<br>' +
       'Name: ' + users[i].name + '<br>' +
       'Email: '+ users[i].email;

       document.getElementById("usersNav").innerHTML = usersText2;

       }
       function next(xhttp){

      //var xhttp;
      //xhttp = new XMLHttpRequest();
      var users = JSON.parse(xhttp.responseText);
      len = users.length;
      if(i < len - 1){
      i++;
      }

      var usersText = '';
      usersText += 
       '<div class="next">' +
       'ID: ' + users[i].id + '<br>' +
       'Name: ' + users[i].name + '<br>' +
        'Email: '+ users[i].email;

       document.getElementById("usersNav").innerHTML = usersText;

        }

【问题讨论】：

标签： javascript jquery loops counter

【解决方案1】：

大括号输入无效另外，ajax中除了参数应该没有jquery源

$(document).ready(() => {
    $('#previous').click(() => {
        $.ajax({
            url: 'http://localhost:5000/alldata',
            type: 'GET',
            datatype: 'json',
            success: (data) => {

                var station_dataP = '';

                $.each(data, function (key, value) {
                    for (var i in value) {
                        if (i > 0) {
                            i--;
                        }

                        station_dataP += '<li>ID: ' + value.ID + '</li>' +
                            '<li>Station: ' + value.Station + '</li>' +
                            '<li>Address: ' + value.Address + '</li>' +
                            '<li>Sales: ' + value.Monthly_CStore_Sales + '</li>' +
                            '<li>Operator: ' + value.Operator + '</li>' +
                            '<li>Top SKU: ' + value.Top_SKU + '</li>' +
                            '</<li>' + '<br/>';

                    }
                });
                $('#storesNav').append(station_dataP);
            }
        })
    });

    //(4)
    $('#next').click(() => {
        $.ajax({
            url: 'http://localhost:5000/alldata',
            type: 'GET',
            datatype: 'json',
            success: (data) => {

                var station_dataP = '';

                $.each(data, function (key, value) {
                    for (var i in value) {
                        var len = value.length;
                        if (i < len - 1) {
                            i++;
                        }
                        station_dataP += '<li>ID: ' + value.ID + '</li>' +
                            '<li>Station: ' + value.Station + '</li>' +
                            '<li>Address: ' + value.Address + '</li>' +
                            '<li>Sales: ' + value.Monthly_CStore_Sales + '</li>' +
                            '<li>Operator: ' + value.Operator + '</li>' +
                            '<li>Top SKU: ' + value.Top_SKU + '</li>' +
                            '</<li>' + '<br/>';
                    }
                });
                $('#storesNav').append(station_dataP);
            }
        });
    });
});

【讨论】：

@FizzYam ......感谢您的贡献，请您确定进行了哪些更改>.....
@flowover $('#storesNav').append(station_dataP);此源已传入成功回调函数
@flowover * / 在 JQUERY 源中删除
@flowover len => var len

【解决方案2】：

$(document).ready(() => {
    $('#previous').click(() => {


      $.ajax({
        url: 'http://localhost:5000/alldata',
        type: 'GET',
        datatype: 'json',
        success: (data) => {
          $.each(data, function (i) {

          });


          data[i]
          console.log(i);
          if (i > 0) {
            i--;
            var station_loop = '';
            console.log(JSON.stringify(data[i].Station));

            station_loop += '<li>ID: ' + JSON.stringify(data[i].ID) + '</li>' +
              '<li>Station: ' + JSON.stringify(data[i].Station) + '</li>' +
              '<li>Address: ' + JSON.stringify(data[i].Address) + '</li>' +
              '<li>Sales: ' + JSON.stringify(data[i].Monthly_CStore_Sales) + '</li>' +
              '<li>Operator: ' + JSON.stringify(data[i].Operator) + '</li>' +
              '<li>Top SKU: ' + JSON.stringify(data[i].Top_SKU) + '</li>' +
              '</<li>' + '<br/>';

            $('#storesNav').html(station_loop);
          }
        }
      })
    });
  });

  $(document).ready(() => {
    $('#next').click(() => {
      //var url = 'localhost:5000/alldata';
      //var url = 'https://api.github.com/users/topjavatutorial/repos';
      $.ajax({
        url: 'http://localhost:5000/alldata',
        type: 'GET',
        datatype: 'json',
        success: (data) => {

          $.each(data, function (i) {

          });

          data[i]
          console.log(i);
          len = data.length;
          if (i < (len - 1)) {
            i++;
            var station_loop = '';
            console.log(JSON.stringify(data[i].Station));

            station_loop += '<li>ID: ' + JSON.stringify(data[i].ID) + '</li>' +
              '<li>Station: ' + JSON.stringify(data[i].Station) + '</li>' +
              '<li>Address: ' + JSON.stringify(data[i].Address) + '</li>' +
              '<li>Sales: ' + JSON.stringify(data[i].Monthly_CStore_Sales) + '</li>' +
              '<li>Operator: ' + JSON.stringify(data[i].Operator) + '</li>' +
              '<li>Top SKU: ' + JSON.stringify(data[i].Top_SKU) + '</li>' +
              '</<li>' + '<br/>';



            $('#storesNav').html(station_loop);
          }
        }
      })
    });
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<button type="button" id="previous">
      <<<<</button> <button type="button" id="next">>>>>
    </button>
    <br />
    <br />
    <div id="storesNav"></div>

【讨论】：