JQuery、Servlet及JSP

最新推荐文章于 2023-07-21 20:33:43 发布

沈念

最新推荐文章于 2023-07-21 20:33:43 发布

阅读量802

点赞数 2

分类专栏： Web 文章标签： JQuery/Servlet/JSP

本文链接：https://blog.csdn.net/Seulementzh1010/article/details/79533051

版权

Web 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、jQuery

1、jQuery定义：javaScript库。

在jQuery中，$是jQuery的简写。$.ajax等价jQuery.ajax。

2、DOM对象与jQuery对象：

DOM对象定义：通过javaScript中getElementsByName等方法获取节点元素，得到即是DOM对象；

var vari=DOM对象

jQuery对象定义：通过jQuery包装DOM对象后产生的对象。

var $vari=jQuery对象

3、两者之间的相互转换：

（1）DOM对象—>jQuery对象：var $variable =$(DOM对象);

（2）jQuery对象—>DOM对象：方式一：var $a=$("#a");var a=$a[0];

方式二：通过jQuery对象本身提供的get(index)方法获取DOM对象

var $a=$("#a");var a=$a.get(0);

4、$(document).ready(function(){})方法

（1）$(document).ready(function(){

// DOM结构绘制完毕后执行此处代码

});

简写：$(function(){

// DOM结构绘制完毕后执行此处代码

});

eg1:
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>firstjQuery页面</title>
	<script type="text/javascript" src="jquery-3.1.1.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
		alert("第一个jQuery方法！");
	});

    $(function(){
      alert("hello,jQuery!");
    });

	</script>
</head>
<body>
	
</body>
</html>

5、jQuery选择器

（1） id选择器 $(#ID名称)

eg: $( "#myDiv").css( "border", "2px solid yellow" );

(2)通用选择器 $("*" )

(3)类选择器 $(".class")

(4).复选框选择器 $(":checkbox" )

(5)后代选择器 $( "ancestor descendant" )

(6)子选择器 $("parent > child" )

(7)多元素选择器 $( "selector1, selector2, selectorN" )

eg2:
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jQuery选择器</title>
	<style type="text/css">	
    .classDiv{
     width: 200px;
     height: 200px;
     color: #FFEBCD;
     background-color:red;
    }
	</style>

	<script type="text/javascript" src="jquery-3.1.1.js"></script>
	<script type="text/javascript">
       $(function() {
       	  $("#but").click(function() {
       	  	 $("#mydiv").css("font-style","italic");
       	  	 $("#mydiv").css("color","#00FFFF");
       	  	 $("#mydiv").css("background-color","#008000");
       	  });

       	  $("#but2").bind("click",function() {
       	  	 $(".classDiv").css("background-color","#000000");
       	  });
       	  $("*").css("background-color","#FAEBD7");
       });

	</script>
</head>
<body>
   <div id="mydiv" class="classDiv">jQuery select!</div>
   <input type="button"  value="ID点击变色" id="but"/> 
   <div class="classDiv"></div>
   <input type="button" value="class点击变色" id="but2">
	
</body>
</html>

6、事件冒泡:

事件冒泡：当在有包含关系的DOM层级上绑定同一个事件时，事件会按照DOM层级结构顺序从内到外一次触发事件；

停止事件冒泡：在事件处理函数中加上event事件对象，调用event事件对象的stopPropagation()方法。

阻止默认行为的也使用event事件对象：event.preventDefault();

eg3:时间冒泡：
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>事件冒泡</title>
    <style type="text/css">
    #parentDiv{
      width: 200px;
      height: 200px;
      background-color:#F0E68C; 
    }

    #childDiv{
      width: 100px;
      height: 100px;
      background-color: #ADFF2F;
      margin: 10px auto;

    }
    </style>

    <script type="text/javascript" src="jquery-3.1.1.js"></script>
    <script type="text/javascript">
     $(function() {
     	$("#childDiv").bind("click",function(event) {
     		alert("childDiv被点击了");
     		event.stopPropagation(); //停止事件冒泡
     	});
     	
     	$("#parentDiv").bind("click",function() {
     		alert("parentDiv被点击了");
     	});
     	
     	$("body").bind("click",function() {
     		alert("body被点击了");
     	});
     });

    </script>
</head>
<body>
	<div id="parentDiv">
	    parentDiv内容
	<div id="childDiv">childDiv内容</div>
	    parentDiv内容
	</div>
</body>
</html>

eg4:阻止默认行为：
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>阻止默认行为</title>
	<script type="text/javascript" src="jquery-3.1.1.js"></script>
	<script type="text/javascript">
    $(function(){
    	$("#regForm").bind("submit",function(event) {
    		var uname=$("#username").val();
    		var pwd=$("#pwd").val();
    		if (uname=="") {
              alert("用户名不能为空！");
              event.preventDefault();    // 阻止提交表单的默认行为
    		} 

    		if(pwd.length<6){
    			alert("密码长度不能小于6位！");
    			event.preventDefault();
    		}
    	});	
    });


	</script>
</head>
<body>
    <form action="serverURL" method="post" id="regForm">
    注册用户名：  <input type="text" name="username" id="username" placeholder="请输入用户名"><br/><br/>
    注册密码：    <input type="password" name="pwd" id="pwd" placeholder="请输入密码"><br/><br/>
                  <input type="submit" value="注册" >
                  <input type="reset" value="重置">
    </form>
  
</body>
</html>

二、Servlet

1、Servlet定义：

使用Java语言编写的服务端程序。主要运行在服务器端，由服务器调用

注意：Servlet是单实例，尽量少用全局变量。

2、Servlet运行流程及体系结构：

—HttpServletRequests请求——>

Web浏览器 Web容器（Servlet）

<—HttpServletResponse响应——

Servlet(接口)<——GenericServlet(抽象类)<——HttpServlet(抽象类)

3、Servlet实现方式：

（1）实现Servlet接口，覆写其中的方法；

（2）继承GenericServlet类，覆写service方法；

（3）继承HttpServlet类

根据要求可以覆写doGet(xxx)、doPost(xxx)、service(xxx)，如果覆写了service(xxx)方法，则执行service(xxx)方法，而不执行doGet(xxx)或doPost(xxx)。

eg1:用户登录界面设置：

(1)登录页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录页面</title>
</head>
<body>
   <form action="loginURL" method="post">
            用户名：<input type="text" name="username"/> <br/><br/>
            密码：<input type="password" name="pwd"/> <br/><br/>
            <input type="submit" value="登录"/>   
            <input type="reset" value="重置"/>
   </form>
</body>
</html>

(2)欢迎页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>欢迎页面</title>
</head>
<body> <h3>恭喜，登录成功！</h3>
</body>
</html>

(3)失败页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>失败页面</title>
</head>
<body>
   <h3>用户名或密码错误，请重新登录！</h3>
   <a href="http://localhost/HelloWeb/hello/login.html">点击跳转</a>
</body>
</html>

(4)服务器端响应
package org.afanti.com;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class LoginServlet extends HttpServlet{
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp)
    		throws ServletException, IOException {
    	doPost(req,resp);
    }
    
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp)
    		throws ServletException, IOException {
    	String username=req.getParameter("username");
    	String pwd=req.getParameter("pwd");
    	if("lily".equals(username) && "123789".equals(pwd)){
    		req.getRequestDispatcher("/hello/welcome.html").forward(req,resp);
    	}else{
    		req.getRequestDispatcher("/hello/fail.html").forward(req,resp);
    	}
    }
}

(5)web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
  <display-name>HelloWeb</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  
  <servlet>
      <servlet-name>firstServlet</servlet-name>
      <servlet-class>org.LoginServlet</servlet-class>
  </servlet>
  <servlet-mapping>
      <servlet-name>firstServlet</servlet-name>
      <url-pattern>/hello/loginURL</url-pattern>
  </servlet-mapping>
</web-app>

注意：url两种访问方式：（优先访问后台服务路径）

第一种：访问资源 http://localhost/HelloServlet/hello/login.html

第二种：访问后台服务路径（直接与Servlet关联）

4、Servlet配置方式：

（1）注解： @WebServlet(urlPatterns={“/xxx”})；

（2）web.xml(部署描述符)配置

注意：<load-on-startup>属性的值为0或正数指明当容器启动时就加载该Servlet,值越小，优先级越高；但是loadOnStartup的值为负数或没有此属性时则当请求该Servlet时，才加载该Servlet.

5、Servlet生命周期：

加载（实例化）：Servlet容器创建Servlet实例；

初始化：该容器调用init()方法；

服务：如果请求Servlet,则容器调用service()方法；

销毁：销毁实例之前调用destroy()方法。

6、服务端跳转（转发）与客户端跳转（重定向）

跳转路径：

（1）服务器端跳转：

“服务器端跳转的路径”可以是绝对路径也可以是相对路径。

服务器端如果是绝对路径，要写成： /跳转路径（"/"代表的是上下文根目录后的"/"）

（2）客户端跳转：

使用的是绝对路径，要写成： /上下文根目录/跳转路径

三、JSP（Java Server Page）

1、JSP定义：

Java服务页，动态页面技术。存货于Web容器中。

JSP=HTML+Java代码（即在HTML页面中嵌入Java代码）

JSP与Servlet关系：

Servlet是JSP前身，本质一样。 JSP页面在运行时由Web容器转换成Servlet类，然后编译，再运行编译好的.class文件，最终转换成HTML代码发送给客户端浏览器。

2、在HTML页面中嵌入Java代码

（1）<%!

Java类、方法、全局变量(或常量)

（2）<%

Java代码(语句),局部变量

（3）<%= 变量或常量 %> // 输出内容

eg2:HTML页面中嵌入Java代码:
<%@ page  contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html >
<html>
<head>
<meta  charset="utf-8">
<title>第一个JSP页面</title>
</head>
<body>
  <%!
    String s="hello,JSP";
  %>
  <%=s %>
  <h1>JSP知识的学习！</h1>
  <%
   String num=request.getParameter("pwd");//获取请求参数名为pwd的参数值
  if("123890".equals(num))
  {%>
    <h3>密码正确！欢迎登录！</h3>
  <%
  }else{
  %>
    <h3>密码不对，请重新输入密码！</h3>
  <%
  }
  %>
</body>
</html>

3、JSP四种属性范围：

（1） page属性范围:

使用pageContext内置对象操作，但是习惯上将这种范围称为page范围。只在一个页面中保存属性，跳转之后无效

（2）request属性范围

在一个请求范围内保存属性，例如：服务器端跳转后想要让属性保存下来，则可以使用request属性范围。

（3）session属性范围（ Session代表客户端与服务器端的一次会话，保存于服务器端。）

也就是属性可以在一个会话范围内保存，只要是同一个会话，则无论是客户端跳转还是服务端跳转，都可以保存。

（4） application属性范围

将属性设置到服务器中，这样，所有会话都可以访问该属性。不宜设置过多，因为会影响服务器性能。

eg3:
(1)pageContext页面属性
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>pageContext页面属性</title>
</head>
<body>
  <%
      pageContext.setAttribute("pageAttr","page范围的属性值");   // 设置page页面范围属性
      String pageAttr=(String)pageContext.getAttribute("pageAttr");
   %>
   <h3>在本页面接收到的page属性范围的值是：<%=pageAttr%></h3>
  <a href="scope.jsp">点击跳转</a>
</body>
</html>
(2)request属性范围
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>request属性范围</title>
</head>
<body>
   <%
       request.setAttribute("reqAttr","request请求属性范围的值");   // 设置请求范围的属性
       request.getRequestDispatcher("scope.jsp").forward(request,response);   // 服务器端跳转(转发)，保证跳转之后是同一个请求
   %>
</body>
</html>
(3)session属性范围
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>session属性范围</title>
</head>
<body>
   <%
       session.setAttribute("sessionAttr","session范围的属性值");
    //   request.getRequestDispatcher("scope.jsp").forward(request,response);   // 服务器端跳转(转发)，保证跳转之后是同一个请求
   %>
   <a href="scope.jsp">点击跳转</a>
</body>
</html>
(4)application属性范围
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>application属性范围</title>
</head>
<body>
  <%
      application.setAttribute("appAttr","application范围的属性值");
  %>
  <a href="scope.jsp">点击跳转</a>
</body>
</html>
(5)接收属性
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>接收属性</title>
</head>
<body>
   <%
       String pageAttr=(String)pageContext.getAttribute("pageAttr");   // 获取page范围属性
       String reqAttr=(String)request.getAttribute("reqAttr");    // 获取request范围属性
       String sessionAttr=(String)session.getAttribute("sessionAttr");  // 获取session范围属性
       String applicationAttr=(String)application.getAttribute("appAttr");  // 获取application范围属性
   %>
   <h3>接收到的page属性范围的值是：<%=pageAttr%></h3>
   <h3>接收到的request属性范围的值是：<%=reqAttr%></h3>
   <h3>接收到的session属性范围的值是：<%=sessionAttr%></h3>
   <h3>接收到的application属性范围的值是：<%=applicationAttr%></h3>
</body>
</html>

4、Cookie与Session

（1）Cookie: Cookie是Http header的一部分，其传输由HTTP协议控制;
要将Cookie发送到浏览器，需要调用HttpServletResponse的addCookie(cookie对象)方法；

注意：. 在客户端每次向服务器端发送请求时都会将之前设置的Cookie随着头信息一起发送到服务器上； Cookie由服务器端生成，但保存于客户端。

（2）Cookie与Session关系：（重点理解）

在Cookie中保存着一个SessionId(在Tomcat中的这个Cookie名为JSESSIONID),这样用户在每次发出请求时都会将此SessionID发送到服务器端，服务器端依靠此Cookie中保存着的SessionId来区分每一个不同的客户端。

（1）生成cookie对象，并将其发送给客户端：
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Cookie</title>
</head>
<body>
   <%
        Cookie cookie=new Cookie("mycookie","Hello,this is my cookie!");   // 生成一个Cookie对象
        response.addCookie(cookie);   // 将该Cookie发送给客户端
   %>
</body>
</html>

（2）获取请求头信息：
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ page import="java.util.Enumeration"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>获取所有的请求头信息(request headers)</title>
</head>
<body>
   <h3>所有的请求头信息如下：</h3>
   <%
       Enumeration<String> enumers=request.getHeaderNames();   // 获取所有的头信息名称
       while(enumers.hasMoreElements()){
    	   String headerName=enumers.nextElement();   // 获取当前的头信息名称
    	   String headerValue=request.getHeader(headerName);
    	   out.println("<h4>"+headerName+"=============>"+headerValue+"</h4>");    // 输出到浏览器
       }
       
       String sessionId=session.getId();
   %>
   <h3>当前的SessionId是：<%=sessionId%></h3>
</body>
</html>

沈念

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JQuery、Servlet及JSP

一、jQuery1、jQuery定义：javaScript库。在jQuery中，$是jQuery的简写。$.ajax等价jQuery.ajax。2、DOM对象与jQuery对象： DOM对象定义：通过javaScript中getElementsByName等方法获取节点元素，得到即是DOM对象； var vari=DOM对象 jQuery对...
复制链接

扫一扫