綜合小項目(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伺服器上，進行測試：

①輸入文本框：

正确：

②登陸：

使用此使用者名，密碼登陸：

使用其他使用者名：

③重置：

④注冊：

⑤使用④注冊的使用者名密碼登陸：

綜合小項目(HTML+JQuery+js+Ajax+mysql+H5)

繼續閱讀

Javascript建構Bingo卡片遊戲

Ubuntu16.04安裝Apache+MySQL+PHP1. 安裝Apache2. 安裝MySQL3. 安裝PHP4. 安裝phpMyAdmin

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

jquery_126_demo

MySQL的4種隔離級别？出現問題

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

neo4j之cypher使用文檔

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

mysql使用source指令導入.sql檔案

layui多任務上傳添加進度條