ajax實現簡單登錄頁面_AJAX相關

來源:腳本之家  責任編輯:小易  

你可以把用戶名存儲在session或是cookie中如果是cookie就不要用到AJAX了,直接用js獲取cookie中的用戶名就行了.如果是session就需要在后臺設置一個頁面用來返回session中的用戶名,再用AJAX調用這個頁面以獲得用戶名.實現方法就是這樣,但是不知道你要什么樣的代碼www.anxorj.tw防采集請勿采集本網。

本文實例為大家分享了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.anxorj.tw/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 [email protected] and [email protected]"; _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.anxorj.tw請勿采集。


  • 本文相關:
  • 重寫 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.anxorj.tw All Rights Reserved
    陕西快乐10分下载