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

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

原创

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

1 ·

CC 4.0 BY-SA版权

文章标签：

#列表 #jquery #ajax #vue #html

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

前言

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

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

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+'</li>');
				$(".c-category li").eq(0).addClass('bg-color1');
				$(".c-category li:gt(0)").addClass('bg-color2');
				$(".c-category li:gt(0)").hover(function() {