/* 2 功能:生成博客目录的JS工具 3 测试:IE8,火狐,google测试通过 6 */ 7 var BlogDirectory = { 8 /* 9 获取元素位置,距浏览器左边界的距离(left)和距浏览器上边界的距离(top) 10 */ 11 getElementPosition:function (ele) { 12 var topPosition = 0; 13 var leftPosition = 0; 14 while (ele){ 15 topPosition += ele.offsetTop; 16 leftPosition += ele.offsetLeft; 17 ele = ele.offsetParent; 18 } 19 return {top:topPosition, left:leftPosition}; 20 }, 21 22 /* 23 获取滚动条当前位置 24 */ 25 getScrollBarPosition:function () { 26 var scrollBarPosition = document.body.scrollTop || document.documentElement.scrollTop; 27 return scrollBarPosition; 28 }, 29 30 /* 31 移动滚动条,finalPos 为目的位置,internal 为移动速度 32 */ 33 moveScrollBar:function(finalpos, interval) { 34 35 //若不支持此方法,则退出 36 if(!window.scrollTo) { 37 return false; 38 } 39 40 //窗体滚动时,禁用鼠标滚轮 41 window.onmousewheel = function(){ 42 return false; 43 }; 44 45 //清除计时 46 if (document.body.movement) { 47 clearTimeout(document.body.movement); 48 } 49 50 var currentpos =BlogDirectory.getScrollBarPosition();//获取滚动条当前位置 51 52 var dist = 0; 53 if (currentpos == finalpos) {//到达预定位置,则解禁鼠标滚轮,并退出 54 window.onmousewheel = function(){ 55 return true; 56 } 57 return true; 58 } 59 if (currentpos < finalpos) {//未到达,则计算下一步所要移动的距离 60 dist = Math.ceil((finalpos - currentpos)/10); 61 currentpos += dist; 62 } 63 if (currentpos > finalpos) { 64 dist = Math.ceil((currentpos - finalpos)/10); 65 currentpos -= dist; 66 } 67 68 var scrTop = BlogDirectory.getScrollBarPosition();//获取滚动条当前位置 69 window.scrollTo(0, currentpos);//移动窗口 70 if(BlogDirectory.getScrollBarPosition() == scrTop)//若已到底部,则解禁鼠标滚轮,并退出 71 { 72 window.onmousewheel = function(){ 73 return true; 74 } 75 return true; 76 } 77 78 //进行下一步移动 79 var repeat = "BlogDirectory.moveScrollBar(" + finalpos + "," + interval + ")"; 80 document.body.movement = setTimeout(repeat, interval); 81 }, 82 83 htmlDecode:function (text){ 84 var temp = document.createElement("div"); 85 temp.innerHTML = text; 86 var output = temp.innerText || temp.textContent; 87 temp = null; 88 return output; 89 }, 90 91 /* 92 创建博客目录, 93 id表示包含博文正文的 div 容器的 id, 94 mt 和 st 分别表示主标题和次级标题的标签名称(如 H2、H3,大写或小写都可以!), 95 interval 表示移动的速度 96 */ 97 createBlogDirectory:function (id, mt, st, interval){ 98 //获取博文正文div容器 99 var elem = document.getElementById(id); 100 if(!elem) return false; 101 //获取div中所有元素结点 102 var nodes = elem.getElementsByTagName("*"); 103 //创建博客目录的div容器 104 var divSideBar = document.createElement('DIV'); 105 divSideBar.className = 'sideBar'; 106 divSideBar.setAttribute('id', 'sideBar'); 107 var divSideBarTab = document.createElement('DIV'); 108 divSideBarTab.setAttribute('id', 'sideBarTab'); 109 divSideBar.appendChild(divSideBarTab); 110 var h2 = document.createElement('H2'); 111 divSideBarTab.appendChild(h2); 112 var txt = document.createTextNode('目录导航'); 113 h2.appendChild(txt); 114 var divSideBarContents = document.createElement('DIV'); 115 divSideBarContents.style.display = 'none'; 116 divSideBarContents.setAttribute('id', 'sideBarContents'); 117 divSideBar.appendChild(divSideBarContents); 118 //创建自定义列表 119 var dlist = document.createElement("dl"); 120 divSideBarContents.appendChild(dlist); 121 var num = 0;//统计找到的mt和st 122 mt = mt.toUpperCase();//转化成大写 123 st = st.toUpperCase();//转化成大写 124 //遍历所有元素结点 125 for(var i=0; i

Jsp学习笔记(2)——页面导航、表单、EL表达式

页面导航

有两种跳转页面的方法。重定向和请求转发

两者区别:

 请求转发(forward)重定向(rerect)
请求服务次数 1 2
是否保留第一次请求request范围的属性 保留 不保留
地址栏的请求URL是否改变 不变 改变,相当于在地址栏重新输入URL按下回车键

说明的例子:

  • 请求转发:张三去银行办理业务,在窗口A办理,窗口A的业务员发现自己无权操作,便把张三的业务交给其他人去完成
  • 重定向: 张三去银行办理业务,在窗口A办理,窗口A的业务员发现自己无权操作,提示张三去窗口B办理

重定向

重定向,客户端实际上进行了两次请求,在第一次请求,获得到了一个特殊的response,没有任何内容,客户端接收到此请求,会修改location,向新的location再次发送请求

重定向(response),会丢失request的数据,而sension里面的数据不会丢失

应用程序的根目录(上下文) request.getContentPath()

// "/" 是tomcat的根目录 (http://localhost:8080/)
response.sendRedirect("url")
// 应该这样写:
respones.sendRedirect(request.getContentPath()+"/dologin.jsp");

请求转发

// url中的“/”是web根目录(就是web文件夹)
request.getRequestDispatcher("url").forward(request,resopnes)

请求转发前后的request是同一个对象

表单

在form标签里面存在着表单元素,form设置action,表示,当点击提交按钮,就会跳转到的jsp页面(重定向)

<form method="post" action="login.jsp">
    <input name="username" type="text"/>
    <input name="password" type="password"/>
    <input type="submit" value="login"/>
</form>

上面的代码块,点击按钮的时候,就会跳转到login.jsp,同时带上了参数 username和password

实际上,相当于发送了一条这样的请求 login.jsp?username=xx&password=xx

之后,就可以通过request.getParameter("username")这样的方式来获得传过来的数值

如果某个标签有disable,即使该标签有name属性,但请求的参数是无法获得name的对应的值

客户端(js,html)中 “/”表示localhost:8080

jsp/servlet 在请求转发就是web根目录(应用程序上下文)

EL表达式

EL表达式就是一种简单的写法,主要用来从request、response、session、pageContext等内置对象取出数据。

例如,使用jsp表达式取出请求参数:

<h1><%=request.getParameter("name")%></h1>

可以这样写:

<h1>${param.name}</h1>

如果是setAttribute存入的数据:

<h1><%=request.getAttribute("name")%></h1>

EL表达式得这样写:

<h1>${requestScope.name}</h1>

如果存入了一个对象,想要获得对象的某个属性值

<h1><%=request.getAttribute("employee").getName()%></h1>

EL表达式:

<h1>${requestScope.employee.name}</h1>

请求参数对象:

对象说明
param 与request.getParameter()方法一样
paramValues 与request.getParameterMap()方法一样

作用域对象:

 JSP隐式对象存储数据示例EL隐式对象EL示例
页面作用域 pageContext pageContext .setAttribute(“name”, 对象); pageScope
请求作用域 request request .setAttribute(“name”, 对象); requestScope
会话作用域 session session .setAttribute(“name”, 对象); sessionScope
应用程序作用域 application application .setAttribute(“name”, 对象); applicationScope

EL表达式中,可以不写前面的那个作用域,EL表达式就会默认按作用域范围大小从大到小查找

//pagecontext ->request ->session-> application
<h1>${employee.name}</h1>

访问数组、集合或者Map

<h1>${array[2]}</h1>
<h1>${list[1]}</h1>

//相当于map.get("red")
<h1>${map["red"]}</h1>
<h1>${map.red}</h1>

新增,删除,更新操作使用重定向

posted @ 2019-09-19 13:29  我的人生  阅读(211)  评论(0)    收藏  举报