JavaWeb基础知识-----Servlet
一、建立JavaWeb项目开发工具，IDEA二、配置TomcatIDEA中，一个web项目会对应一个Tomcat，每次创建一个项目都需要设置Tomcat配置过程如下一个简单的JavaWeb项目就搭建好了Servlet的使用添加servlet需要的jar包创建一个Servlet会自动帮你生成下面的类：import j...
一、建立JavaWeb项目
开发工具，IDEA
二、配置Tomcat
IDEA中，一个web项目会对应一个Tomcat，每次创建一个项目都需要设置Tomcat
配置过程如下
一个简单的JavaWeb项目就搭建好了
Servlet的使用
添加servlet需要的jar包
创建一个Servlet
会自动帮你生成下面的类：
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
public class LoginServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}
此时就可以运行项目了，只不过在打开的浏览器中什么都没有，因为默认访问的index.jsp页面中什么也没有写
使用Servlet实现简单的登录验证
一，index.jsp中代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Servlet</title>
</head>
<body>
<h1>Hello world！</h1>
<form action="/loginServlet" method="GET">
用户名：<input type="text" name = "userName"><br>
密 码：<input type="password" name="password"><br>
<input type="submit" value="登录">
</form>
</body>
</html>
运行项目，此时点击提交，就会跳转一个空白页面，因为什么都没有写
在刚才建立的LoginServlet中可以添加一个输出，在IDEA的控制台中就可以看到输出了
package com.review;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
public class LoginServlet extends HttpServlet {
//当有POST请求时，该函数会执行
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("doPost........"); //控制台打印
}
//当有GET请求时，该函数会执行
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("doGet........"); //控制台打印
}
}
二：获取前端传入的值
在建立的LoginServlet中的添加如下代码
//当有GET请求时，该函数会执行
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("doGet........"); //控制台打印
String userName = request.getParameter("userName");
String password = request.getParameter("password");
System.out.println(userName+"-->"+password);
//form表单提交以及页面跳转
if(password.equals("123456")){
request.getRequestDispatcher("success.jsp").forward(request,response);
}else{
request.getRequestDispatcher("index.jsp").forward(request,response);
}
}再次运行项目，输入内容，点击提交，后端就可以打印前端输入的值
同时再与index.jsp同级的目录下建立一个success.jsp的文件，如果你输入的密码为123456，页面就会跳转到success.jsp页面
三、使用form表单提交的问题
数据通过表单提交，会出现页面的跳转，
以登录为主：
成功：servlet跳转到登录成功页面
失败：servlet跳转到登录页面
存在的问题：
（1）点击提交，会出现页面的跳转
（2）登录页面上的内容丢失了
（3）前端和后端没有脱离，有关系
页面的跳转：是不是前端的问题，但是现在页面跳转有后端帮我做了，
如果是C/S：是移动端，有怎么实现页面的跳转呢。
怎么解决：
使用异步加载：ajax
前后端分离：后台只处理并返回数据，数据，数据，即可。
四、使用Ajax进行数据提交并跳转页面
使用
首先，前端虚引用JQuery包，目录结构如下
index.jsp代码如下
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Servlet</title>
</head>
<body>
<h1>Hello world！</h1>
<div>
用户名：<input type="text" name = "userName" id="userName"><br>
密 码：<input type="password" name="password" id="password"><br>
<input type="button" value="提交" id="btn1">
</div>
</body>
<script src="lib/jquery-1.9.1.min.js"></script>
<script>
$("#btn1").click(function () {
var userName = $("#userName").val();
var password = $("#password").val();
$.ajax({
url:"/loginServlet",
method:"GET",
data:{
userName:userName,
password:password
},
success:function (result) {
if(result==="欢迎"+userName){
location.href = "success.jsp";//页面跳转
}
else{
alert(result);
}
},
error:function (result) {
console.log(result);
}
});
});
</script>
</html>
建立的Loginservlet代码如下
package com.review;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
public class LoginServlet extends HttpServlet {
//当有POST请求时，该函数会执行
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("doPost........"); //控制台打印
}
//当有GET请求时，该函数会执行
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("doGet........"); //控制台打印
String userName = request.getParameter("userName");
String password = request.getParameter("password");
System.out.println(userName+"-->"+password);
response.setContentType("text/html;charset=utf-8");
PrintWriter writer = response.getWriter();
if(password.equals("123456")){
writer.print("欢迎"+userName);
}
else{
writer.print("密码错误！");
}
writer.flush();
writer.close();
}
}
此时运行代码，就可以正常跳转和提示了
前端后端甩锅问题
在项目开发的过程中，可能会遇到以下问题
前端运行时，输入了数据，提交之后却没有结果返回
后端说我的代码没有问题，那么，到底如何判断是谁的问题
方法如下，首先看前端的数据到底有没有传入后端
以这次的代码为案例，在doGet方法出设置一个断点，前端输入数据后提交，会卡在断点处
此时就可以查看前端的数据到底有没有传入，方法如下
此处我的前端没有问题，数据都传入了，那么如何查看后端结果有没有返回呢？
方法如下，首先在前端浏览器中设置断点，然后点击提交，就可以看到后台返回的结果了，此处后端数据正确返回，所以可以进行页面跳转
总结
用以上方法可以很方便的区分到底是前端的问题还是后端的问题，可以让你更快的找到出现错误的地方
使用JSON
在上面的案例中，虽然可以看到项目执行的效果，倒是数据传输的格式还是非常不规范的
为了规范的传输数据的格式，可以使用JSON
这里使用到了阿里巴巴的一个控件FastJSON，它可以很好的帮助你使用JSON
下载地址如下 官方下载地址
添加依赖
目录结构如下，web包下的lib是为jsp提供相关jar包的，而WEB-INF中的lib是为了class类提供相关工具jar包的
为什么不放到src目录下呢？你可以查看out文件夹，就知道原因了
此处可以看到你的类，因为项目没有刷新，所有fastjson.jar没有加载
添加依赖的方式如上面的案例一样，选择的是jar包
index.jsp修改如下
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Servlet</title>
</head>
<body>
<h1>Hello world！</h1>
<div>
用户名：<input type="text" name = "userName" id="userName"><br>
密 码：<input type="password" name="password" id="password"><br>
<input type="button" value="提交" id="btn1">
</div>
</body>
<script src="lib/jquery-1.9.1.min.js"></script>
<script>
$("#btn1").click(function () {
var userName = $("#userName").val();
var password = $("#password").val();
$.ajax({
url:"/loginServlet",
method:"GET",
data:{
userName:userName,
password:password
},
success:function (result) {
result = result || "{}";
var resultObj = JSON.parse(result);//将你传入的JSON字符串转成JSON对象
var code = resultObj.code;
if(code===0){
var msg = resultObj.msg;
alert(msg);
location.href = "success.jsp";//页面跳转
}
else{
var msg = resultObj.msg;
alert(msg);
}
},
error:function (result) {
console.log(result);
}
});
});
</script>
</html>
LoginServlet代码如下
package com.review;
import com.alibaba.fastjson.JSONObject;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
public class LoginServlet extends HttpServlet {
//当有POST请求时，该函数会执行
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("doPost........"); //控制台打印
}
//当有GET请求时，该函数会执行
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("doGet........"); //控制台打印
String userName = request.getParameter("userName");
String password = request.getParameter("password");
System.out.println(userName+"-->"+password);
response.setContentType("text/html;charset=utf-8");
PrintWriter writer = response.getWriter();
JSONObject jsonObject = new JSONObject();
if(password.equals("123456")){
jsonObject.put("code",0);
jsonObject.put("msg","密码正确");
JSONObject user = new JSONObject();
user.put("userName",userName);
jsonObject.put("data",user);
}
else{
jsonObject.put("code",1);
jsonObject.put("msg","密码错误");
}
String result = jsonObject.toJSONString();
writer.print(result);
writer.flush();
writer.close();
}
}
此时可以运行项目，并进行相关提示
相关问题总结
问题1：导入JQuery包之后，编写JQ代码，有时候会出现JQ包未导入，原因如下
当你加载页面时，你的项目中会出现一个out文件夹，这个文件夹会将你的项目打包好，并在浏览器中显示
所以，你查看的网页其实是在out文件夹中的，但当项目中导入JQuery包，out文件夹中并没有及时的将JQuery包导入，
所以就会出现上述问题，解决方案有两个：
1：重新启动项目
2：如果重新启动项目后还是会出现错误，那么就删除out文件夹中的内容，再次运行项目，就可以了
注意，out文件夹不要删除！
问题2：下图所示代码 result = result || "{}" 有什么用
接收到的结果，是一个JSON字符串，那么，如果接收到的结果不是一个JSON字符串，会出现什么问题？
会出现以下的错误：
但执行下面的语句，就不会出错：
它只出现了undefined，并没有报错，是可以通过编译的，但是上面的语句连编译都不会通过
所以当你返回的result不是一个json对象时，问题2中的代码可以为你解决这个问题，这是一个项目的优化点
问题3：如何取出JSON对象中的值
现在将接收到的JSON字符串转换为JSON对象，那么，如果想要取出JSON对象中的值，该如何操作
先来分析一下项目中JSON对象的组成
var json = {
code ： 0 ,//code为不同的数字，不同的数字代表不同的含义
msg ： "message",//msg为不同的信息，即当code取不同的值时，msg有不同的内容
data ：{
userId ："xxxxxx",
userMEssage : {
uname : "zx",
usex : "male"
}
} //data，数据，此处包含了前端需要的数据，该数据由后端返回，data中也可以理解为
//data内容有多个，而且可以嵌套下去
}那么，如何获取JSON对象的值，方法如下
JSON中的数据是以键值对的形式存放的，如上面的案例，键为 code 值为 0
想要获取值，可以使用自带的 json.code 来获取
如果想要获取data中的值，可以使用一下方法 json.data['key'].value 来获取
以此类推，想要获取上述案例data中的usex，可以使用 json.data['userMEssage']['usex'].value
这样就可以获取到JSON对象中自己想要的值
源码下载 代码--提取码：rxmw
CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！
更多推荐
0
0- 0
已为社区贡献6条内容
所有评论(0)