问使用JQuery创建一个前进按钮和一个后退按钮，以便在mysql数据库中按ID浏览数据。
EN

Stack Overflow用户

提问于 2019-06-27 07:50:04

回答 2查看 38关注 0票数 0

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

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

ID: 1车站: Carmichael路地址:迈尔斯路54号销售:未定义操作员: Michael Sears顶级SKU:未定义

ID: 2车站:白楼山地址:杰克逊大道564号。销售:未定义操作员: Marla Pikes顶层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

回答 2

Stack Overflow用户

发布于 2019-06-27 08:00:18

括号输入也是无效的，除了参数之外，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);
            }
        });
    });
});

票数 0

Stack Overflow用户

发布于 2019-06-30 07:55:41

$(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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56782250

复制

相似问题

问使用JQuery创建一个前进按钮和一个后退按钮，以便在mysql数据库中按ID浏览数据。
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用JQuery创建一个前进按钮和一个后退按钮，以便在mysql数据库中按ID浏览数据。EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用JQuery创建一个前进按钮和一个后退按钮，以便在mysql数据库中按ID浏览数据。
EN