jQuery&ajax連接servlet&實現簡單的登入&前後端分離式開發

知識點jQuery ajax

 $.ajax({
                   url:'url',//url爲請求地址,服務器地址
                   type:'post/get',//請求方式一般爲post或get
                   data:{ //傳向服務器的參數,格式如下
                       name:$('[name=name]').val(),
                       pwd:$('[name=pwd]').val(),
                   },
                   dataType:'text',//服務器響應的數據類型
                   success:function (data) {//請求成功後要執行的方法,data爲服務器響應的數據 }
               });

效果展示

在這裏插入圖片描述

css代碼jquery代碼html代碼寫在js項目裏面

servlet代碼寫在web的servlet裏面

css代碼

<style>
    *{
        text-align: center;
    }
    body{
        background: url("images/b.png") no-repeat;
        background-size: 100% auto;
    }
    .loginDiv{
        margin: auto;
        margin-top: 170px ;
        width: 300px;
        height: 350px;
        background: #6FBD9F;
        border-radius: 30px;
        opacity: 0.6;
        padding-top: 10px;
    }
    input{
        width: 80%;
        height: 30px;
        margin: 10px;
        background: none;
        text-align: left;
        padding-left: 10px;
        color: white;
        border-radius: 10px;
        opacity: 0.6;
        border:2px solid;

    }
    h1{
        color: white;
    }
    .button{
        width: 80%;
        height: 30px;
        border:none;
        text-align: center;
        font-size: 25px;
    }
</style>

html代碼

<body>
<div class="loginDiv">

        <h1>UserLogin</h1>
        <input type="text" value="用戶名" name="name"><br>
        <input type="text" value="密碼" name="pwd"><br>
        <input class="button" type="button" value="Login"><br>
        <img src="images/xiahuangya.gif">


</div>

jquery代碼

<script src = 'https://code.jquery.com/jquery-3.3.1.min.js'></script>
<script >
var flag=0;
   $(function () {
   	       $("[name=name]").blur(function () {
           var zName = /^[A-Z]{1}\w{5,19}$/;//請輸入以大寫字母開頭6-20位
           if(zName.test($(this).val())){
               $(this).css("border-color","green");
                flag+=1;//如果通過正則表達式就加1
           }else{
               $(this).css("border-color","red");
           }
       });
       $("[name=pwd]").blur(function () {

           var zPwd = /^[A-Z]{1}.{7,14}$/;//請輸入以大寫開頭 數字字母符號混合 8-15位
           if(zPwd.test($(this).val())){
               $(this).css("border-color","green");
               flag+=1;//如果通過正則表達式就加1
           }else{
               $(this).css("border-color","red");
           }
       });
       $('.button').on('click',function () {//判斷賬號密碼是否正確
           if (flag>=2){
               $.ajax({
                   url:'http://localhost:8080/Demo/servlet/LoginServlet',
                   type:'post',
                   data:{
                       name:$('[name=name]').val(),
                       pwd:$('[name=pwd]').val(),
                   },
                   dataType:'text',
                   success:function (data) {
                      if (data=='true'){
                          window.location.href=('農場.html');
                      }else{
                       $('[name=pwd]').select();
                      }
                   }
               });
        }
       });
    });

servlet代碼

  public class LoginServlet extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response)
		throws ServletException, IOException {

	doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
		throws ServletException, IOException {
	response.setHeader("Access-Control-Allow-Origin","*");
	response.setContentType("text/html");
	PrintWriter out = response.getWriter();
	request.setCharacterEncoding("utf-8");
	String name = request.getParameter("name");
	String pwd = request.getParameter("pwd");
	System.out.println(name+pwd);
	String n = "M123456789";
	String p = "M123456789";
	if(n.equals(name)&&p.equals(pwd)){
			out.print("true");
			System.out.println("true");
	}else{
			out.print("false");
			System.out.println("false");
	}
	out.flush();
	out.close();
}

}

源碼地址

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章