Ajax 和 JavaScript 验证用户登录

最新推荐文章于 2024-05-13 16:21:10 发布
最新推荐文章于 2024-05-13 16:21:10 发布
阅读量3.9w 收藏 26
点赞数 6
分类专栏： Ajax Javascript 文章标签： javascript ajax user function login button
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liruxing1715/article/details/7218276
版权

Ajax 和 JavaScript 验证用户登录

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="./js/ajax.js"></script>
<title>用户登录</title>
<style type="text/css">
	.text {
		width:180px;
		height:21px;
	}
	.userRed {
		border: 1px solid red;
		width:180px;
		height:21px;
	}
</style>
</head>
<body>
	<table border="0" align="center" style="font-size:13px;" width="300">
      	<tr>
        	<td align="center" colspan="2"><div id="con"></div></td>
        </tr>
        <tr>
			<td align="right" height="30">用户名：</td><td><input type="text" name="user" id="user" class="text" /></td>
		</tr>
		<tr>
			<td align="right" height="30">密码：</td><td><input type="password" name="password" id="password" class="text" /></td>
		</tr>
		<tr>
			<td align="center" colspan="2"><input type="button" id="btn" value="登录" /> <input type="button" value="重置" id="re" /></td>
		</tr>
	</table>
</body>
</html>
<script src="./js/login.js"></script>

login.js

var btn = document.getElementById('btn');
var re = document.getElementById('re');
var user = document.getElementById('user');
var password = document.getElementById('password');
btn.onclick = function(){
	var isValidate=false;
	if (!user.value.match(/^\S{2,20}$/)) {
		user.className = 'userRed';
		user.focus();
		return;
	} else {
		user.className = 'text';
		isValidate=true;
	}

	if (password.value.length<3 || password.value.length>20) {
		password.className = 'userRed';
		password.focus();
		return;
	} else {
		password.className = 'text';
		isValidate=true;
	}
	if (isValidate) {
		var ajax = Ajax();
		ajax.get('login.php?user='+document.getElementById('user').value+'&password='+document.getElementById('password').value, function(data){
			var con = document.getElementById('con');
			eval(data);
			if (login) {
				con.innerHTML = '<font color="green">登录成功，跳转中...</font>';
				location = 'xx.php'; // 登录成功后指定跳转页面
			} else {
				con.innerHTML = '<font color="red">帐号或密码错误！</font>';
			}
		});
	}
	
}
re.onclick = function(){
	user.value="";
	password.value="";
}

login.php 

<?php
require_once './config.inc.php';
$m = new Model();
$user = $_GET['user'];
$password = $_GET['password'];
$count = $m->total('users', "user='". $user ."' and password='". sha1($password) ."'");
if ($count) {
	setcookie('user', $user);
	echo "var login=true";
} else {
	echo "var login=false";
}
?>

效果展示图：

  


ajax.js 文件在前面文章可以找到，数据库结构就两个字段（user,password）即可！


ruxingli
关注
  • 6
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
Html+Javascript+Ajax实现用户登录系统
zhugehengheng
03-26 1万+
本文主要通过Html和Css建立一个简单的用户登录页面，然后通过javascript和Ajax连接上一篇文章PHP+MySQL实现用户登录注册API接口。由于博主之前一直做的是APP开发，对Web前端及后台了解得不多，用了一个星期才一步一步摸索着把Web前端到PHP后台调通，所以本文适合跟我一样的入门小白学习，后面有个关于Form表单提交的问题希望有大神能够给我解答。好了，先上代码吧。 首先是l
详解eladmin的login.js和request.js文件
taoist1997的博客
06-13 215
这段代码是一个使用 Axios 库创建的网络请求服务：axiosrouterstoregetTokenConfigCookiestimeout请求拦截器用于在发送请求前对请求进行处理。响应拦截器用于在接收到响应后对响应进行处理。data如果在响应过程中发生错误，会执行错误处理逻辑。这段代码判断错误响应的数据类型是否为 Blob，并且判断其 MIME 类型是否包含 “json”。如果满足条件，则执行相应的处理逻辑。FileReadercode该实例可以被其他模块导入并使用，以发送网络请求。
《JS基础——实现登陆验证》
热门推荐
JiangBo_Liu 博客
11-19 3万+
/* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2011, 烟台大学计算机学院学生 * All rights reserved. * 文件名称：   《JS基础——实现登陆验证》                           * 作    者：       刘江波                       * 完成日期：    2
JavaScript实现页面登陆功能
最新发布
java_de_road的博客
05-13 351
【代码】JavaScript实现页面登陆功能。
ajax来判断用户是否登录与添加
weixin_30314813的博客
05-12 291
首先在用ajax之前，先说一下JSON: JSON:javascript object notation js对象标记 对于json，我们只需要知道如何定义json？如何输出？怎么遍历？ 1、定义json var a = { "one":"111", "two":"222", "three":arr, -------可以是数组（var arr=new Array(2,3...
JavaScript实现登录窗体
an_gentle_killer的博客
06-16 572
思路：就是把登陆窗放在界面之外，然后通过script内的函数改变到界面之内！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的登录窗体</title> <style> .loginDiv{ /*设置登录框的外观*/ border: sol..
jQuery+ajax实现用户登录验证
10-14
在本文中，我们将深入探讨如何使用jQuery和Ajax技术来实现用户登录验证，这对于任何Web应用程序来说都是一个关键功能。这个过程通常涉及到客户端和服务器端的交互，以确保用户输入的有效性和安全性。 首先，让我们...
使用AJAX（包含正则表达式）验证用户登录的步骤
10-16
在Web开发中，用户登录验证是必不可少的一环，它确保了系统的安全性和用户体验。本篇文章将详细阐述如何使用AJAX结合正则表达式来实现用户登录验证的步骤。首先，我们需要理解AJAX（Asynchronous JavaScript and XML...
jquery ajax 登录验证实现代码
10-29
`jQuery AJAX 登录验证`是一种常见的前端用户身份验证技术，它...这种方法允许用户在不离开登录界面的情况下获取反馈，提高了交互性和用户体验。同时，它也展示了前后端交互的基本流程，是 Web 开发中的基础技能之一。
ajax实现简单登录验证
10-12
Ajax，即Asynchronous JavaScript and XML（异步JavaScript和XML），允许我们在不刷新整个网页的情况下与服务器进行交互，从而提供更流畅的用户体验。我们将结合Python后端来实现这个功能。 首先，我们需要创建HTML...
javascript和jquery分别实现用户登录验证
11-25
在上一篇文章//www.jb51.net/article/83504.htm中，用javascript实现了用户验证，但并没有对密码进行验证，这次追加了这个功能，并分别用javascript和jquery实现。 一.用jquery的ajax实现的关键代码 实现如下 /*...
Ajax实现登录时的用户名验证（Servlet 响应）
蛋糕店的夏天
04-05 6328
登录提交表单使用 POST 请求进行验证及转发； 输入用户名（是否正确）及密码（是否为空） 使用 GET 请求进行验证；1. 登录界面及主页<!--login.jsp--> <form action="login" method="POST"> <div> <input type="text" name="username" id="userId" placeholder=
用javascript实现用户登录验证的代码。
洞玄之境的博客
12-08 7760
<script language=javascript> function checkSubmit() {     if ((document.form1.name.value)==”)     {         window.alert (‘姓名必须填写’);         document.form1.name.select();
jquery ajax 用户登入 异步判断
passport_daizi的博客
08-23 4454
html片段 function IbtnEnter_onclick() { checklogin(); return false; } function checklogin() { if ($("#username").val() == "" || $("#use
javaScript登录界面（简单）
qq_44701181的博客
09-17 2100
运行·效果： 自己可以用css美化一下
JSp+ajax用户登录验证
lddzjl的专栏
04-11 1075
0 JSp+ajax用户登录验证0   用户登陆界面，想要实现输入账号之后离开输入框就验证该账号是否存在，输入角色、账号、密码之后，点击登录，如果正确就跳转到index.jsp，错误不跳转并且在密码输入框下显示提示信息；有一个没输入就提示，信息也是在密码输入框下。  我现在的问题是：若果什么也不输，点击登录，会闪一下，但闪过之后就是重置了页面。输入正确也是闪一下就重置页
Ajax登录验证
wbcra的博客
06-18 374
package cn.hp.util; import java.sql.*; public class JDBCUtils { static Connection connection = null ; static Statement statement = null ; static PreparedStatement preparedStatement = null ; static ResultSet resultSet = null ; stati.
ajax 用户登录验证
07-11
对于用户登录验证，可以使用Ajax来实现异步验证。下面是一个简单的示例代码： HTML部分： ```html <form id="loginForm"> <input type="text" id="username" name="username" placeholder="用户名"> <input type="password" id="password" name="password" placeholder="密码"> <button type="submit">登录</button> </form> <p id="message"></p> ``` JavaScript部分： ```javascript // 监听表单提交事件 document.getElementById('loginForm').addEventListener('submit', function(event) { event.preventDefault(); // 阻止表单默认提交行为 // 获取表单数据 var username = document.getElementById('username').value; var password = document.getElementById('password').value; // 创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); // 设置请求参数，POST请求，将数据发送到login.php xhr.open('POST', 'login.php', true); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // 设置回调函数 xhr.onreadystatechange = function() { if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) { // 接收到响应后的处理 var response = JSON.parse(xhr.responseText); document.getElementById('message').textContent = response.message; } }; // 发送请求 xhr.send('username=' + encodeURIComponent(username) + '&password=' + encodeURIComponent(password)); }); ``` 在服务器端的`login.php`文件中，你可以进行用户名和密码的验证，然后返回响应给前端。在上述代码中，通过`xhr.onreadystatechange`回调函数来处理服务器返回的响应，并将验证结果显示在页面上。 请注意，这只是一个简单的示例，实际项目中还需要进行安全性和错误处理等更多的考虑。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值