今日核心:jsp与java分离
1.域对象
page域(pageContext):只能作用于当前页面,既不能用来做做转发的数据分享,也不能做重定向的数据分享。
request域:只能作用于同一个请求的数据共享,所以只能在请求的转发中使用。
session域:只能作用于一次对话中共享数据(一次对话:用户打开浏览器,浏览多个web站点后,关闭该浏览器),转发和重定向都可以使用
context域(application):只能在同一个web应用中使用。(全局的)
2.EL表达式
2.1 概述
EL 是 JSP 表达式语言,全称是 ExpressionLanguage,使用 EL 的目的是简化在 JSP 中访问变量的方式,简单静态 HTML 与 Java 代码的耦合。
2.2 基本语法格式
${ EL Expression}
2.3 示例代码
${ "Helloworld" } // 输出字符串常量
${ str } // 输出字符串变量 str 的值
${ 3 + 2 } // 输出 3+2 的结果
${ user.name} // 输出 user 对象的 name 属性
${user["name"] } // 同上
${ sessionScope ["user"].name } // 同上
${user.name} //访问对象 user 的 getName () 方法以得到 name 成员的值。
${list[1]} //访问 list 对象的第二项。
${map["key"]} //访问 map 指定键的值。
2.4 "."与"[ ]"的相同点和差别
(1)相同点:都可以访问对象有属性。
(2)不同点:当属性的名字包含有空格,点号等复杂符号时。使用"." 来访问对象有属性将会出现异常
2.5 EL表达式中的操作符
(1)算术操作符 (+,-,*,/,%)
(2)逻辑操作符 (&&,||,! 或 and,or,not )
(3)比较操作符 (>,>=,<,<=,==,!==) 可以自动转换数据类型
(4)空操作符 (empty) 当值为 null 时返回 true
【注意事项】
(a)EL的算术运算符和Java中的运算符的大致相同,优先级也相同。
(b)'+' 运算符不会连接字符串了,他只用于加法运算。
==========================================================================
(5)EL关系运算符有以下六个运算符
关系运算符 说 明 范例 结果
== 或 eq | 等于 | ${ 5 = = 5 } 或 ${ 5 eq 5 } | true
!= 或 ne | 不等于 | ${ 5 != 5 } 或 ${ 5 ne 5 } | false
< 或 lt | 小于 | ${ 3 < 5 }或 ${ 3 lt 5 } | true
> 或 gt | 大于 | ${ 3 > 5 }或 ${ 3 gt 5 } | false
<= 或 le | 小于等于 | ${ 3 <= 5 }或 ${ 3 le 5 } | true
>= 或 ge | 大于等于 | ${ 3 >= 5 }或 ${ 3 ge 5 } | false
(6)集合访问
3.JSTL库
由JSP所提供的一套标准标签
--通用标签:set out remove
--条件标签:if if...else
--迭代标签:forEach for循环
JSTL库怎么使用
导入------taglib指令
前台主页
代码:
<%@page import="com.zking.carts.entity.Goods"%>
<%@page import="java.util.List"%>
<%@page import="com.zking.carts.biz.GoodsBiz"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="x" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border="1">
<table border="1" width="100%" style="text-align: center;">
<tr>
<th>编号</th>
<th>商品名</th>
<th>类型</th>
<th>图片</th>
<th>价格</th>
<th>库存</th>
<th>描述</th>
<th>操作</th>
</tr>
<x:if test="${empty listGoods}">
<jsp:forward page="doindex.jsp"></jsp:forward>
</x:if>
<x:forEach items="${listGoods }" var="goods" >
<tr>
<td>${goods.getGid() } </td>
<td>${goods.getGname() }</td>
<td>${goods.getGtype() }</td>
<td><img style="width: 70px;height:50px" alt="" src="${goods.getGimage() }"></td>
<td>${goods.getGprice() }</td>
<td>${goods.getGkc() }</td>
<td>${goods.getGinfo() }</td>
<td><button onclick="addShooping(${goods.getGid() })">加入购物车</button ></td>
</tr>
</x:forEach>
</table>
<div style="text-align: center; background: yellow;">
《${pageIndex }/${pageMax }》
<a href="doindex.jsp?pageIndex=1">首页</a>
<a href="doindex.jsp?pageIndex=${pageIndex-1==0?1:pageIndex-1 }">上一页</a>
<a href="doindex.jsp?pageIndex=${pageIndex+1>pageMax?pageMax:pageIndex+1 }">下一页</a>
<a href="doindex.jsp?pageIndex=${pageMax }">尾页</a>
</div>
<script type="text/javascript">
function addShooping(gid){
window.location.href="doshooping.jsp?gid="+gid+"";
}
</script>
</body>
</html>
购物车
代码
<%@page import="com.zking.carts.entity.Shooping"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1 align="center">我的购物车</h1>
<table id="oTab" border="1" width="100%" style="text-align: center;">
<tr>
<!-- <th>商品编号</th> -->
<th><input id="All" type="checkbox" />全选</th>
<th>商品名</th>
<th>类型</th>
<th>图片</th>
<th>价格</th>
<th>数量</th>
<th>总价</th>
<th>操作</th>
</tr>
<c:if test="${not empty list}">
<c:forEach items="${list }" var="ls" begin="${start }" end="${end }">
<tr id="${ls.goods.gid }">
<td><input type="checkbox" name="check" onclick="setChecked()"/></td>
<%-- <td>${ls.getGoods().getGid() }</td> --%>
<td>${ls.getGoods().getGname()}</td>
<td>${ls.getGoods().getGtype() }</td>
<td><img style="width: 70px; height: 50px"
src="${ls.getGoods().getGimage() }"></td>
<td>${ls.getGoods().getGprice() }</td>
<td><button
onclick="setCount('minus',${ls.getGoods().getGid() })">-</button>
<input style="width: 50px" type="text"
value="${ls.getGcount()}" />
<button onclick="setCount('add',${ls.getGoods().getGid() })">+</button></td>
<td>${ls.getGtotal() }</td>
<td>
<button onclick="jiesuan(${ls.getGoods().getGid() })">结算</button>
<button onclick="del(${ls.getGoods().getGid() })">删除</button>
<button onclick="update(${ls.getGoods().getGid() })">修改</button>
</td>
</tr>
</c:forEach>
</c:if>
</table>
<div style="text-align: left; ">
<button onclick="delChecked()">删除所选</button>
<button onclick="jsChecked()">结算所选</button>
</div >
<div style="text-align: right; ">
《${pageIndex }/${pageMax }》
<a href="doShooping_fy.jsp?pageIndex=${pageIndex-1<1?1:pageIndex-1 }">上一页</a>
<a href="doShooping_fy.jsp?pageIndex=${pageIndex+1>pageMax?pageMax:pageIndex+1 }">下一页</a>
</div>
<script type="text/javascript">
//删除商品
function del(gid){
/* var cof=confirm("你确定要删除吗?");
if(cof==true){ */
window.location.href="dodel.jsp?gid="+gid+"";
// }
}
window.onload=function(){
//全选
document.getElementById("All").onclick=function(){
var all=document.getElementById("All");
var checks=document.getElementsByName("check");
for(var i=0;i<checks.length;i++){
checks[i].checked=all.checked;
}
}
/* document.getElementsByName("check").onclick=function(){
alert(1);
}
*/
};
//完善全选
function setChecked(){
var flag=true;
var all=document.getElementById("All");
var checks=document.getElementsByName("check");
for(var i=0;i<checks.length;i++){
if(checks[i].checked==false){
flag=false;
}
}
all.checked=flag;
}
//删除所选
function delChecked(){
var checkeds=document.getElementsByName("check");
for(var i=0;i<checkeds.length;i++){
if(checkeds[i].checked==true){
//console.log(checkeds[i].parentElement.parentElement.id);
var gid=checkeds[i].parentElement.parentElement.id
del(gid);
}
}
}
function jsChecked(){
var checkeds=document.getElementsByName("check");
var count=0;
for(var i=0;i<checkeds.length;i++){
if(checkeds[i].checked==true){
var gid=checkeds[i].parentElement.parentElement.id;
var total= document.getElementById(gid).cells[6].innerHTML;
count+=parseInt(total);
//window.location.href="dodel.jsp?gid="+gid+"";
del(gid);
}
}
alert("你一共消费"+count+"元");
}
//添加商品数量
function setCount(type,id){
var count=document.getElementById(id).cells[5].children[1].value;
if(type==="minus"){
if(count<=1){
}else{
count--;
}
}
if(type==="add"){
count++;
}
document.getElementById(id).cells[5].children[1].value=count;
setTotal();
}
//计算总价
function setTotal(){
var tb=document.getElementById("oTab");
var trs=tb.rows;
for(var i=1;i<trs.length;i++){
//价格
var price=trs[i].cells[4].innerHTML;
//数量
var count=trs[i].cells[5].children[1].value;
trs[i].cells[6].innerHTML=price*count;
}
}
//修改
function update(gid,count){
var count=document.getElementById(gid).cells[5].children[1].value;
window.location.href="doupdate.jsp?gid="+gid+"&count="+count+"";
}
function jiesuan(gid){
var cof=confirm("你确定要结算该商品吗?");
if(cof==true){
var total= document.getElementById(gid).cells[6].innerHTML;
alert("你一共消费"+total+"元");
window.location.href="dodel.jsp?gid="+gid+"";
}
}
</script>
</body>
</html>