ajax实现登录功能

AJAX的全称是Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

ajax的优点:

1、最大的一点是页面无刷新,用户的体验非常好。

2、使用异步方式与服务器通信,具有更加迅速的响应能力。。

3、可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。并且减轻服务器的负担,ajax的原则是“按需取数据”,可以最大程度的减少冗余请求,和响应对服务器造成的负担。

4、基于标准化的并被广泛支持的技术,不需要下载插件或者小程序。

5、ajax可使因特网应用程序更小、更快,更友好。

这里我用ajax写一个简单的登录页面:首先用到的是数据库login的表,

下面是登录页面的代码,首先要引入jquery包

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script src="jquery-3.1.1.min.js"></script> /*引入jquery包*/ </head> <body> <h2>登录页面</h2> <div>用户名:<input type="text" id="uid"/></div> <div>密码:<input type="text" id="pwd"/></div> <div><input type="button" id="btn"value="登录"/></div>11</body>12</html>

登录页面很简单,就不上图了,之前的博客也写过很多次了

然后下面就是ajax的写法了

<script type="text/javascript"> $("#btn").click(function(){ //第一步:取数据,这里用到了用户名和密码 var uid=$("#uid").val(); var pwd=$("#pwd").val(); //第二步:验证数据,这里需要从数据库调数据,我们就用到了ajax $.ajax({ url:"dlchuli.php",//请求地址 data:{uid:uid,pwd:pwd},//提交的数据 type:"POST",//提交的方式 dataType:"TEXT", //返回类型 TEXT字符串 JSON XML success:function(data){ //开始之前要去空格,用trim() if(data.trim()=="OK") { window.location.href = "main.php"; } else{ alert("用户名或者密码错误"); } } }) }) </script>

dlchuli.php的代码写法如下:

<?php include("DADB.class.php"); $db=new DADB(); $uid=$_POST["uid"]; $pwd=$_POST["pwd"]; $sql="select password from login where username='{$uid}'"; $arr=$db->Query($sql); if($arr[0][0]=$pwd && !empty($pwd)) { echo"OK"; } else{ echo"NO"; } ?>

写到这里,用ajax写的简单的登录页面就完成了,最大的好处就是如果出错会在原来的页面报错,不会蹦到其他的页面

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

时间: 2024-10-14 21:13:33

ajax实现登录功能的相关文章

ECSHOP中实现ajax弹窗登录功能

在上篇文章给大家介绍了使用openSpeDiv方法实现Ecshop登录弹窗框效果,大家点击参考下 下面介绍如何实现AJAX弹窗登录. 在ECSHOP中的user.PHP中有处理用户登录的请求. /* 处理 ajax 的登录请求 */ elseif ($action == 'signin') { include_once('includes/cls_json.php'); $json = new JSON; $username = !empty($_POST['username']) ? json

使用php+ajax实现登录功能教程

php登录源码: 下面是chklogin.php页面代码: <?php session_start(); $connect=mysql_connect("127.0.0.1","root","123"); if(!$connect) { die('Could not connect: ' . mysql_error()); } mysql_select_db(design,$connect); $query="select * f

asp.net jQuery Ajax用户登录功能的实现_实用技巧

主页面调用代码片段: 复制代码 代码如下: <asp:HyperLink ID="lnkLogin" runat="server" NavigateUrl="#" >登录</asp:HyperLink> <script language="javascript" type="text/javascript"> $('#<%=this.lnkLogin.ClientI

jQuery+Ajax用户登录功能的实现_实用技巧

ok,先来贴几张张效果图.     其中大致流程是用户点击页面右上角的登录链接接着弹出div模拟窗口,该窗口通过iframe调用Login.aspx页面,用户输入用户名 密码和验证码后,Login.aspx页面的jQuery代码post到Login.ashx页面处理,Login.ashx页面可以算是简易的aspx页面吧. 当然你用LoginProcess.aspx 也是可以的.Login.ashx页面处理完把结果返回给Login.aspx页面处理,result变量用与接收结果. 如果返回1表示登

ajax 用户 登录 功能

 今天来讲讲ajax实现静态文件登陆效果吧,首先我们就以站www.111cn.net登陆效果为例子吧:先看www.111cn.net的登陆入口效果: 这看上去和别的没什么区别,但我们仔细一看原来这是一个静态页面的入口,登陆成功的在这个静态页面显示的效果是,这张是登陆成功选择进入的栏目,   我们主要的是看这张的效果图,这是在index.html登陆成功的显示的效果,不过我要申明它不是用框架做的,而正是用ajax实现的,下面我们来看看它的html源码我们就会发出在文件最后有这样一段代码: <scr

求一个ssh+json+jquery+ajax 登录功能实现的例子

问题描述 求一个ssh+json+jquery+ajax 登录功能实现的例子 ssh+json+jquery+ajax 登录时action业务处理逻辑是如何实现的 以及前台的js如何处理后台的数据 解决方案 http://bbs.csdn.net/topics/390839699http://download.csdn.net/detail/iamcychan/3635220 解决方案二: http://blog.csdn.net/evankaka/article/details/4702397

ajax-ssh 零配置 采用juery+Ajax如何传递参数到action实现登录功能验证?

问题描述 ssh 零配置 采用juery+Ajax如何传递参数到action实现登录功能验证? ajax应该如何判断逻辑,以及执行action时return应如何处理? 解决方案 首先你登陆的用户名.密码获取之后传到Action,在Action把获取的参数用户名到数据库查询,如果没有提示,有的话返回结果,取出密码比较和前台获取的可以一样.相同就可以登录.否则提示. 解决方案二: ajax success的时候获取返回值 通过后台返回值判断是否登录成功 例如ajax传账号密码到后台.后台执行sql

sql server-c#+jquery+ajax实现注册登录功能

问题描述 c#+jquery+ajax实现注册登录功能 数据库是sql server 客户端和服务器端怎么交换数据 页面代码如下 <nav class="main_nav"> <ul> <li ><a class="cd-signin" href="#0">登录</a></li> <li ><a class="cd-signup" hre

使用Ajax技术通过XMLHttpRequest对象完成首页登录功能_AJAX相关

最近使用Ajax技术通过XMLHttpRequest对象完成一个首页的登录功能! 代码如下: <script type="text/javascript"> //创建XMLHttpRequest对象 function createXMLHttpRequest(){ if(window.XMLHttpRequest){ return xmlhttprequest=new XMLHttpRequest(); }else{ return xmlhttprequest=new Ac