1.json：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP ‘index.jsp‘ starting page</title>
<script type="text/javascript">
// JSON: javascript object notation(js的对象诠释)
// JSON也是一个对象，首先json对象需要被{}包裹，里面的内容键值对对应(key : value)，键值对和键值对用逗号(,)隔开，最后一个键值对一定不能加逗号(,)
var testJson = {
name : "zhangsan",
age : 31,
sex : "male"
}
var testJson2 = ‘{"name" : "zhangsan", "age" : 31, "sex" : "female"}‘; // json格式的字符串
function testFunction() {
var jsons = testJson;
var jsons2 = testJson2;
alert(jsons);
alert(jsons2);
alert(jsons.name); //json也可以通过key来取value Map转json json转Map
//例1： 把json格式的字符串转换为json对象
// 方法一:eval();
/* eval("var test = "+testJson2);
alert(test);
alert(test.age); */
// 方法二：parse();
alert(JSON.parse(testJson2)); //如果使用JSON.parse()函数，就必须把单引号写在最外面‘{"name" : "zhangsan", "age" : 31, "sex" : "female"}‘，因为parse()函数遵循json格式，json默认不支持单引号
//例2：把json对象转换为json格式的字符串
// JSON.stringify()函数可以把json对象转换为json格式的字符串
alert(JSON.stringify(testJson2));
}
</script>
</head>
<body>
<input type="button" value="触发" onclick="testFunction();" />
</body>
</html>
2.ajax：
又称为局部刷新
Asynchronous Javascript And XML(异步的js和xml文档)
是一种新的交互式技术
一般用处：分页，三级联动...
login：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP ‘login.jsp‘ starting page</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("#uname").on("blur", function() {
var username = $("#uname").val();
if (username != null && username != "") {
// 获取到了用户输入的username的值
// 以get的请求方式发送(我乐意！)
/* $.get("user.sxt", "type=checkUsername&username=" + username, function(data) {
// 服务器端返回的数据
// data是形式参数，接收的是服务器端(servlet)返回回来的数据
}); */
// 以post的请求方式发送
/* $.post("user.sxt", "type=checkUsername2&username="+username, function(data){
}); */
// 无论用post还是get
/**
$.post/get("请求的地址(url)", "需要传递的参数", function(data){
// 服务器端向客户端响应的数据(json)
});
*/
// 究极版本的ajax
// ajax的终极版本，同样遵循json的格式，key : value为一个整体，每个key和value用:隔开,每一个键值对之间用逗号隔开，最后一个键值对不能有逗号
/* $.ajax({
async : true, //(是否异步，默认为true)
data : {"type":"checkUsername", "username" : username}, // 客户端向服务器端发送的数据，类型为object
method : "get", // 请求方式(get/post)
//type和method是一样的，都是选择请求的方式，在jQuery1.9版本之前用type，之后用method
url : "user.sxt", // 客户端向服务器端发送数据的地址--->请求地址
success : function(data) { // 当成功响应以后，接收到的数据-->服务器端向客户端响应的数据
alert(data);// data服务器端向客户端响应的数据
}
}); */
// function(data)只能接收字符串
/* $.get("user.sxt", "type=checkUsername&username=" + username, function(data) {
// 服务器端返回的数据
// data是形式参数，接收的是服务器端(servlet)返回回来的数据
alert(data);
}); */
// function(data)只能接收json对象
$.getJSON("user.sxt", "type=checkUsername&username=" + username, function(data){
alert(data.username);
});
}
});
});
</script>
</head>
<body>
用户名：
<input type="text" name="username" id="uname" />
</body>
</html>
UserServlet：
package cn.zzsxt.lee.web.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.Gson;
import cn.zzsxt.lee.web.entity.User;
@WebServlet("/user.sxt")
public class UserServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
String method = request.getMethod().toLowerCase();
System.out.println(method);
String type = request.getParameter("type");
if ("get".equals(method) && "checkUsername".equals(type)) {
checkUsername(request, response);
} else if("post".equals(method) && "checkUsername2".equals(type)) {
checkUsername2(request, response);
}
}
private void checkUsername2(HttpServletRequest request, HttpServletResponse response) {
String username = request.getParameter("username");
System.out.println("------------------------------"+username);
// 从数据库中查询是否存在zhangsan这个用户名
}
private void checkUsername(HttpServletRequest request, HttpServletResponse response) throws IOException {
String username = request.getParameter("username");
System.out.println("------------------------------"+username);
// 从数据库中查询是否存在zhangsan这个用户名
User user = new User();
user.setUsername(username);
//response.getWriter().print(username+":天青色等烟雨，而我在等你");// 服务器向客户端响应的数据
// 把user对象拆开，拼成一个json格式的字符串
Gson gson = new Gson();
String json = gson.toJson(user);
response.getWriter().print(json);
// response.getWriter().print(new Gson().toJson(user));
}
}
3.path：
UserServlet：
package cn.zzsxt.lee.web.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/user.sxt")
public class UserServlet extends HttpServlet {
/**
* 所有的servlet，凡是以/开头的路径，都定位到项目的根目录localhost:8080/项目名
*/
@Override
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("我是来处理用户请求的servlet，我被访问了");
// 开始处理请求
// 请求处理完毕，需要重定向
response.sendRedirect(request.getContextPath()+"/b/bb/bb3.jsp");
}
}
Index：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP ‘index.jsp‘ starting page</title>
</head>
<body>
<a href="a/a.jsp">跳转a</a>
<a href="a/aa/aa.jsp">跳转aa</a>
<pre>
web工程的WebRoot文件夹：称之为项目的根目录
http://localhost:8080/zzsxt--->项目的根目录
Java代码中src资源文件夹也称之为项目的根目录
../向上跳出一层
相对路径：怕文件名发生改变
以当前页面作为中心，向目标路径进行跳转
绝对定位：怕项目名发生改变
直接会定位到服务器的根目录
localhost:8080就称之为服务器根目录
每一次跳转都以服务器的根目录作为了中心:localhost:8080
如果部署名发生了改变，就以服务器(tomcat)的webapps文件夹下的项目名为准
以后在实际开发中，所有的路径跳转都需要使用绝对定位
而且servelt跳转jsp页面的时候
如果是重定向:response.sendRedirect(request.getContextPath+"/index.jsp");就以这个路径跳转
如果是请求转发的情况下:request.getRequestDispatcher("/index.jsp").forward(request, response);就以这个路径开始跳转
</pre>
</body>
</html>
4.Demo：
时间： 2024-10-28 15:36:30