首页 web前端 js教程 如何用ajax编写登录页面

如何用ajax编写登录页面

Apr 02, 2018 am 10:53 AM
ajax 登录 页面

这次给大家带来如何用ajax编写登录页面,用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>
<p>用户名:<input type="text" id="uid"/></p>
<p>密码:<input type="text" id="pwd"/></p>
<p><input type="button" id="btn"value="登录"/></p>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=&#39;{$uid}&#39;";
$arr=$db->Query($sql);
if($arr[0][0]=$pwd && !empty($pwd))
{
 echo"OK";
}
else{
 echo"NO";
}
?>
登录后复制

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

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

在项目中如何使用ajax请求

Ajax操作用户session失效怎么处理

以上是如何用ajax编写登录页面的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

wallpaperengine登录别的号后下载别人的壁纸怎么办 wallpaperengine登录别的号后下载别人的壁纸怎么办 Mar 19, 2024 pm 02:00 PM

当你在自己电脑上登过别人steam账号之后,恰巧这个别人的账号也有wallpaper软件,切换回自己账号之后steam就会自动下载别人账号订阅的壁纸,用户可以通过关闭steam云同步解决。wallpaperengine登录别的号后下载别人的壁纸怎么办1、登陆你自己的steam账号,在设置里面找到云同步,关闭steam云同步。2、登陆你之前登陆的别人的steam账号,打开wallpaper创意工坊,找到订阅内容,然后取消全部订阅。(以后防止找不到壁纸,可以先收藏再取消订阅)3、切换回自己的stea

小红书怎么登录以前的账号?它换绑后原来号丢失了怎么办? 小红书怎么登录以前的账号?它换绑后原来号丢失了怎么办? Mar 21, 2024 pm 09:41 PM

随着社交媒体的迅速发展,小红书已经成为许多年轻人分享生活、探索新产品的热门平台。在使用过程中,有时用户可能会遇到登录以前账号的困难。本文将详细探讨如何解决小红书登录旧账号的问题,以及如何应对更换绑定后可能遗失原账号的情况。一、小红书怎么登录以前的账号?1.找回密码登录如果长时间未登录小红书,可能导致账号被系统回收。为了恢复访问权限,你可以尝试通过找回密码的方式重新登录账号。操作步骤如下:(1)打开小红书App或官网,点击“登录”按钮。(2)选择“找回密码”。(3)输入你注册账号时所使用的手机号码

Discuz后台登录问题解决方法大揭秘 Discuz后台登录问题解决方法大揭秘 Mar 03, 2024 am 08:57 AM

Discuz后台登录问题解决方法大揭秘,需要具体代码示例随着互联网的快速发展,网站建设变得越来越普遍,而Discuz作为一款常用的论坛建站系统,受到了许多站长的青睐。然而,正是因为其功能强大,有时候我们在使用Discuz的过程中会遇到一些问题,比如后台登录问题。今天,我们就来大揭秘Discuz后台登录问题的解决方法,并且提供具体的代码示例,希望能帮助到有需要

快手电脑版怎么登录-快手电脑版的登录方法 快手电脑版怎么登录-快手电脑版的登录方法 Mar 04, 2024 pm 03:30 PM

近日有一些小伙伴咨询小编快手电脑版怎么登录?下面就为大家带来了快手电脑版的登录方法,有需要的小伙伴可以来了解了解哦。第一步:首先在电脑的浏览器上百度搜索快手官网。第二步:在搜索结果列表里面选取第一条。第三步:进入到快手官网主页面后,点击视频的选项。第四步:点击右上角的用户头像。第五步:在弹出的登录菜单里面点击二维码登录。第六步:之后打开手机上的快手,点击左上角的图标。第七步:点击二维码标志。第八步:在我的二维码界面点击右上角的扫描图标之后,扫描电脑上的二维码即可。第九步:最后电脑版的快手就登录成

小红书只记得账号怎么登录?只记得账号怎么找回? 小红书只记得账号怎么登录?只记得账号怎么找回? Mar 23, 2024 pm 05:31 PM

小红书如今已经融入了许多人的日常生活,其丰富的内容和便捷的操作方式让用户乐此不疲。有时候,我们可能会忘记账号密码,只记得账号而无法登录确实让人感到困扰。一、小红书只记得账号怎么登录?当忘记密码时,我们可以通过手机验证码的方式登录小红书。具体操作如下:1.打开小红书App或网页版小红书;2.点击“登录”按钮,选择“账号密码登录”;3.点击“忘记密码?”按钮;4.输入你的账号,点击“下一步”;5.系统会发送验证码到你的手机,输入验证码后点击“确定”;6.设置新的密码并确认。你还可以通过第三方账号(如

谷歌浏览器无法登录账号怎么办?谷歌浏览器账号不能登录解决方法 谷歌浏览器无法登录账号怎么办?谷歌浏览器账号不能登录解决方法 Mar 13, 2024 pm 02:10 PM

  谷歌浏览器无法登录账号怎么办?很多用户在使用这款软件的时候,某些功能需要用户们登录谷歌账号才可以使用,但是尝试了很多次,都没有登录成功,面对这个问题,不少用户都不知道应该如何解决,那么本期小编就来和各位分享解决方法,希望今日的软件教程内容可以给大伙带来帮助。  解决方法如下:  1、点击桌面一个浏览器,打开之后看到这个样子。  2、此时如果弹出登录,点击它,如看不到的点击右上角。  3、点击登录,然后输入你的账号,账号不用输入@之后的一节,点击下一步。  4、输入密码,看到这个提示,点击启用

百度网盘网页版怎么进?百度网盘网页版登录入口 百度网盘网页版怎么进?百度网盘网页版登录入口 Mar 13, 2024 pm 04:58 PM

  百度网盘不仅能储存各种软件资源,还能分享给别人,支持多端同步,如果你的电脑没有下载客户端,可以选择进入网页版使用。那么百度网盘网页版怎么登入呢?下面就来看看详细介绍。  百度网盘网页版登录入口:https://pan.baidu.com(复制链接到浏览器打开)  软件介绍  1、分享  提供文件分享功能,用户将文件整理,分享给需要的小伙伴。  2、云端  不占用太多内存,大多数文件都保存在云端,有效节省电脑空间。  3、相册  支持云相册功能,将照片导入到云盘中,然后整理,方便大家查看。  

如何解决Laravel登录时间失效的常见问题 如何解决Laravel登录时间失效的常见问题 Mar 06, 2024 pm 09:24 PM

如何解决Laravel登录时间失效的常见问题在使用Laravel开发Web应用程序时,登录认证是一个非常重要的功能。然而,有时候用户登录后长时间不操作,页面可能会自动退出登录或者认证失效。这个问题较为常见,下面将介绍如何通过设置session的时间来解决这个问题,并提供具体的代码示例。1.设置session的过期时间在Laravel中,默认情况下sessi

See all articles