学校小测试：nodejs实现简单购物车.rar资源-CSDN下载

共2个文件

html：1个

js：1个

ajax

nodejs练习

前后端简单交互

2星需积分: 34 71 浏览量 2019-05-25 15:30:23 上传评论 3 收藏 2KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

学校小测试：nodejs实现简单购物车.rar （2个子文件）

学校小测试：nodejs实现简单购物车

index.html 3KB

mysqlTest.js 1KB

<!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"> 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>

评论收藏

内容反馈