我希望有一个按钮可以按ID向前浏览Mysql数据库中的数据,另一个按钮可以使用JQuery向后浏览相同的数据。我不想一次显示整个数据库。我想显示项目ID % 1,然后单击前进按钮,然后显示项目ID %2。如果我想再次前进,我可以单击相同的按钮,并显示项目编号3。如果我想后退,我可以单击后退按钮,现在再次显示项目编号2。
目前,它一次显示所有项目,每个项目重复6次,这是数据库中的列数。这是因为变量station_dataP +=。如果我去掉+=并放上=号,它只显示最后一个ID 7,这就是我希望看到的,但它不会在它们之间来回循环。
ID: 1车站: Carmichael路地址:迈尔斯路54号销售:未定义操作员: Michael Sears顶级SKU:未定义
ID: 1车站: Carmichael路地址:迈尔斯路54号销售:未定义操作员: Michael Sears顶级SKU:未定义
ID: 1车站: Carmichael路地址:迈尔斯路54号销售:未定义操作员: Michael Sears顶级SKU:未定义
ID: 1车站: Carmichael路地址:迈尔斯路54号销售:未定义操作员: Michael Sears顶级SKU:未定义
ID: 1车站: Carmichael路地址:迈尔斯路54号销售:未定义操作员: Michael Sears顶级SKU:未定义
ID: 1车站: Carmichael路地址:迈尔斯路54号销售:未定义操作员: Michael Sears顶级SKU:未定义
ID: 2车站:白楼山地址:杰克逊大道564号。销售:未定义操作员: Marla Pikes顶层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;
}
发布于 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);
}
});
});
});
发布于 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>
https://stackoverflow.com/questions/56782250
复制相似问题