ajax简单的后台用户登录验证

最新推荐文章于 2022-12-05 00:51:31 发布
最新推荐文章于 2022-12-05 00:51:31 发布
阅读量1.3k 收藏 1
点赞数 1
分类专栏： ajax 文章标签： ajax xmlhttprequest html function input login
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sskwfnihc/article/details/1823543
版权
后台验证是WEB应用中使用非常广泛的一种应用形式,常用于验证用户登录/后台数据校验等等.
login.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <script type="text/javascript">
    <!--
     var xmlHttp ;
     function createXMLHttpRequest(){
      if(window.ActiveXObject){
       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") ;
      }
      else if(window.XMLHttpRequest){
       xmlHttp = new XMLHttpRequest() ;
      }
     }
     function checkUser(){
      createXMLHttpRequest() ;
      var name = document.getElementById("username").value ;
      var password = document.getElementById("password").value ;
      var url = "login_check.jsp?username="+name+"&password="+password ;
      xmlHttp.open("GET",url,true) ;
      xmlHttp.onreadystatechange = showResult ;
      xmlHttp.send(null) ;
     }
      function showResult(){
      if(xmlHttp.readyState == 4){
       if(xmlHttp.status == 200){
        var result = xmlHttp.responseText;//在页面上显示返回的结果
        document.getElementById("checkResult").innerHTML="<b>"+result+"</b>" ;
       }
      }
     }
    //-->
    </script>
  </head>
  <body>
    ajax<br>
    用户名:<input type="text" id="username"><div id="checkResult"></div><p>
    密码:<input type="text" id="password" ><p>
    <input type="button" value="检查用户名" οnclick="checkUser()"><p>
  </body>
</html>
login_check.jsp

<%@ page language="java" contentType="text/html; charset=GBK"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ajax</title>
  </head>
 
  <body>
    <%
     String name = request.getParameter("username") ;
     String password = request.getParameter("password") ;
     System.out.println("name--->"+name+" password---->"+password);
     if(name != null && password != null){
      if(name.equals("aja") && password.equals("ajax")){
       out.write("<font color=red>恭喜你!此用户名可用</font>");
      }else{
       out.write("<font color=red>此用户名已被人占用</font>") ;
      }
     }
     %>
  </body>
</html>

 
sskwfnihc
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ajax实现验证用户登陆
qq_41359998的博客
05-13 1873
Ajax验证用户登陆 我们再写一个Demo，利用Ajax实现对用户登陆的验证 login.jsp 注意这里的===是js中的严格等于，不仅要求值相同，类型也要相同 <%-- Created by IntelliJ IDEA. User: apple Date: 2022/2/7 Time: 6:53 下午 To change this template use File | Settings | File Templates. --%> <%@ page conten
Ajax实现登录验证
06-24
Ajax实现的登录页面，能够不刷新页面直接登录
使用ajax来验证登录
weixin_56863206的博客
08-08 1260
使用ajax来验证登录
通过Ajax实现注册登陆的表单验证，一看就会。
qq_60614034的博客
12-05 2973
ajax的简单应用，简单好懂。本次运用的软件为ideal，使用的是tomcat服务器，无框架编程。Asynchronous JavaScript And XML是一种通过JavaScript和后台进行通信的技术，能够实现页面的局部刷新，提高用户的体验常规页面刷新会更新整个页面。ajax技术通过浏览器局部发送请求给后台，后台通过resp.getWriter.print("");响应给前台页面 服务器具体实现代码： 浏览器代码： 注册代码： 登陆代码： 至于为什么要用jq
【AJAX】实现登录验证·教程
qq_45677671的博客
02-24 1720
效果图： HTML文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
jQuery+ajax实现用户登录验证
10-14
在本文中，我们将深入探讨如何使用jQuery和Ajax技术来实现用户登录验证，这对于任何Web应用程序来说都是一个关键功能。这个过程通常涉及到客户端和服务器端的交互，以确保用户输入的有效性和安全性。 首先，让我们...
使用AJAX（包含正则表达式）验证用户登录的步骤
10-16
本篇文章将详细阐述如何使用AJAX结合正则表达式来实现用户登录验证的步骤。首先，我们需要理解AJAX（Asynchronous JavaScript and XML）的基本原理，它允许我们在不刷新整个页面的情况下与服务器进行异步通信，从而...
jquery ajax 登录验证实现代码
10-29
`jQuery AJAX 登录验证`是一种常见的前端用户身份验证技术，它允许在不刷新整个页面的情况下与服务器进行通信，提高了用户体验。下面将详细解释如何使用 jQuery 实现这一功能。 首先，确保在项目中引入了 `jQuery....
ajax用户注册登录.zip
11-21
在本教程中，我们将探讨如何利用Ajax实现用户注册和登录功能，构建一个超简单的模板，为网站提供流畅的用户体验。 1. **Ajax基础** Ajax的核心是JavaScript对象XMLHttpRequest，它允许在后台与服务器交换数据并...
ajax用户登录验证
12-31
本文将详细讲解如何使用jQuery库来实现一个Ajax用户登录验证系统，并将其部署在Tomcat服务器上。 首先，理解Ajax的核心概念是关键。Ajax允许前端与后台进行异步通信，即在不重新加载整个网页的情况下，可以更新部分...
AJAX入门的简单实例（登录表单验证）
05-27
# 前置知识 HTML、Java、JavaScript、servlet、tomcat 基础知识 # AJAX实例 使用AJAX的 登录表单验证 简单案例 以登录界面为例，首先编写登录页面 login.jsp 如果登录成功，则界面显示登录成功后的页面 如果登录失败，则界面显示登录失败后的页面 在登录时，浏览器窗口不刷新，浏览器地址栏上的地址不变，网页上其他部分的浏览不受影响。
Ajax验证用户名是否可用
悬在半空的博客
12-04 954
使用Ajax实现注册验证功能。
Django 【第十七篇】Ajax实现用户登录
weixin_30824479的博客
02-21 308
一、需要知道的新知识点 1、刷新验证码。给src属性加一个？号。加个？会重新去请求 //#给验证码刷新 $(".vialdCode_img").click(function () { 方式一：dom方法#} $(this)[0].src+="?"#} 方式二：jQuery的attr方法#...
Ajax 验证登录
码农在途的博客
06-01 4664
用户登录，若验证不通过，这时我们刷新页面就会导致用户之前的输入全部丢失，对我来说这是一种非常差的体验，所以我采用 ajax 的方法来验证表单。 项目准备 我的项目基于 ASP.NET MVC ，运用了 Bootstrap 前端 UI 框架，JavaScript 采用了 JQuery 以及 JQuery unobtrusive-ajax 库。 界面如图，只有：用户名、密码 两个输入。 具体实现 在...
Ajax登录验证
Demo_csdn
10-24 300
Myeclipse登录系统验证方式 这个需要点击登录按钮后再进行正则表达式的验证，同时还要验证是否符合 提前建立好的静态密码，必须两个验证都成功的时候才能进行下一个页面的跳转 好不容易写出来了 先上GIF图： 这个GIF动图上显示的只有密码的验证效果，和用户名的验证效果是一样的， 只是用户名的验证效果没有录，不过完全没问题，只是懒，效果都是一样的 再来一张有用的图片： 先看一下JS的代码吧： ...
ajax php实现登录验证,PHP+ajax实现登录后台验证实例详解
weixin_42613505的博客
03-09 538
本篇文章主要介绍PHP+ajax实现登录后台验证实例详解，感兴趣的朋友参考下，希望对大家有所帮助。1.前台ajax数据提交后台管理系统登录$("#login_btn").click(function(){var username = $.trim($("#username").val());var password = $.trim($("#password").val());if(usernam...
ajax前后端交互基本原理
04-04
本套课程主要是针对新手，帮助新手入门使用ajax，掌握基本的操作，能够在实际的工作中熟练的使用ajax进行前面端交互
AJAX登录校验
kds257248的博客
06-18 318
dao层 service层 servlet
如何使用 jQuery ajax() 方法异步提交进行前后端的交互，验证用户登录
csj_super的博客
03-12 715
用户登录的验证可以使用 form 表单提交，也可以使用 ajax 技术异步提交。 AJAX 即 Asynchronous Javascript And XML（异步 JavaScript 和 XML），是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。 这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 传统的网页（不使用 A...
ajax登录django后台
最新发布
06-12
好的，下面是一个使用Ajax登录Django后台的示例。 前端代码： ``` <form id="login-form"> {% csrf_token %} <label for="username">用户名</label> <input type="text" id="username" name="username" required> <label for="password">密码</label> <input type="password" id="password" name="password" required> <button type="submit">登录</button> </form> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(function() { $('#login-form').submit(function(event) { event.preventDefault(); // 阻止表单的默认提交行为 // 获取表单数据 var username = $('#username').val(); var password = $('#password').val(); var csrfmiddlewaretoken = $('input[name="csrfmiddlewaretoken"]').val(); // 发送Ajax请求 $.ajax({ type: 'POST', url: '/login/', // Django后台登录视图的URL data: { username: username, password: password, csrfmiddlewaretoken: csrfmiddlewaretoken }, success: function(data) { if (data.success) { // 登录成功，跳转到首页 window.location.href = '/'; } else { // 登录失败，显示错误信息 alert(data.message); } }, error: function() { // 请求失败，显示错误信息 alert('请求失败，请稍后重试！'); } }); }); }); </script> ``` 后台代码： ``` from django.shortcuts import render from django.http import JsonResponse from django.contrib.auth import authenticate, login def login_view(request): if request.method == 'POST': username = request.POST.get('username') password = request.POST.get('password') user = authenticate(request, username=username, password=password) if user is not None: # 登录成功 login(request, user) return JsonResponse({'success': True}) else: # 登录失败 return JsonResponse({'success': False, 'message': '用户名或密码错误！'}) else: # GET请求返回登录页面 return render(request, 'login.html') ``` 在上述代码中，前端使用jQuery库来发送Ajax请求，后台使用Django框架处理请求，并返回JSON格式的数据。在实际应用中，需要根据具体的业务逻辑来验证用户身份，并返回相应的数据。其中，`{% csrf_token %}`用于防止跨站请求伪造攻击。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值