网上书城之动态实现前端界面书籍分类&新书上架&热销书籍

最新推荐文章于 2022-09-03 07:22:40 发布

Jiang呀

最新推荐文章于 2022-09-03 07:22:40 发布

阅读量788

点赞数

分类专栏：个人小项目文章标签：列表 jquery ajax vue html

本文链接：https://blog.youkuaiyun.com/JiangHu_Java/article/details/107189925

版权

本文介绍如何利用ajax获取数据源，实现网上书城的书籍分类列表、新书上架和热销书籍的动态展示。通过jquery和vue等技术，结合html和ajax进行页面交互，解决数据拼接过程中的问题。

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

前言

之前实现了后台的登录注册，这一次讲述一下后台获取数据源实现前台的部分功能。

通常这种效果我们有两种方式来实现：

1、前端界面使用foreach标签实现；
2、前端界面使用ajax获取数据

我这次主要讲述ajax方法！

书籍分类列表

实现效果：
在这里插入图片描述
实现思路

<li class="list-group-item" style="color: white;">书籍分类</li>

主要是通过class选择器选中了这个li，再通过ajax获取数据源，成功回调后使用拼接html代码实现。

$(function(){
	//当浏览器访问index界面时 ajax 加载左侧书籍类别列表
	$.ajax({
		url:$("#ctx").val()+'/category.action?methodName=list',
		success:function(data){
			data=eval('('+data+')');
			for(i in data){
				$(".list-group").append('<li class="list-group-item">'+data[i].name+'