iis服务器助手广告广告
返回顶部
首页 > 资讯 > 精选 >ajax如何实现简单的登录页面
  • 481
分享到

ajax如何实现简单的登录页面

2023-06-08 06:06:53 481人浏览 安东尼
摘要

小编给大家分享一下ajax如何实现简单的登录页面,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!一.什么是ajaxAjax是一种无需重新加载整个网页,能够更新部分网

小编给大家分享一下ajax如何实现简单的登录页面,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

一.什么是ajax

Ajax是一种无需重新加载整个网页,能够更新部分网页的技术。

二.ajax的工作原理

Ajax工作原理是一个页面的指定位置可以加载另一个页面所有的输出内容,这样就实现了一个静态页面也能获取到数据库中的返回数据信息了。 所以Ajax实现了一个静态网页在不刷新整个页面的情况下与服务器通信,减少了用户等待时间,同时降低了网络流量,增强了客户体验的友好程度。

三.用ajax实现简单的登录页面

ajax_login.html

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>登录页面</title> <style>  .div1{   display: none;   color: red;  } </style> <script src="/static/js/Jquery-1.12.4.min.js"></script> <script>  $(function () {   $('#reGISter').click(function () {    // alert('ok');    //获取用户名和密码:    username = $('#username').val();    passWord = $('#password').val();    rember = $('#rember').val();    // alert(rember);    $.ajax({     url:"/login_ajax_check",     type:"POST", //提交方式     data:{"username":username,"password":password,"rember":rember},     dataType:"JSON",         }).done(function (data) {     if (data.res==1){      // alert('username')      location.href="/index" rel="external nofollow"      }else{      // alert('username');      $('.div1').show().html('用户名或密码输入错误')     }    })   });  }); </script></head><body> <div>  用户名:<input type="text" id="username" ><br/>  记住用户名:<input type="checkbox" id="rember"><br/>  密码<input type="password" id="password"><br/>  <input type="submit" value="登录" id="register">  <div class="div1"></div> </div></body></html>

views.py

from Django.Http import HttpResponse,JsonResponsedef login_ajax(request): """ajax登录页面""" return render(request,"booktest/login_ajax.html")def login_ajax_check(request): """ajax登录校验""" username = request.POST.get('username') # 通过'username'这个键拿到数据 password = request.POST.get('password') #若登录正确 if username == "admin" and password == "12":  jsonresponse = JsonResponse({"res":1})  return jsonresponse #登录错误: else:  return JsonResponse({"res":0})

以上是“ajax如何实现简单的登录页面”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网精选频道!

--结束END--

本文标题: ajax如何实现简单的登录页面

本文链接: https://www.lsjlt.com/news/252225.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • ajax如何实现简单的登录页面
    小编给大家分享一下ajax如何实现简单的登录页面,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!一.什么是ajaxAjax是一种无需重新加载整个网页,能够更新部分网...
    99+
    2023-06-08
  • ajax如何编写简单的登录页面
    这篇文章主要介绍了ajax如何编写简单的登录页面,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。AJAX的全称是Asynchronous JavaScript and XML(...
    99+
    2023-06-08
  • Android如何实现简单QQ登录页面
    本篇内容介绍了“Android如何实现简单QQ登录页面”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!设计一个简单QQ登录页面,无任何功能。然...
    99+
    2023-06-30
  • HTML+jQuery如何实现简单的登录页面
    这篇文章主要介绍“HTML+jQuery如何实现简单的登录页面”,在日常操作中,相信很多人在HTML+jQuery如何实现简单的登录页面问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”HTML+jQuery如何...
    99+
    2023-06-25
  • JavaFX登录页面简单实现
    一、准备工作 准备好javaFX开发环境,请详见我上篇文章https://www.sdk.cn/details/wAe9P8mXAq5dbqDl4y 二、项目结构 三、启动类创建Stage public class Main extend...
    99+
    2024-04-02
  • HTML+jQuery实现简单的登录页面
    目录简介公共代码(后端接口)示例1:最简(纯HTML)代码测试示例2:HTML+jQuery(form data)代码测试示例3:HTML+jQuery(json)代码测试简介 本文...
    99+
    2024-04-02
  • Android实现简单QQ登录页面
    Android开发实现极为简单的QQ登录页面,供大家参考,具体内容如下 设计一个简单QQ登录页面,无任何功能。然后打包安装到手机。 1.首先创建一个空白页面 2.打开样式设计的页...
    99+
    2024-04-02
  • HTML怎么实现简单登录页面
    这篇文章主要介绍HTML怎么实现简单登录页面,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!html是什么html的全称为超文本标记语言,它是一种标记语言,包含了一系列标签.通过这些标签可以将网络上的文档格式统一,使分...
    99+
    2023-06-14
  • 如何使用asp.net实现ajax登录页面
    这篇文章将为大家详细讲解有关如何使用asp.net实现ajax登录页面,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。下面实现一个经典的登录页面,有保存密码功能,页面上所有...
    99+
    2024-04-02
  • AJAX如何实现简单的注册页面异步
    小编给大家分享一下AJAX如何实现简单的注册页面异步,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!AJAX简介(1)AJAX = 异步 JavaScript 和 ...
    99+
    2023-06-08
  • java如何实现简单登录界面
    本文小编为大家详细介绍“java如何实现简单登录界面”,内容详细,步骤清晰,细节处理妥当,希望这篇“java如何实现简单登录界面”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。一、概要我们可以用java实现简单的登...
    99+
    2023-06-30
  • Vue如何实现简单登录界面
    这篇文章主要介绍“Vue如何实现简单登录界面”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue如何实现简单登录界面”文章能帮助大家解决问题。实现:界面实现表单规则校验结合后台 api 校验提示消息...
    99+
    2023-07-02
  • jsp实现简易登录页面
    一.简单的登陆功能 输入用户名admin  密码admin后,显示弹出窗“登陆成功”,否则显示“登录失败” 这里需要一个登陆页面和一个处理页面,主要用到request.getParameter方法,代码(logn.jsp): ...
    99+
    2023-10-08
    java servlet 开发语言 tomcat
  • JavaScript如何实现简易登录注册页面
    小编给大家分享一下JavaScript如何实现简易登录注册页面,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!具体内容如下<!DOCTYPE htm...
    99+
    2023-06-26
  • jsp+servlet实现简单登录页面功能(附demo)
    目录实现功能:开发环境:预备知识: 1.登录界面login.jsp:2.登录成功界面hello.jsp:3.登录失败信息回显Login.jsp:思路简述:具体代码Code:...
    99+
    2024-04-02
  • PHP连接数据库实现简单的登录页面
    最后实现结果如下图所示: 如果输入的用户名或密码为空,则会弹出对话框提示 同样的,如果输入的密码不正确也会弹出对话框提示:  登录成功页面:  具体实现代码如下: HTML代码: 登陆 来源地址:https:/...
    99+
    2023-10-03
    php html css 数据库
  • Vue实现简单登录界面
    本文实例为大家分享了Vue实现简单登录界面的具体代码,供大家参考,具体内容如下 实现: 界面实现表单规则校验结合后台 api 校验提示消息 App.vue <template&...
    99+
    2024-04-02
  • SpringBoot结合Ajax实现登录页面实例
    目录一、 Ajax1.1 Ajax介绍 1.2 异步的作用 二、SpringBoot应用Ajax2.1 开发配置 2.2 创建user表 2....
    99+
    2024-04-02
  • ajax如何实现session超时跳转到登录页面
    这篇文章给大家分享的是有关ajax如何实现session超时跳转到登录页面的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。问题:使用window.location.href来跳转页面的时候,后端只需实现一个过滤器就...
    99+
    2023-06-08
  • Django如何实现简单登录
    这篇文章主要为大家展示了“Django如何实现简单登录”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Django如何实现简单登录”这篇文章吧。创建django项目创建项目的命令行语句: djan...
    99+
    2023-06-25
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作