html与java的巧妙结合

统一开发环境UDE

2015-05-15

当我们用html写了一个页面，有时候我们还想再页面的基础上加上很多功能，直接在html上写代码可能会比较麻烦或者不易实现，我们将html与java结合起来，使在html中可以用到java的代码。

首先我们在java中新建一个web工程，名为web1。我们需要用到的html文件放在webcontent文件下，java文件放在src下面。我们先在webcontent新建一个html文件，写一个页面。文件名为login.html

<html>
    <head>
    <title>登陆界面</title>
    <style type="text/css">
    h1 {color:red}
    </style>
    </head>
    <h1 align=center color=yellow>欢迎来到登陆界面</h1>
    
    <body >
    <div align=center>
    <form action="">
    <img src="Koala.jpg" alt="动物"/>
    <br/>
    <label for=pass>用户名：</label>
    <input type="text" name="passname" id="pass"/>
    <br/>
    <label for=pass1>密码：</label>
    <input type="password" name="passpwd" id="pass1"/>
    <br/>
    <input type="submit" value="登陆" />
    <br/>
     <br/>
      <br/>
    <select name="fruit">
   
    	<option value="apple">apple</option>
    	<option value="banana">banana</option>
    	</select>
    </form>
    </div>
    </body>
    
</html>

接着我们在新建的web工程下原有的web.xml文件中定义和配置servlet映射，当然在此之前不要忘了在Servers中add一下web工程。

在web.xml中配置servlet代码如下

<?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" 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_3_0.xsd" id="WebApp_ID" version="3.0">
  <display-name>web1</display-name>
  <welcome-file-list>
    <welcome-file>login.html</welcome-file>
  </welcome-file-list>
  <servlet>
    <servlet-name>loginweb</servlet-name>
    <servlet-class>loginweb.loginweb</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>loginweb</servlet-name>
    <url-pattern>/login</url-pattern>
  </servlet-mapping>
</web-app>

我们现在开始在src下写一个名为loginweb.java的java文件

package loginweb;

import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class loginweb extends HttpServlet{
	
protected void doGet(HttpServletRequest req,
		HttpServletResponse resp)throws ServletException,
		java.io.IOException{
//	获取输出流
	PrintWriter out=resp.getWriter();
	out.println("<h1>hello world!</h1>");
	out.flush();
	out.close();
}
	
protected void doPost(HttpServletRequest req,
		HttpServletResponse resp)throws ServletException,
		java.io.IOException{
	
//获取输入流
    String passname=req.getParameter("passname");
    String passpwd=req.getParameter("passpwd");
//对输出流进行编码
    resp.setCharacterEncoding("gb2312");
    PrintWriter out=resp.getWriter();
//    在java中写html文件
    out.write("<html><head>");
    if("admin".equals(passname)&&"111".equals(passpwd)){
    	System.out.println("登陆成功");
//    	登陆成功后暂停5秒并且跳转到百度页面
    	out.write("<meta http-equiv='Refresh' " +
    			"content='5;url=http://www.baidu.com'/>");
    }else{
//    	登陆失败后暂停五秒跳回登陆界面
    	out.write("<meta http-equiv='Refresh' " +
    			"content='5;url=login.html'/>");
    }
    
    out.write("</head><body>");
    if("admin".equals(passname)&&"111".equals(passpwd)){
    	System.out.println("登陆成功");
    	out.write("<p>登陆成功,五秒钟后跳转到" +
    			"<a href='www.baidu.com'>主页</a></p>");
    	
    }else{
    	out.write("<p>登陆失败,五秒钟后跳转到" +
    			"<a href='login'>登陆界面</a></p>");
    
    }
    out.write("</body></html>");
    out.flush();
    out.close();
    
}

}

最后在登陆界面的login.html代码中改一下form表单属性如下