综合小项目(HTML+JQuery+js+Ajax+mysql+H5)

先来看一下最终效果图：

1.首先，在以下例子中进行更改：

查看文章

这个例子是使用HTML和css建立的一个经典的界面，我们这次需要做的就是在登陆界面中，与数据库连接，实现登陆，注册功能：

首先更改登陆小窗口：

更改为以下代码，实现上述效果：

<table style="width: 300px;height: 180px;border: 0px;" align="center">
<tr>
  <td style="width: 100px;height: 40px;border: 0px;" align="center">
    <b style="font-family: 楷体;font-size: 18px;color: black;">用户名:</b>
  </td>
  <td style="width: 200px;height: 40px;border: 0px;" align="center">
    <input type="text" name="user" id="username">
  </td>
</tr>
<tr>
  <td colspan="3" style="width: 300px;height: 30px;border: 0px;" align="center">
    <b id="user"></b>
  </td>
</tr>
<tr>
  <td style="width: 100px;height: 40px;border: 0px;" align="center">
    <b style="font-family: 楷体;font-size: 18px;color: black;">密  码:</b>
  </td>
  <td style="width: 200px;height: 40px;border: 0px;" align="center">
    <input type="password" name="password" id="password">
  </td>
</tr>
<tr>
  <td colspan="3" style="width: 300px;height: 30px;border: 0px;" align="center">
    <b id = "pswd"></b>
  </td>
</tr>
<tr>
  <td colspan="3" style="width: 300px;height: 40px;border: 0px;"align="center">
    <table style="width: 300px;height: 40px;border: 0px;" align="center">
      <tr>
        <td style="width: 100px;height: 40px;border: 0px;" align="center">
          <input id="zhuce" type="button" value="注册" style="font-family: 楷体;font-size: 18px;">
        </td>
        <td style="width: 100px;height: 40px;border: 0px;"align="center">
          <input id="chongzhi" type="button" value="重置" style="font-family: 楷体;font-size: 18px;">
        </td>
        <td style="width: 100px;height: 40px;border: 0px;" align="center">
          <input id="denglu" type="button" value="登陆" style="font-family: 楷体;font-size: 18px;">
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>      

2.因为要使用到JQuery，所以需要导入包之类的，具体请看：

查看文章

为用户名输入框添加改变事件：

$("#username").change(function() {
    $("#user").html("");
    var val=$(this).val();
val=$.trim(val);

if(val != "")
{
var url="/serverlrtandhtml/servlet/IndexServerlet";
var args={"method":"yanzhenguser","username":val,"time":new Date()};
$.post(url,args,function(data){
    $("#user").html(data);
  });
}
  });      

为密码输入框添加改变事件：

$("#password").change(function() {
    var val=$(this).val();
val=$.trim(val);
if(val != "")
{
  if(val.length < 6 || val.length > 10){
    $("#pswd").html("<font color='red'>密码长度为6-10位</font>");
  }else{
    $("#pswd").html("<font color='green'>密码格式正确</font>");
  }
}else{
  $("#pswd").html("<font color='red'>密码不能为空</font>");
}
  });      

为注册按钮添加点击事件：

$("#zhuce").click(function() {
  var user = $("#username").val();
  var pswd = $("#password").val();
  if(user != "" && pswd != "")
  {
    if(pswd.length < 6 || pswd.length > 10){
  $("#pswd").html("<font color='red'>密码长度为6-10位</font>");
}else{
  $("#pswd").html("<font color='green'>密码格式正确</font>");
  var url="/serverlrtandhtml/servlet/IndexServerlet";
  var args={"method":"zhuce","username":user,"password":pswd};
  $.post(url,args,function(data){
      alert(data);
  });
    
    }
  }
});      

为重置按钮添加点击事件：

$("#chongzhi").click(function() {
  $("#username").val("");
  $("#password").val("");
  $("#user").html("");
  $("#pswd").html("");
});      

为登陆按钮添加点击事件：

$("#denglu").click(function() {
    var user = $("#username").val();
    var pswd = $("#password").val();
if(user != "" && pswd != "")
{
var url="/serverlrtandhtml/servlet/IndexServerlet";
var args={"method":"denglu","username":user,"password":pswd};
$.post(url,args,function(data){
    alert(data);
  });
}
  });      

讲到这里，HTML文件中就OK了

3.需要连接数据库，就需要在web Root文件夹下的WEB-INF文件夹下的lib文件夹中加入mysql的jar文件：

4.在servlet类中连接数据库，并进行操作数据库：

首先创建一个servlet类：

①在项目的src文件夹下新建一个package，名字为：com.xust.jia

②在包上右键，new一个Servlet类，取名：IndexServerlet;

完成后如下：

5.我们在servlet类中进行以下修改：

定义准备变量：

private String string = "com.mysql.jdbc.Driver";
private ResultSet resultSet;
private Connection connection = null;
private Statement statement = null;
private String result=null;
private boolean userflag = false;
private boolean pawdflag = false;      

①在init方法中进行数据库的连接，因为此方法是服务器在启动时，创建servlet对象时调用的

public void init() throws ServletException {
  // Put your code here
  try {
    Class.forName(string);
    String urlString = "jdbc:mysql://127.0.0.1:3306/xkd?&useSSL=true";
    String userString = "root";
    String passwordString = "a1871";//密码
    connection = DriverManager.getConnection(urlString, userString, passwordString);
    statement = connection.createStatement();
  }catch (Exception e) {
  // TODO: handle exception
    e.printStackTrace();
  }
}      

②在destroy方法中进行数据库的关闭，因为此方法是数据库重启或停止时调用的销毁方法：

public void destroy() {
  super.destroy(); // Just puts "destroy" string in log
  // Put your code here
  try{
    if(connection != null)
      connection.close();
    if(statement != null)
      statement.close();
  }catch(Exception e){
    e.printStackTrace();
  }
}      

③在dopost方法中进行选择方法进行调用：

public void doPost(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
  String string = request.getParameter("method");
  if(string.equals("yanzhenguser")){
    result = null;
    yanzhenguser(request, response);
    if(userflag){
      result="<font color='red'>无此用户</font>";
    }else{
      result="<font color='green'>该用户可以使用</font>";
    }
  }
    
  else if(string.equals("denglu")){
    result = null;
    denglu(request, response);
    if(!userflag && pawdflag){
      result = "登陆成功";
    }
    else if(!userflag && !pawdflag){
      result = "密码错误";
    }
    else if(userflag && pawdflag){
      result = "用户名错误";
    }
    else if(userflag && !pawdflag){
      result = "用户名密码错误";
    }
    else{
      result = "未知错误";
    }
  }
  else if(string.equals("zhuce")){
    result = null;
    zhuce(request, response);
  }
  response.setCharacterEncoding("UTF-8");
  response.setContentType("text/html;charset=UTF-8");
  response.getWriter().print(result);
}      

④写用户名验证方法：

public void yanzhenguser(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
  try{
    String sqlString = "SELECT username FROM user";
    resultSet = statement.executeQuery(sqlString);
    String userName=request.getParameter("username");
    while(resultSet.next())
    {
      String name = resultSet.getString(1);
      if(name.equals(userName)){
        userflag = false;
        break;
      }
      else{
        userflag = true;
        continue;
      }
    }
    
  } catch (Exception e) {
    // TODO: handle exception
    e.printStackTrace();
  } 
  
}      

⑤写密码验证方法：

public void yanzhengpswd(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
  try{
    String sqlString = "SELECT password FROM user";
    resultSet = statement.executeQuery(sqlString);
    String pswdString=request.getParameter("password");
    while(resultSet.next())
    {
      String pswd = resultSet.getString(1);
      if(pswd.equals(pswdString)){
        pawdflag = true;
        break;
      }
      else{
        pawdflag = false;
        continue;
      }
    }
    
  } catch (Exception e) {
    // TODO: handle exception
    e.printStackTrace();
  } 
}      

⑥写登陆方法：

public void denglu(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
  userflag = false;
  pawdflag = false;
  yanzhenguser(request, response);
  yanzhengpswd(request, response);
}      

⑦写注册方法：

public void zhuce(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
  System.out.println("zhuce");
  userflag = false;
  yanzhenguser(request, response);
  try{
    if(userflag){
      String sqlString = "INSERT INTO user(username,password) VALUES('"
          + request.getParameter("username") +"','"+ request.getParameter("password") +"')";
      System.out.println(sqlString);
      if(statement.executeUpdate(sqlString) != 0){
        result = "注册成功";
      }else{
        result = "注册失败";
      }
    }else{
      result = "用户名错误，注册失败";
    }
  }catch(Exception e){
    e.printStackTrace();
  }
}      

6.OK项目完成，放到tomcat服务器上，进行测试：

①输入文本框：

正确：

②登陆：

使用此用户名，密码登陆：

使用其他用户名：

③重置：

④注册：

⑤使用④注册的用户名密码登陆：