Ajax实现登陆

于 2019-10-25 13:57:27 发布
阅读量908 收藏 3
点赞数 2
分类专栏： Ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45743799/article/details/102741471
版权

用Ajax前后端分离实现一个简单的用户登录页面

先看一下页面效果图
在这里插入图片描述
账号和密码格式错误
在这里插入图片描述
格式正确但是用户名或密码错误（清空密码框内容，选中账号框全部内容）
在这里插入图片描述
程序详解：
@： 对输入的账号和密码用正则表达式验证格式
@@： 格式错误会提示让你输入正确的格式
@@@： 验证输入的账号密码是否正确
@@@@： 不正确密码清空账号输入框的内容全部被选中
@@@@@： 账号和密码都正确会跳转到另外一个页面

  1. 看一下文件的布局结构
    在这里插入图片描述
  2. index.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">
	-->
  </head>
  <style>
		body{
   
			text-align: center;
			float: center;
			background-image: url(img/2.jpg);
		}
		#big{
   
			width: 60%;
			height: 500px;
			border: 1px #F9FBF8 solid;
			margin: 120px auto;
			background-image: url(img/3.jpg);
			opacity: 0.7;
		}
		#small{
   
			width: 25%;
			height: 45%;
			border
最低0.47元/天 解锁文章
风叶翩翩
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ajax实现登录页面跳转,Ajax登录功能实现
weixin_30840919的博客
08-05 3293
一：Ajax是什么？Ajax即Asynchronous Javascript And XML(异步JavaScript和XML)在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法。例如： HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。作用：使用Ajax...
ajax实现用户登录
lowser1的博客
01-05 3140
1.首先编写好html需要的基础样式,导入jquery链接 2.给获取验证码的输入框添加一个点击事件,添加一个函数,我们所有的操作都要在这个函数内执行,,判断用户输入的手机号是否正确,这里用到了正则表达式,也可以用普通的判断, 然后我们创建ajax对象请求数据,readyState为4,代表已经连接上服务器了,status为200,代表服务器已经给前端返回了数据,我们在将获取到的json数组转成对象,再把服务器传给前端的验证码的值拿出来,自动弹出到验证码输入框, 然后我们编写倒计时的j..
ajax登录案例
weixin_33923762的博客
01-22 487
（1）创建login_ajax.html文件 （2）渲染login_ajax.html文件 （3）渲染url （4）ajax请求 （5）ajax请求函数 （6）ajax请求函数的url 总结： （1）首先分析出请求地址时需要携带的参数 （2）视图函数处理完成之后，所返回的json的格式。JsonRepsone 转载于:https://blog.51cto.com/13742773/23...
Ajax登陆实例
husongs的专栏
09-17 855
index.jsp文件: 代码 %@ page language="java" import="java.util.*" pageEncoding="utf-8"%>   html>     head>     script>       //设一个变量         var XMLHttpReq=false;   
Ajax异步验证登陆或者注册
weixin_34262482的博客
03-02 506
首先介绍一个不错的学习Ajax的中文网站：http://www.w3school.com.cn/ajax/index.asp AJAX = 异步 JavaScript 和 XML。详细介绍见上面的网址即可； 1：首先介绍一下使用Javascript写的异步验证，然而在实际开发过程中很少用这种的，太过繁琐，但是依旧写一个吧！至少懂其原理哦！ 　　1.1：第一种方式：先说使用get方法向服务器发...
Ajax实现登录案例
10-14
在本文中，我们将深入探讨如何使用Ajax实现一个登录案例，以增强用户体验，使得用户无需刷新整个页面即可完成登录操作。我们将分析提供的代码片段，并解释关键部分。 首先，我们需要理解Ajax的核心概念。Ajax...
SpringBoot使用Ajax实现登录
12-02
在Spring Boot应用中，使用Ajax实现登录功能是一个常见的需求，它可以提供无刷新的用户体验，使得用户界面更加流畅。本文将详细介绍如何在Spring Boot环境中配置和使用Ajax进行登录处理。 首先，我们看到`pom.xml`...
jsp+servlet+ajax实现登录
02-28
在IT行业中，构建Web应用程序是常见的任务之一，而"jsp+servlet+ajax实现登录"的案例则是一个典型的前后端交互示例。这个案例利用了JavaServer Pages (JSP)、Servlet和Asynchronous JavaScript and XML (AJAX)的技术...
ajax实现登录功能
12-10
**Ajax 实现登录功能** Ajax 是一种在无需刷新整个网页的情况下，能够更新部分网页内容的技术。它的全称是 Asynchronous JavaScript and XML，即异步的 JavaScript 和 XML。Ajax 的核心在于利用 JavaScript 将用户...
使用ajax实现登录功能
贪吃小明的博客
07-13 1万+
//测试提交，对接程序删除即可 $("#login").click(function(){ var thisUsername = document.getElementById("username").value; var thisPassword = document.getElementById("password").value; if(username !...
Java+ajax写的登录实例
10-20
这是一个用java+ajax写的登录实例，算法比较简单，给初学者学习用
Ajax案例(验证用户名,登录,获取服务器时间)
11-05
Ajax案例： 案例一：通过Ajax获取服务器时间； 案例二：通过Ajax验证用户名； 案例三：通过Ajax进行登录。
ajax实现用户登陆验证
06-12
ajax实现用户登陆验证，是web工程，可以直接导入eclipse使用
Ajax发送GET请求
翻滚吧小牛
12-18 1568
这里用一个实例演示Ajax发送get请求，实例具体要求为一个注册页面，当用户填写完用户名称时，该输入框失去焦点后会通过Ajax向后台发送验证信息，如果用户名不是admin则通过验证，否则不通过验证。 下面先看JSP页面具体信息： 用户账号： 用户密码：
仿知乎登录首页粒子动态背景
项小莫的博客
09-27 969
前段时间做了一个注册用户界面，需要美化一下背景： [img]http://dl2.iteye.com/upload/attachment/0127/1580/f6249981-46fb-32ad-9a8b-d080e2693c45.png[/img] 配置文件: [code="js"]/** * Particleground demo * @author Jonathan N...
AJAX实现用户登录及校验
weixin_45216092的博客
10-24 1908
jquery中ajax的基本使用 今天介绍的是普通的ajax使用方法 实现对用户的校验及其登录 效果： 源代码： jsp页面： <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> ...
ajax实现用户登录注册和退出
kxydoublek的博客
06-21 1万+
ajax实现用户注册登录和退出
Ajax实现简单的登录验证与帐号注册
恰西v的前端开发学习笔记
01-05 2万+
上一篇博客介绍了Ajax的GET和POST方法以及上传文件的进度条展示,这篇博客将介绍一个简单的登录与注册功能的实现
Ajax验证登录后跳转到主页面
热门推荐
qiuych3的博客
06-02 3万+
问题在“物业报修系统”的登录页面里，我用Ajax的POST方法给服务器提交用户邮箱和密码，服务器验证后给我返回一条JSON数据，里边有验证的结果。一般地，在登录验证成功后，网站会自动跳转到主页面，这应该怎么实现呢？（问题可以描述为：JS是如何让页面自动跳转的呢）方案只要在Ajax的success函数中加入这么一条： // ，登录验证通过，自动跳转到主页面 window.location
ajax实现登录
最新发布
05-30
要使用 Ajax 实现登录，可以按照以下步骤进行： 1. 创建一个登录表单，包含用户名和密码输入框，以及提交按钮。 2. 在 JavaScript 中，获取表单元素和提交按钮元素，并通过 addEventListener() 方法为提交按钮添加 click 事件监听器。 3. 在事件监听器中，获取用户名和密码输入框中的值，并创建一个 XMLHttpRequest 对象。 4. 使用 XMLHttpRequest 对象发送 POST 请求，向后端服务器发送登录请求，并传递用户名和密码参数。 5. 在请求成功后，获取服务器返回的响应数据，并根据响应数据决定是否登录成功。 6. 如果登录成功，可以在前端页面中显示一条登录成功的提示信息，并进行相应的页面跳转。 以下是一个示例代码，供参考： ```html <form id="login-form"> <label>用户名：</label> <input type="text" id="username" name="username"><br> <label>密码：</label> <input type="password" id="password" name="password"><br> <button type="button" id="login-button">登录</button> </form> <script> var form = document.getElementById('login-form'); var usernameInput = document.getElementById('username'); var passwordInput = document.getElementById('password'); var loginButton = document.getElementById('login-button'); loginButton.addEventListener('click', function() { var xhr = new XMLHttpRequest(); xhr.open('POST', '/login'); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.onload = function() { if (xhr.status === 200) { var response = JSON.parse(xhr.responseText); if (response.success) { alert('登录成功！'); window.location.href = '/home'; } else { alert('登录失败，请检查用户名和密码！'); } } else { alert('登录失败，请稍后再试！'); } }; var data = 'username=' + encodeURIComponent(usernameInput.value) + '&password=' + encodeURIComponent(passwordInput.value); xhr.send(data); }); </script> ``` 请注意，以上示例代码仅为参考，具体实现方式可能因后端服务器的不同而有所差异。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值