使用Ajax做一个简单的登录判断

最新推荐文章于 2022-01-08 16:52:54 发布

是小王啊

最新推荐文章于 2022-01-08 16:52:54 发布

阅读量306

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/wangsong97/article/details/102731587

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

今天给大家带来的是一个简单的登录判断(使用Ajax)
我使用的是MyEclipse
先建立一个Servlet

import java.io.IOException;
import java.io.PrintWriter;
import java.nio.charset.Charset;

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


public class Ajax extends HttpServlet {

	/**
	 * Constructor of the object.
	 */
	public Ajax() {
		super();
	}

	/**
	 * Destruction of the servlet. <br>
	 */
	public void destroy() {
		super.destroy(); // Just puts "destroy" string in log
		// Put your code here
	}

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

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
			//设置文本格式
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset = utf-8");
		PrintWriter out = response.getWriter();
		String name = "张三";
		String pwd = "123456";
		String ajaxName = request.getParameter("name");
		String ajaxPwd = request.getParameter("pwd");
			System.out.println(ajaxName + ":" + ajaxPwd);
			if(name.equals(ajaxName) && pwd.equals(ajaxPwd)){
				out.print("ok");
			}else{
				out.print("error");
			}
		out.flush();
		out.close();
	}

	public void init() throws ServletException {
		// Put your code here
	}

}

下面是jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script src = "jquery.js"></script>
	//css样式
	<style>
		#show{
			font-size: 25px;
		}
		form,div{
			margin-top: 200px;
		}
		#name{
				border-radius: 10px;
			}
			#pwd{
				border-radius:10px;
			}
			#btn{
				border-radius:10px
			}
	</style>
  </head>
  <body >
  //节点
  <center>
	<form action="#">
		账号:<input type = "text" name = "name" id = "name" onclick = "verify()"/><br/><br/>
		密码:<input type = "text" name = "pwd" id = "pwd"/><br/><br/>
		<input type = "button" id = "btn" value = "登录" onclick = "change()"/>
	</form>
	<div id= "show"></div>
	</center>
	//Jquery代码 Ajax
	<script>
		$(function(){
			$(":button").on("click",function(){
				$.ajax({
					type:"post",
					url:"Ajax",
					data:{
						name:$("#name").val(),
						pwd:$("#pwd").val(),
					},
					dataType:"text",
					 success:function(data){
					 	if(data == "ok"){
					 		$("#show").text("登录成功!");
					 	}else{
					 		$("#show").text("登录失败!");
					 	}
					 }
				});
			});
		});
		//正则表达式输入框判断
		function verify() {
		
		 var name = document.getElementById("name").value;
            var pwd = document.getElementById("pwd").value;
		
			 //用户名:  大写字母开头 6-20位字符(不允许有符号但是允许有_)
            var nameL = /^[\u4e00-\u9fa5]+$/;
		
		  //密码：大写开头 数字字母符号混合 8-15位
            var pwdL = /^[A-Z][A-Za-z0-9]\w{7,14}.{1,30}$/;
            
            var result = nameL.test(name.trim());
            var result1 = pwdL.test(pwd.trim());
            
             if (result) {
                document.getElementById("nameResult").innerText = "✔";
                document.getElementById("nameResult").style.color = "green";
            } else {
                document.getElementById("nameResult").innerText = "✘";
                document.getElementById("nameResult").style.color = "red";
            }

            if (result1) {
                document.getElementById("pwdResult").innerHTML = "✔";
                document.getElementById("pwdResult").style.color = "green";
            } else {
                document.getElementById("pwdResult").innerText = "✘";
                document.getElementById("pwdResult").style.color = "red";
            }

		}
		function change(){
			document.getElementById("btn").style.background = "blue";
		}
	</script>
  </body>
</html>

是小王啊

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用Ajax做一个简单的登录判断

今天给大家带来的是一个简单的登录判断(使用Ajax)我使用的是MyEclipse先建立一个Servletimport java.io.IOException;import java.io.PrintWriter;import java.nio.charset.Charset;import javax.servlet.ServletException;import javax.ser...
复制链接

扫一扫