【示例】手把手教你构建一个简单的JavaWeb应用(会员注册唯一性检查,不带数据库)
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 voiddestroy()6 {7 super.destroy();8 }9 public void doGet(HttpServletRequest request, HttpServletResponse response) throwsServletException,IOException10 {11 doPost(request,response);12 }13 public void doPost(HttpServletRequest request, HttpServletResponse response) throwsServletException,IOException14 {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() throwsServletException{}26 }
接着开始编写index.html页面,主页页面保存在WebContent文件夹下,而不是WEB-INF
1
2
3
4
5
检查用户唯一性6
7
8 varxmlHttp;9 functioncreatXMLHttpRequest()10 {11 if(window.ActiveXObject){xmlHttp=newActiveXObject("Microsoft.XMLHTTP");}12 else if(window.XMLHttpRequest){xmlHttp=newXMLHttpRequest();}13 }14 functionbeginCheck()15 {16 vartempLoginName=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 functionprocessor()26 {27 varresponseContext;28 if(xmlHttp.readyState==4){29 if(xmlHttp.status==200)30 {31 responseContext=xmlHttp.responseText;32 if(responseContext=="true") alert("valid");33 elsealert("invaild");34 }35 }36 }37
38
39
40
41
42
43
44
在WEB-INF下新建文件web.xml对刚刚的项目进行配置,注意的就是/CheckUser 开头不能少/
1 <?xml version="1.0" encoding="UTF-8"?>
2
3
4
5
6 CheckUser
7 CheckUser
8
9
10 CheckUser
11 /CheckUser
12
13
14
运行
选择刚刚配置好的服务器
点击finishi,马上页面就会跳转
同时打开console可以看到刚刚server启动的详细情况
测试
可以直接就在eclipse里面看,也可以复制地址到浏览器,现在在输入框中填写名字
然会就会发现只有点回车才会有用,单击按钮没有反应
这是因为之前在input设置的就是button 将他修改为submit即可
然后要解决并没有按照js写的alert而是直接输出后台的值的问题,查看代码发现xmlHttp.onreadystatexhanges=processor; 打错了修正为xmlHttp.onreadystatechange=processor;((+_+)?我也不知道为啥打错了)
接着运行
但是又发现点击确定后还会跳转到写了结果的页面,这是为什么呢???
上面代码已修改一直错误,这个问题还没有解决2019-03-07