首页 web前端 js教程 ajax实现登录功能的图文详解

ajax实现登录功能的图文详解

Apr 02, 2018 am 11:56 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";
}
?>
登录后复制

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

推荐阅读:

怎样用ajax实现弹窗登录

Ajax+bootstrap优化网页用户体验的步奏

以上是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脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

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

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1660
14
CakePHP 教程
1416
52
Laravel 教程
1310
25
PHP教程
1260
29
C# 教程
1233
24
豆包app有什么功能 豆包app有什么功能 Mar 01, 2024 pm 10:04 PM

豆包app里会有很多ai创作的功能,那么豆包app有什么功能呢?用户们可以通过这个软件来创作绘画,和ai进行聊天,还能够为用户生成文章,帮助大家搜索歌曲等。这篇豆包app功能介绍就能够告诉大家具体的操作方法,下面就是具体内容,赶紧看看吧!豆包app有什么功能答:可以绘画、聊天、写文、找歌。功能介绍:1、问题查询:可以通过ai来更快的找到问题的答案,什么样的问题都是可以询问。2、图片生成:可以有ai来为大家创建不同的图片,只需要告诉大家大概的要求。3、ai聊天:能够为用户们创建一个可以聊天的ai,

vivox100s和x100区别:性能对比及功能解析 vivox100s和x100区别:性能对比及功能解析 Mar 23, 2024 pm 10:27 PM

vivox100s和x100手机都是vivo手机产品线中的代表机型,它们分别代表了vivo在不同时间段内的高端技术水平,因此这两款手机在设计、性能和功能上均有一定区别。本文将从性能对比和功能解析两个方面对这两款手机进行详细比较,帮助消费者更好地选择适合自己的手机。首先,我们来看vivox100s和x100在性能方面的对比。vivox100s搭载了最新的

自媒体到底是什么?它的主要特点和功能有哪些? 自媒体到底是什么?它的主要特点和功能有哪些? Mar 21, 2024 pm 08:21 PM

随着互联网的快速发展,自媒体这个概念已经深入人心。那么,自媒体到底是什么?它有哪些主要特点和功能呢?接下来,我们将一一探讨这些问题。一、自媒体到底是什么?自媒体,顾名思义,就是自己就是媒体。它是指通过互联网平台,个人或者团队可以自主创建、编辑、发布和传播内容的信息载体。不同于传统媒体,如报纸、电视、电台等,自媒体具有更强的互动性和个性化,让每个人都能成为信息的生产者和传播者。二、自媒体的主要特点和功能有哪些?1.低门槛:自媒体的崛起降低了进入媒体行业的门槛,不再需要繁琐的设备和专业的团队,一部手

PHP 与 Ajax:构建一个自动完成建议引擎 PHP 与 Ajax:构建一个自动完成建议引擎 Jun 02, 2024 pm 08:39 PM

使用PHP和Ajax构建自动完成建议引擎:服务器端脚本:处理Ajax请求并返回建议(autocomplete.php)。客户端脚本:发送Ajax请求并显示建议(autocomplete.js)。实战案例:在HTML页面中包含脚本并指定search-input元素标识符。

小红书账号管理软件有哪些功能?怎么经营小红书账号? 小红书账号管理软件有哪些功能?怎么经营小红书账号? Mar 21, 2024 pm 04:16 PM

随着小红书在年轻人中的流行,越来越多的人开始利用这一平台分享各方面的经验和生活见解。如何有效管理多个小红书账号成为一个关键问题。在本文中,我们将讨论一些小红书账号管理软件的功能,并探讨如何更好地经营小红书账号。随着社交媒体的发展,许多人发现自己需要管理多个社交账号。对于小红书用户来说,这也是一个挑战。一些小红书账号管理软件可以帮助用户更轻松地管理多个账号,包括自动发布内容、定时发布、数据分析等功能。通过这些工具,用户可以更高效地管理他们的账号,提高账号的曝光率和关注度。另一、小红书账号管理软件有

PHP技巧:快速实现返回上一页功能 PHP技巧:快速实现返回上一页功能 Mar 09, 2024 am 08:21 AM

PHP技巧:快速实现返回上一页功能在网页开发中,经常会遇到需要实现返回上一页的功能。这样的操作可以提高用户体验,让用户更加方便地在网页之间进行导航。在PHP中,我们可以通过一些简单的代码来实现这一功能。本文将介绍如何快速实现返回上一页功能,并提供具体的PHP代码示例。在PHP中,我们可以使用$_SERVER['HTTP_REFERER']来获取上一页的URL

什么是Discuz?Discuz的定义和功能介绍 什么是Discuz?Discuz的定义和功能介绍 Mar 03, 2024 am 10:33 AM

《探索Discuz:定义、功能及代码示例》随着互联网的迅猛发展,社区论坛已经成为人们获取信息、交流观点的重要平台。在众多的社区论坛系统中,Discuz作为国内较为知名的一种开源论坛软件,备受广大网站开发者和管理员的青睐。那么,什么是Discuz?它又有哪些功能,能为我们的网站提供怎样的帮助呢?本文将对Discuz进行详细介绍,并附上具体的代码示例,帮助读者更

Linux下GDM的功能和作用详解 Linux下GDM的功能和作用详解 Mar 01, 2024 pm 04:18 PM

Linux下GDM的功能和作用详解在Linux操作系统中,GDM(GNOMEDisplayManager)是一种图形化登录管理器,它提供了用户在系统中登录和注销的界面。GDM通常是GNOME桌面环境的一部分,但也可以被其他桌面环境所使用。GDM的作用不仅仅是提供一个登录界面,还包括用户会话管理、屏幕保护、自动登录等功能。GDM的功能主要包括以下几个方面:

See all articles