【示例】手把手教你构建一个简单的JavaWeb应用(会员注册唯一性检查,不带数据库)
Eclipse配置Tomcat
首先在确保已经安装好Tomcat服务器后,打开eclipse配置Tomcat服务器(点开链接详解如何配置)
服务器创建好之后可以双击下图指示的位置打开服务器设置
可以看到在红圈位置中,选择的是一个选项,就在当前的开发位置进行配置开发,Deploy path为wtpwebapps。所以我在当前文件夹下新建了名为wtpwebapps的文件夹,待会的项目就创建在此
新建CheckUser项目
只需要填好项目名称就好其他的不用改变,注意选择路径为E:\eclipse-workspace\wtpwebapps
接下在Project Explorer就可以看到当前的文件结构,主要用用到的就是Java Resource, WebContent
- 在Java Resource\src 下新建class文件填入代码,这里的代码就是服务器端处理代码
1 import java.io.*;
2 import javax.servlet.*;
3 import javax.servlet.http.*;
4 public class CheckUser extends HttpServlet {//创建servlet
5 public void destroy()
6 {
7 super.destroy();
8 }
9 public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException,IOException
10 {
11 doPost(request,response);
12 }
13 public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException,IOException
14 {
15 response.setContentType("text/html");
16 PrintWriter out=response.getWriter();
17 String[] logined= {"bts","army","admin"};//当前已经注册过的会员
18 String loginName=request.getParameter("loginName");//从request请求中得到填入的会员名字
19 String responseContext="true";//初始化返回值为true
20 for( String s:logined) if(loginName.equals(s)) responseContext="false"; //遍历已注册会员,如果名字已存在则设置返回值为false
21 out.println(responseContext);//向前端输出值
22 out.flush();
23 out.close();
24 }
25 public void init() throws ServletException{}
26 }
- 接着开始编写index.html页面,主页页面保存在WebContent文件夹下,而不是WEB-INF
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>检查用户唯一性</title>
6 </head>
7 <script language="javascript">
8 var xmlHttp;
9 function creatXMLHttpRequest()
10 {
11 if(window.ActiveXObject){xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}
12 else if(window.XMLHttpRequest){xmlHttp=new XMLHttpRequest();}
13 }
14 function beginCheck()
15 {
16 var tempLoginName=document.all.loginName.value;
17 if(tempLoginName=="") {alert("please input the name"); return;}
18 creatXMLHttpRequest();
19 xmlHttp.onreadystatechange=processor;
20
21 xmlHttp.open("GET","CheckUser?loginName="+tempLoginName);
22 xmlHttp.send(null);
23
24 }
25 function processor()
26 {
27 var responseContext;
28 if(xmlHttp.readyState==4){
29 if(xmlHttp.status==200)
30 {
31 responseContext=xmlHttp.responseText;
32 if(responseContext=="true") alert("valid");
33 else alert("invaild");
34 }
35 }
36 }
37 </script>
38 <body>
39 <form name="form1" action="CheckUser" method="post">
40 <input name="loginName" type="text" id="loginName">
41 <input type="button" name="checkLoginName" value="有效性检查" onclick="beginCheck()">
42 </form>
43 </body>
44 </html>
- <url-pattern>/CheckUser</url-pattern>
1 <?xml version="1.0" encoding="UTF-8"?>
2
3 <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
4
5 <servlet>
6 <servlet-name>CheckUser</servlet-name>
7 <servlet-class>CheckUser</servlet-class>
8 </servlet>
9 <servlet-mapping>
10 <servlet-name>CheckUser</servlet-name>
11 <url-pattern>/CheckUser</url-pattern>
12 </servlet-mapping>
13
14 </web-app>
运行
选择刚刚配置好的服务器
点击finishi,马上页面就会跳转
同时打开console可以看到刚刚server启动的详细情况
测试
可以直接就在eclipse里面看,也可以复制地址到浏览器,现在在输入框中填写名字
然会就会发现只有点回车才会有用,单击按钮没有反应
这是因为之前在input设置的就是button 将他修改为submit即可<input type="submit" name="checkLoginName" value="有效性检查" οnclick="beginCheck()">
然后要解决并没有按照js写的alert而是直接输出后台的值的问题,查看代码发现xmlHttp.onreadystatexhanges=processor; 打错了修正为xmlHttp.onreadystatechange=processor;((+_+)?我也不知道为啥打错了)
接着运行
但是又发现点击确定后还会跳转到写了结果的页面,这是为什么呢???
上面代码已修改一直错误,这个问题还没有解决2019-03-07