jsp ajax分页查询数据格式,jsp页面通过ajax取值/展示数据及分页显示

最新推荐文章于 2021-08-06 09:40:47 发布

转载最新推荐文章于 2021-08-06 09:40:47 发布 · 370 阅读

·

0

·

文章标签：

#jsp ajax分页查询数据格式

本文展示了如何在JSP页面中利用Ajax从后台获取数据并进行分页展示。JavaScript部分代码通过AJAX调用服务器端的compositionlist接口，传递页码参数，接收到响应数据后解析JSON并动态生成HTML内容，包括文章列表和分页导航。同时，代码处理了分页按钮的禁用状态，确保分页操作的正确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jsp页面通过ajax从后台获取数据，在页面展示，并实现分页效果代码：【JavaScript部分代码】 1

2 function getComposition(pageno){

3

4 //alert(pageno);

5 $.ajax(

6 {

7 url:'composition/compositionlist',

8 type:'post',

9 data:"pageno="+pageno,

10 success:function(data)

11 {

12 document.getElementById("composition").innerHTML='';

13 var divcontent="";

14 var obj = eval('(' + data + ')');

15

16 //alert(obj.data.pageno);

17

18 console.log(obj);

19

20 divcontent+="

21 divcontent+="

图片绑定";

22

23 $.each(obj.data.content, function(i,item)

24 {

25 console.log(item);

26 divcontent+="

%22+item.img+%22

";

27

28 });

29 divcontent+="

";

30

31 divcontent+='

';

32 divcontent+='共'+obj.data.totalpages+'页，每页'+obj.data.pagesize+'条，当前是第'+obj.data.pageno+'页';

33 divcontent+='

';

34

35 divcontent+='

';

36

37 divcontent+='

38 if(obj.data.pageno==1){

39 divcontent+='class="button3" disabled';

40 }else if(obj.data.pageno>1){

41 divcontent+=' class="button2";'

42 }

43 divcontent+='>首页

';

44

45 divcontent+='

46 if(obj.data.pageno==1){

47 divcontent+='class="button3" disabled';

48 }else if(obj.data.pageno>1){

49 divcontent+=' class="button2";'

50 }

51 divcontent+='>上页

';

52

53 divcontent+='

54 if(obj.data.pageno==obj.data.totalpages){

55 divcontent+='class="button3" disabled';

56 }else if(obj.data.pageno

57 divcontent+=' class="button2";'

58 }

59 divcontent+='>下页

';

60

61 divcontent+='

62 if(obj.data.pageno==obj.data.totalpages){

63 divcontent+='class="button3" disabled';

64 }else if(obj.data.pageno

65 divcontent+=' class="button2";'

66 }

67 divcontent+='>末页

';

68

69 divcontent+='

';

70

71 document.getElementById("composition").innerHTML=divcontent;

72 }

73 });

74 }

75

【HTML部分代码】

来源：https://www.cnblogs.com/songfayuan/p/5112786.html

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。