ajax实现简单登录页面_AJAX相关

来源:脚本之家  责任编辑:小易  

你可以把用户名存储在session或是cookie中如果是cookie就不要用到AJAX了,直接用js获取cookie中的用户名就行了.如果是session就需要在后台设置一个页面用来返回session中的用户名,再用AJAX调用这个页面以获得用户名.实现方法就是这样,但是不知道你要什么样的代码www.zgxue.com防采集请勿采集本网。

本文实例为大家分享了ajax实现简单登录页面的具体代码,供大家参考,具体内容如下

Ajax是一个异步请求,应该不能直接跳转。 你可以返回一个true给前台,再请求新的资源。

一.什么是ajax

$.ajax({ url: 'XX.php',//处理你登录信息验证的网页 type: 'POST', dataType: 'json', data: {XX:XX,XX:XX},//页面中传送至XX.php的数据 success:function(data){ window.location.href="";//你跳转的页面 }, error:function(){ });

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

Ajax就是局部刷新,以前的动态网页都是页面提交,然后整体刷新,一些已经解析到客户端的不需要在此从服务器端获取的数据都要再次获取生成,利用Ajax后,实现局部更新数据,局部提交,页面速度明显加快。最典型的一个Ajax例子就是你打开百度或者g

二.ajax的工作原理

我的经验: 服务器端返回的json数据必须包含以下内容的部分内容 success: true/false 是否成功 message: string 如果失败,失败原因是什么 url: string 需要跳转的页面地址 而你的ajax中应该做以下判定及类似的处理 success: function(res) { if

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

一般两种思路 第一,通过SSO的方式做,在登陆域A中输入用户名密码,提交到A的服务端(非跨域),A服务器与目标服务器B通信并验证登录信息,如果B认为可以登录,则返回一个登录用的随机token给A,并记录相关信息 A服务器将这个token返回A域的浏览

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

1.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="http://www.zgxue.com/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>

2.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})

a页面关键2113JS代码: function che(username,pwd){ $.ajax({ url:"b.aspx", type:"POST", data:{user:username,pwd:pwd}, dataType:"XML", success: function (data,status){ var count=$(data).find("num").text(); if(count==0){ //没有注册 $("#lab2").html("未注册,不能登5261录"); } else{ //已经注册 $("#lab2").html("可以登录"); ……4102 } //else } //success }); //ajax }b页面中要返回xml数据,拼字符1653串就可以 string user = Request["user"].ToString(); //获取用户名 string pwd = Request["pwd"].ToString(); //获取密码 count=根据用户名和密码查询出来的记录数 //sql语句:select count(*) from login where username=user and password=pwd string str = "<?xml version='1.0' ?>"; str += "<num>" + count + "</num>";Response.Write(str); Response.End();更多追问追答追问那我是怎么知道count等于什么的?谢了追答int count=0;string sql = "select count(*) from login where username=“+user+“ and password=”+pwd; _Cmd.CommandText = sql; try { _Conn.Open(); count = Convert.ToInt32( _Cmd.ExecuteScalar()); } finally { _Conn.Close(); }string str = ""; str += "" + count + "";追问可是我的count是怎么传到a页面的呢?谢谢了追答b页面不用做别的 只是拼字符串 构成XML文档 a页面中直接从 success 的回调函数的 data 参数中取就行啊 本例中就是 var count=$(data).find("num").text();追问那到底怎么拼字符串啊!能详细点吗追答b页面代码:Page_Load 中 string user = Request["user"].ToString(); //获取用户名 string pwd = Request["pwd"].ToString(); //获取密码 int count=new LoginDA().Select(user,pwd); string str = ""; str += "" + count + "";Response.Write(str); Response.End(); 新建数据库操作类LoginDA.cspublic class LoginDA{ private SqlConnection _Conn; private SqlCommand _Cmd; private SqlDataReader _DR;public LoginDA(){ _Conn = new Connect().Conn; //数据库连接 这个你总该会吧 _Cmd = _Conn.CreateCommand();} public int Select(string name, string pwd) { int i = 0; _Cmd.CommandText = "select count(*) from login where username=@name and password=@pwd"; _Cmd.Parameters.Clear(); _Cmd.Parameters.AddWithValue("@name", name); _Cmd.Parameters.AddWithValue("@pwd", pwd); try { _Conn.Open(); i = Convert.ToInt32(_Cmd.ExecuteScalar()); } finally { _Conn.Close(); } return i; }},a页面4102为a.php,b页面为b.php那么在a.php中的js<script>function reg(){$.ajax({1653type: 'POST',url: 'b.php',data: {'username':name,'action':'ajax'},success: function(data){if(data=='2'){alert('已经注册过了');}else if(data=='1'){alert('可以注册');}else{alert('系统出错');}}});}</script>b.php<?php...$a=$_POST['action'];switch($a){ case 'ajax':$reg_name=$_POST['username'];$sql='select * from 用户表 where username='.$reg_name;...//执行查询,将结果赋值给$resif(empty($res)){exit('1');//证明还没有注册过}else{exit('2');//已经有人注册过}break;default:exit('3');break;}...?>追问我想在b页面中先判断txtName在数据库有没有记录,然后传给一个变量传给a页面,,,帮帮忙吧.....谢谢了追答$sql='select * from 用户表 where username='.$reg_name;...//执行查询,将结果赋值给$res//你就在这一句执行查询就行了啊,下面就是判断有没有记录,//然后传值给前台就是了,前台用data就能获得返回的数据success: function(data){希望能仔细点看代码,你这样提问,是要我们帮你解答后台问题么?但是你却没有告诉我们后台语言是什么?前台ajax的url设置你的后台action就可以调用了,后台你自己写了,你也老大不小了内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • 重写 ajax 实现 session 超时跳转到登录页面实例代码
  • ajax编写简单的登录页面
  • ajax session失效跳转登录页面的方法
  • 登录超时给出提示跳到登录页面(ajax、导入、导出)
  • 一款经典的ajax登录页面 后台asp.net
  • 利用ajaxsubmit()方法实现form提交表单后回调功能
  • [js]轻便的xmlhttprequest应用函数:downloadurl()
  • ajax请求中的异步与同步,需要注意的地方说明
  • django框架如何使用ajax的post方法
  • ajax $.getjson案例详解
  • 聊聊ajax提交form表单的看法和认识
  • 使用jquery简化ajax开发
  • ajax解决多余刷新的两种方法(总结)
  • ajax中post方法直接返回以0开头数字出错问题分析
  • ajax中的循环方案
  • 利用 jquery ajax做一个用户登录界面
  • 如何用AJAX技术在主页面获取登录后的用户名,显示...
  • 如何采用Ajax技术实现一个简单的登录模块?
  • ajax实现用户验证登录并跳转至个人页面
  • Java/Ajax:使用Ajax实现登录功能,可以实现跳转吗?
  • AJAX如何做到点击登录页面之后跳转到另一个页面?
  • 一个用户登录界面 使用ajax实现了页面无刷新。 请...
  • jQuery+ajax登陆时怎么在html跳转页面
  • 有个登录页面是用Ajax实现的验证过程,我想做个登...
  • 关于jsp中用jQuery,ajax做的用户登录,怎么实现权限?
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全javascriptasp.netphp编程ajax相关正则表达式asp编程jsp编程编程10000问css/htmlflex脚本加解密web2.0xml/rss网页编辑器相关技巧安全相关网页播放器其它综合dart首页重写 ajax 实现 session 超时跳转到登录页面实例代码ajax编写简单的登录页面ajax session失效跳转登录页面的方法登录超时给出提示跳到登录页面(ajax、导入、导出)一款经典的ajax登录页面 后台asp.net[js]轻便的xmlhttprequest应用函数:downloadurl()ajax请求中的异步与同步,需要注意的地方说明django框架如何使用ajax的post方法ajax $.getjson案例详解聊聊ajax提交form表单的看法和认识使用jquery简化ajax开发ajax解决多余刷新的两种方法(总结)ajax中post方法直接返回以0开头数字出错问题分析ajax中的循环方案jquery ajax 向后台传递数组参数ajax readystate的五种状态详解ajax中的async属性值之同步和异步jquery实现ajax定时刷新局部页面ajax传递多个参数具体实现ajax获取数据中文乱码问题最简单jquery ajax中使用serialize()方ajax获取数据然后显示在页面的实自己动手打造ajax图片上传(网上没ajax 缓存问题的两种解决方法(ie零基础学习ajax之ajax的简介和基础在(asp/php/jsp/html/js)中禁止ajax缓存的基于ajaxupload的多文件上传操作用ajax实现读博客rss示例代码ajax实现跨域的三种方法(代理,jsonp,xhrajax三级联动的实现方法js实现ajax分页完整实例ajax方式删除表格一行数据示例代码ajax与传统web开发的异同点使用ajax实现无刷新改变页面内容和地址栏
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved