特别说明：因为是java web程序设计这门课，所以老师的要求不仅仅是会用ajax就完事儿，需要自己使用java来连接数据库写后台，然后前端ajax获取。 （PS：因为自己java学的一般，又一直在搞纯前端的东西。所以自己鼓捣了一下用nodejs来实现后端，前端使用ajax获取来完成这个题目）
后端 sql.js
// nodejs部分 // 作用：实现连接数据库获取增加数据，开启一个web服务器 // 引入相关模块 var mysql = require('mysql') // mySQL模块 var express = require('express') // express WEB应用框架模块 var app = express() var util = require('util') // 常用库函数模块 var bodyParser = require('body-parser') // 解析POST请求模块 var fs = require('fs') // 文件操作模块 // 定义post请求体 var urlencodedParser = bodyParser.urlencoded({ extended: false }) // 连接数据库相关配置 var connection = mysql.createConnection({ host: 'localhost', user: 'root', password: 'root', database: 'goodcart' }) connection.connect() // 开启连接 var sql = 'SELECT * FROM goods' // 定义数据库商品查询语句 var addSql = 'INSERT INTO goods(goodName) VALUES(?)' // 定义数据库商品增加语句 // get请求定向到index.html（访问本地服务器（127.0.0.1：8081）页面时访问index.html） app.get('/', function (req, res) { res.sendFile(__dirname + '/' + 'index.html') }) // 获取post请求实现商品增加到数据库的功能 app.post('/addGood', urlencodedParser, function (req, res) { for(let i in req.body) { var goodName = i } res.send('添加成功') console.log(goodName); // 增 connection.query(addSql, [goodName], function (err, result) { if (err) { console.log('INSERT ERROR - ', err.message) return } }) }) // 获取get请求实现查询商品 app.get('/loadGoods', function (req, res) { // 查 var goods = [] connection.query(sql, function (err, result) { if (err) { console.log('[SELECT ERROR] - ', err.message) returns } for (let i = 0; i < result.length; i++) { goods.push(result[i].goodName) } res.json({message: goods}); }) }) // 开启端口为8081的web服务器 var server = app.listen(8081, function () { var host = server.address().address var port = server.address().port console.log('running at http://' + host + ':' + port) })前端： index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <title>Test</title> </head> <style> .container { display: flex; flex-wrap: nowrap; justify-content: space-around; } .goods-list { margin: 50px auto; display: flex; flex-wrap: wrap; width: 500px; height: 300px; border: 1px solid black; opacity: 0; } .goods-list h1 { margin: 0 10px; } .shop-cart { position: absolute; bottom: 0; right: 0; padding: 20px 100px; border: 1px solid black; } </style> <script type="text/javascript"> // ajax 请求部分 var xhr; var isIE=false; var isShopCart=false; function getXMLHttpRequest() { if (window.XMLHttpRequest) { if (navigator.userAgent.indexOf('MSIE') != -1) { isIE = true; } return new XMLHttpRequest(); } else if (window.ActiveXObject) { isIE = true; return new ActiveXObject("Microsoft.XMLHTTP"); } } function init() { xhr = getXMLHttpRequest(); if(xhr) { xhr.onreadystatechange = handleResponse; } else { alert("你的浏览器不支持ajax！推荐使用firefox或者chrome浏览器访问！"); } } function addGoods(id) { if(xhr) { xhr.open("POST", "/addGood"); xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhr.send('商品' + id); } } function loadGoods() { if(xhr) { xhr.open("GET", "/loadGoods"); xhr.send(); } console.log('获取商品') } function handleResponse() { if(xhr.readyState == 4) { if(xhr.status == 200 || xhr.status == 304) { if (isShopCart) { var goods = JSON.parse(xhr.responseText).message $(".goods-list").empty(); for (let i = 0; i < goods.length; i++) { $(".goods-list").append(`<h1>${goods[i]}</h1>`) } } else { alert('提交成功') } } } } </script> <body onload="init()"> <div class="container"> <div class="good-content"> <h1>商品1</h1> <button id="#btn1" onclick="addGoods(1)">添加</button> </div> <div class="good-content"> <h1>商品2</h1> <button onclick="addGoods(2)">添加</button> </div> <div class="good-content"> <h1>商品3</h1> <button onclick="addGoods(3)">添加</button> </div> <div class="good-content"> <h1>商品4</h1> <button onclick="addGoods(4)">添加</button> </div> <div class="good-content"> <h1>商品5</h1> <button onclick="addGoods(5)">添加</button> </div> </div> <div class="goods-list"> </div> <div class="shop-cart"> 购物车 </div> </body> <script> $(document).ready(function(){ $(".shop-cart").mouseenter(function () { loadGoods() isShopCart = true; $(".goods-list").css("opacity", "1") }) $(".shop-cart").mouseleave(function () { $(".goods-list").css("opacity", "0") isShopCart = false; }) }); </script> </html>效果： （点击添加） （加载购物车商品）
因为nodejs接触不久，写的有很多不妥或者凌乱的地方，求大佬指正谢谢、
相应工程：https://download.csdn.net/download/weixin_43388844/11203612 （node环境运行，并开启数据库端口）
