1. 初始JSP
静态内容: html标签 和 样式表 js
小 脚 本: <%%>
表 达 式: <%=srt%> 向页面输出内容
指 令: <%@ page %>
标准动作: <jsp:include/>
声 明: 在jsp页面中声明一个方法<%!%>
注 释:
注释之间的区别
html 页面中的注释，在F12中是可以看到的
java 代码中的注释 在F12中看不到
2. JSP数据交互
String path = request.getContextPath();
request.setCharacterEncoding("UTF-8");
String name = request.getParamter("name");
String[] name = request.getParamterValues("names");
post： 方式提交过来的表单，必须在接受页面中通过setCharacterEncoding("UTF-8")进行转码
get: 方式提交过来的表单，不需要进行进行转码，需在配置文件中进行配置
<a href="color.jsp?color=赤色&id=1">赤色</a>
<link rel="stylesheet" href="css/index.css?_=<%=new Date().getTime() %>">
3. JSP中内置对象
jsp的内置对象
1.request ------ 一次请求
2.response ------ 一次响应
3.out ------- 输出,向页面输出
4.session ------- 一次会话(多次请求)
(1) session.setMaxInactiveInterval(1000) --设定session的会话时长
(2) 当浏览器关闭的时候,保存在session中的值,也会被摧毁
(3) 通过removeAttribute去摧毁保存在session中的值
target='parent'; 在浏览器跳转至父级， (URL)
target='路径'; 在框架内跳转指定路径 (框架本身)
4. 数据传输
$("[name=roleId] [value="+$("[name=hideRoleId]").val()+"]").attr("selected",true);
$("[name=roleId]").val($("[name=hideRoleId]").val());
< input type="text" value="<%=userName==null?"":userName%>" name="userName">
<两种处理方式:
方式一: 隐藏域，作用存储查询出来的信息，然后通过DOM操作，获取隐藏域内容，赋值给下拉列表
方式二: 自定义属性data, 作用存储查询出来的信息,然后通过DOM操作，获取属性中的值，赋值给下拉列表>
stu.setMarry(request.getParameter("marry")==null?false:true);
var hobby = $("[name=hideHobby]").val().split(";");
$("[name=hobby]").val(hobby); <隐士迭代>
<input type="checkbox" value="<%=i.getId()%>" name="boxs">
<%String[] boxs = request.getParameterValues("boxs");%>
<!--使用自定义属性赋值 用于select下拉框-->
$("[name=stuGrade]").val($("[name=stuGrade]").attr("data"));
5. 提交表单事件
$("form").submit(function(){})
$("表单名").trigger("submit");
6. 分页查询
<%
int pageNo = 1;
int pageSize = 3;
int totalCount = dao.getCount();
int totalPage = (totalCount-1)/pageSize+1;
String pageStr = request.getParameter("page");
if(pageStr!=null && !pageStr.equals("")){
pageNo=Integer.parseInt(pageStr);
}
int prevPage = pageNo==1?1:pageNo-1;
int nextPage = pageNo==totalPage?totalPage:pageNo+1;
%>
全查、条件查询、条件查询高亮显示(a标签)、查看详情、分页查询。添加、修改、删除、批量删除。
新闻发布系统(session会话控制、过滤器、后台搭建、新闻主页)
7. Servlet
<%
@WebServlet("/doBatchDelete.shtml")
public class doBatchDelete extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req, resp);
}
}
@WebServlet("/Servlet01")
@WebServlet(name="Servlet01",value="/ser01")
@WebServlet(name="Servlet01",value={"/ser01","/ser02"})
@WebServlet(name="Servlet01",urlPatterns="/ser01")
@WebServlet(name="Servlet01",urlPatterns={"/ser01","/ser02"})
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.setHeader("content-type","text/html");
转发：一般用于查询操作 如(首页查询，更新查询等) 就是把数据读出来然后在进行赋值，代表两次请求;
requrset.getRequestDispatcher("/index.jsp").forward(request,respones);
重定向:一般用于增删改 如(增加,删除,修改等)； 把数据读出来执行SQL;
response.sendRedirect(path+"/indexServlet.shtml");
String url = request.getRequestURL().toString();
System.out.println("获取客户端请求的完整URL：" + url);
String uri = request.getRequestURI();
System.out.println("获取客户端请求的部分URL：" + uri);
String queryString = request.getQueryString();
System.out.println("获取请求行中的参数部分：" + queryString);
String method = request.getMethod();
System.out.println("获取客户端的请求方式：" + method);
String protocol = request.getProtocol();
System.out.println("获取HTTP版本号：" + protocol);
String webapp = request.getContextPath();
System.out.println("获取webapp名字：" + webapp);
String uname = request.getParameter("uname");
System.out.println("uname的参数值：" + uname);
String[] hobbys = request.getParameterValues("hobby");
System.out.println("获取指定名称参数的所有参数值：" + Arrays.toString(hobbys));
通过该对象可以在一个请求中传递数据，作用范围：在一次请求中有效，即服务器跳转有效
request.setAttribute(String name, String value);
request.getAttribute(String name);
request.removeAttribute(String name);
%>
8. Include包含
include静态包含
格式: <%@ include file='要包含的页面地址' %>
特点:
1.将内容进行了直接的替换
2.静态包含只会生成一个源码文件,最终的内容全部在_jspService方法中(源码文件中)
3.不能出现同名变量
4.运行效率高一点点。耦合性较高，不够灵活
<%@ include file="1-header.jsp"%>
<h2>主题内容</h2>
<%@ include file="1-footer.jsp" %>
include动态包含
格式: <jsp:include page=“要包含的页面路径”></jsp:include>
特点;
1.动态包含相当于方法的调用
2.动态包含会生成多个源码文件
3.可以定义同名变量
4.效率高,耦合度低
注:当动态包含不需要传递参数时,include双标签之间不要有任何内容, 包含换行和空格
使用动态包含传递参数
<jsp:include page="要包含的页面路径">
<jsp:param name="参数名" value="参数值" />
</jsp:include>
注: name属性不支持表达式,value属性支持表达式
获取参数: request.getParameter(name);
<jsp:include page="1-header.jsp"></jsp:include>
<h2>主题内容</h2>
<jsp:include page="1-footer.jsp"></jsp:include>
<%-- 动态包含传递参数 --%>
<%
String str = "hello";
String url = "1-footer.jsp";
%>
<jsp:include page="<%=url%>">
<jsp:param name="uName" value="admin" />
<jsp:param name="msg" value="<%=str%>" />
</jsp:include>
9. EL表达式
<%
EL表达式
作用:简化JSP代码
格式:${域对象的名称}
操作对象: EL表达式一般操作的是域对象中的值，不能操作局部变量
操作范围:
page范围: 在当前页面
request范围:在一次请求
session范围:在一次会话
application范围:在整个应用程序
注:
1.如果EL表达式获取域对象的值为空,默认显示空字符串
2.EL表达式默认从小到大范围去找,找到即可,如果四个范围都未找到,则显示空字符串
查找数据时可以使用四个域对象对应的空间对象,分别是:
pageScope,requestScope,sessionScope,applicationScope
%>
<%
pageContext.setAttribute("name","1");
request.setAttribute("name","2");
session.setAttribute("name","3");
application.setAttribute("name","4");
%>
获取局部变量的值: ${str}
获取域对象:${name}
获取指定范围的域对象
page范围:${pageScope.name}
request范围:${requestScope.name}
session范围:${sessionScope.name}
application范围:${applicationScope.name}
<%--
EL表达式的使用
获取list
获取list的长度 ${list.size()}
获取list指定下标值 ${list[下标]}
注:list表示的时限域变量名
获取map
获取map中指定key的value
${map.key}
${map["key"]}
注:map代表的是限域变量名
获取JavaBean
获取JavaBean中的属性
${javaBean.属性名}
${javaBean.get属性名()}}
注:JavaBean中属性字段必须提供get方法
empty判断域对象是否为空
为空: true;
否则: false;
--%>
<%
List<String> list = new ArrayList<String>();
list.add("aaa");
list.add("bbb");
list.add("ccc");
request.setAttribute("list",list);
Map map = new HashMap();
map.put("aaa",1111);
map.put("bbb",2222);
map.put("ccc",3333);
request.setAttribute("map",map);
User user = new User();
user.setUserId(1);
user.setuName("admin");
user.setuPwd("admin");
request.setAttribute("user",user);
%>
<h4>获取list</h4>
获取list的size：${list.size()} <br/>
获取list的指定下标的值: ${list[1]}<br/>
<h4>获取Map</h4>
获取Map指定key的value值: ${map.aaa}----${map["bbb"]}
<h4>获取JavaBean</h4>
获取JavaBean对象:${user}<br>
获取JavaBean中的属性:${user.uName} ----- ${user.getuName()}
<a href="5-EL表达式(课堂).jsp?hobby=篮球">一个参数</a>
<a href="5-EL表达式(课堂).jsp?name=sun&name=zi&name=yuan">一组参数</a>
<接受一个参数>
${param.hobby}<br/>
<接受一组参数>
<c:forEach items="${paramValues.name}" var="i">
${i}<br/>
</c:forEach>
| 请求转发(request.getRequsetDispatcher().forward()) | 重定向(request.sendRedirect()) |
|---|
| 一次请求,数据在request域中共享 | 两次请求，request域中数据不共享 |
| 服务器端行为 | 客户端行为 |
| 地址栏不会发生变化 | 地址栏发生改变 |
| 绝对地址定位到站点后 | 绝对地址可写到http:// |
10. JSTL标签
<引用标签库>
<%--通过taglib标签引入所需要的标签库 --%>
<%@ taglib uri='http://java.sun.com/jsp/jstl/core' prefix-"c" %>
<JSTL的使用>
1. 下载JSTL所需要的jar包 (standard.jar 和 jstl.jar)
2. 在项目的web目录下的WEB-INF中新建lib目录.将jar拷贝进来
3. 选择"file". 再选择"project Structure"
4. 选择"Modules". 选择右侧的"Dependencies",选择右侧的"+"号,将对应的lib目录加载进来
5. 在需要使用标签库的JSP页面通过taglib标签引入指定库
<if标签库>
if 标签
格式:
<c:if test="<boolean>" var="<string>" scope="<string>">
...
</c:if>
常用属性:
test: 条件判断, 操作的是域对象, 接收返回结果是boolean类型的值 (必要属性)
var: 限域变量名(存放在作用域中的变量名), 用来接收判断结果的值 (可选属性)
scope: 限域变量名的范围(page、request、session、application) (可选属性)
注:
1.标签操作的一般都是域对象
2.if标签没有else,如果想要else的效果,就需要设置两个相反的条件
<%
request.setAttribute("num",0);
%>
<c:if test="${num>0}">
数值大于0
</c:if>
<c:if test="${num<0}">
数值小于0
</c:if>
<c:if test="${num>100}" var="flag" scope="request"></c:if>
${flag} ---- ${requestScope.flag}
<if-else>
<!--2、条件标签 if-->
<c:set value="admin" var="name"></c:set>
<c:if test="${name =='admin'}" var="isok">
欢迎 <span>${name}</span> 登录
</c:if>
<c:if test="${not isok}">
请登录
</c:if>
choose 选择
when 场合
otherwise 否则
<choose标签>
choose、when 和 otherwise 标签
<c:choose>
<c:when test="<boolean>">
..
</c:when>
<c:when test="<boolean>">
...
</c:when>
...
...
<c:otherwise>
...
</c:otherwise>
</c:choose>
属性:
1.choose 标签没有属性
2.when 标签只有一个test属性,必须有属性
3.otherwise 标签没有属性
注意:
1.choose标签和otherwise标签没有属性,而when标签必须有一个test属性
2.choose标签中必须包含至少一个when标签,可以没有otherwise标签（Illegal "choose" without child "when" tag）
3.otherwise标签必须设置在最后一个when标签之后(Illegal "c:when" after "c:otherwise" tag in "c:choose" tag.）
4.choose标签中只能设置when标签与otherwise标签（Illegal child tag in "c:choose" tag: "c:if" tag）
5.when标签和otherwise标签中可以嵌套其他标签
6.otherwise标签会在所有的when标签不执行时才会执行
<%
request.setAttribute("score",90);
%>
<c:choose>
<c:when test="${score<60}">
<h2>你个小渣渣</h2>
</c:when>
<c:when test="${score==60}">
<h2>分不在高,及格就行!</h2>
<c:if test="${1==1}"></c:if>
</c:when>
<c:when test="${scroe>60 && score<80}">
<h2>哎呦不错哦!</h2>
</c:when>
<c:otherwise>
<h2>你很棒哦!</h2>
<c:if test="${1==1}">11</c:if>
</c:otherwise>
</c:choose>
<forEach循环>
forEach标签:
格式:
<c:forEach
items="<object>"
begin="<int>"
end="<int>"
step="<int>"
var= "<String>"
varStatus = "<String>"
></c:forEach>
属性:
begin: 开始数
end: 结束数
step: 间隔数
var: 限于变量名,用来接收当前遍历的成员
items: 要循环的数据<数组,List,Map等>
1.迭代主体内容多次
<c:forEach begin="开始数" end="结束数" step="间隔数" var="限域变量名"></c:forEach>
相当于Java中的for....int
for(int i=0;i<10;i++){}
2.循环
<c:forEach items="要被循环的数据" var="限域变量名"></c:forEach>
相当于java中的foreach
foreach(String str:list){}
<!-- 迭代主体内容多次 -->
<c:forEach var="i" begin="1" end="10" step="1">
${i}
</c:forEach>
<!-- 迭代详细内容 -->
<c:forEach items="${list}" var="item" varStatus="itemp">
元素内容: ${item}
元素下标: ${itemp.index}
第几个元素: ${itemp.count}
是否时首次: ${itemp.first}
是否时尾次: ${itemp.last}
</c:forEach>
<!-- 循环List集合 -->
<c:forEach items="${list}" var="i">
${i}
</c:forEach>
<!-- 循环Map -->
<C:forEach items="${map}" var="i">
${i.key} ${i.value}<br/>
</C:forEach>
<!-- 循环对象集合 -->
<c:if test="${!empty list}">
<c:forEach items="${list}" var="i">
${i.id}
</c:forEach>
</c:if>
11. ajax的简单应用
function checkName(result){
var xhr = new XMLHttpRequest();
var url = "checkNames.shtml?name="+result;
xhr.open("get",url,true);
xhr.onreadystatechange = function(){
var state = xhr.readyState;
if(state==4){
if(xhr.status==200){
var data = xhr.responseText;
if(data=="false"){
document.getElementById("spans").innerHTML="用户名已存在";
document.getElementById("spans").style.color="red";
}else{
document.getElementById("spans").innerHTML="用户名可用";
document.getElementById("spans").style.color="green";
}
}
}
}
xhr.send(null);
}
$(function(){
$("[name=userName]").blur(function(){
var uName = $(this).val();
$.ajax({
url:"checkNames.shtml",
type:"post",
data:{"name",uName},
success:function(result){
if(result=="true"){
$("#spans").html("用户名已存在").css("color","red");
$(".btn-submit").attr("disabled",false);
}else{
$("#spans").html("用户名可用").css("color","green");
$(".btn-submit").attr("disabled",true);
}
}
})
})
})
$("[name=userName]").blur(function(){
var uName=$(this).val();
$.post("checkNames.shtml",{"name":uName},function(result){
if(result=="true"){
$("#spans").attr("class","glyphicon glyphicon-ok").css("color","green");
$(".btn-submit").attr("disabled",false);
}else{
$("#spans").attr("class","glyphicon glyphicon-remove").css("color","red");
$(".btn-submit").attr("disabled",true);
}
})
})
$.get("checkNames.shtml?name="+uName+"",function(result){
if(result=="true"){
$("#spans").attr("class","glyphicon glyphicon-ok").css("color","green");
$(".btn-submit").attr("disabled",false);
}else{
$("#spans").attr("class","glyphicon glyphicon-remove").css("color","red");
$(".btn-submit").attr("disabled",true);
}
});
String name = request.getParameter("name");
UserInfoDao uiDao = new UserInfoDaoImpl();
UserInfo userInfo = uiDao.checkUser(name);
if(userInfo!=null){
response.getWriter().print(false);
}else{
response.getWriter().print(true);
}
| 参数 | 类型 | 说明 |
|---|
| url | String | 发送请求的地址，默认为当前页地址 |
| type | String | 请求方式，默认为GET |
| data | String或Array | 发送到服务器的数据,参数 |
| success | 任意类型 | 请求成功后调用的函数；参数result：可选，由服务器返回的数据 |
| dataType | String | 预期服务器返回的数据类型，包括：XML、HTML、Script、JSON、JSONP、text |
12. ajax的应用
var phone=[{
brand:"华为",
color:"紫色",
price:4000
},{
brand:"小米",
color:"蓝色",
price:"5000"
},{
brand:"苹果",
color:"白色",
price:"9000"
}];
$(phone).each(function(i,e){
console.log();
$(".uls").append($("<li></li>").html(e.brand+"----"+e.color+"----"+e.price));
})
<ul class="uls"></ul>
导入包: import com.alibaba.fastjson.JSON;
MessageDao mDao = new MessageDaoImpl();
List<Message> mlist = mDao.getAllMessage();
response.getWriter().print(JSON.toJSONString(mlist));
$.ajax({
url:"jsonServlet.shtml",
type:"post",
success:function(result){
$("#yibu").empty();
result=eval("("+result+")");
var select = $("<select></select>");
$(result).each(function(i,e){
$("#yibu").append($("<li></li>").html(e.title+"---"+e.sendDate));
})
}
});
JSON.toJSONString(元素);
result=eval(result);
@JSONField(format = "yyyy-MM-dd HH-mm-ss");
| 格式 | 说明 |
|---|
| JSON.toJSONString(元素) | 把元素转换成字符串 |
| result=eval(result) | 转换回原来的格式 |
| @JSONField(format = “yyyy-MM-dd HH-mm-ss”) | 在实体类属性上加上注解，表示日期类型 |
| @JSONField(serialize = false) | 数据不读取 |
13. 过滤器
<%
@WebFilter("/s01")
public class Filter01 implements Filter {
@Override
public void init(FilterConfig filterConfig) throws ServletException {
System.out.println("Filter01 init...");
}
@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
System.out.println("Filter01 正在拦截...");
filterChain.doFilter(servletRequest,servletResponse);
System.out.println("Filter02 正在响应...");
}
@Override
public void destroy() {
System.out.println("Filter01 destroy...");
}
}
%>
14. 文件上传
<form action="index.jsp" method="post" enctype="multipart/form-data">
</form>
<%
@MultipartConfig
@WebServlet("/updateServlet")
public class uploadServlets extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
String uName = request.getParameter("uName");
System.out.println("用户名:"+name);
Part part = request.getPart("myFile");
String fileName = part.getSubmittedFileName();
System.out.println("文件名称:"+fileName);
String upload = request.getServletContext().getRealPath("/upload/");
System.out.println("路径:"+upload);
part.write(upload+fileName);
Student stu = new Student();
stu.setStudentNo(Integer.parseInt(id));
stu.setPhotos("upload/"+fileName);
StudentDao stuDao = new StudentDaoImpl();
stuDao.updateStudent(stu);
response.sendRedirect(path+"/indexServlet.shtml");
String realPath = request.getServletContext().getRealPath("/upload/");
StringBuffer sb = new StringBuffer();
Collection<Part> parts = request.getParts();
for (Part part : parts) {
String fileName = part.getSubmittedFileName();
if(fileName!=null){
part.write(realPath+fileName);
sb.append("upload/"+fileName+";");
System.out.println("上传成功!");
}
}
sb.deleteCharAt(sb.length()-1);
System.out.println(sb);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req, resp);
}
}
%>
15. 清除表单和模态框
$("#form-add-box")[0].reset();
16. serialize() 方法 获取表单中所有信息
<!--
1. serialize() 方法通过序列化表单值创建 URL 编码文本字符串。
2. 您可以选择一个或多个表单元素（如输入和/或文本区），或表单元素本身。
3. 序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。
-->
$("button").click(function(){
$("div").text($("form").serialize());
});
扫一扫
240
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
