AJAX实现不刷新登录
这次给大家带来AJAX实现不刷新登录，AJAX实现不刷新登录的注意事项有哪些，下面就是实战案例，一起来看一下。
最近学习了如何实现无刷新登录,大体的效果如下(界面比较丑,请自行忽略....):
点击登录按钮时弹出登录窗口,输入正确的用户名密码后点击登录则登录窗口关闭,状态改为当前用户名.
第一步:
首先弹出窗口使用的是jquery-ui中的控件,第一步要学会如何使用.
打开解压后的jquery-UI下的development-bundle->demos,找到index.html,选择dialog下的model dialog,右键查看源码,观察如何使用该控件,找到一句关键代码:$("#dialog-modal").dialog({height: 140,modal: true});这是用于显示的,打开model message中的源码,找到关闭的关键代码:$(this).dialog('close');有了这两句代码,可以控制窗口的显示与关闭,可以进行下一步了.使用时需复制jquery-ui开发包的css文件夹,js文件夹到项目中.
第二步:
在这里先贴出处理AJAX请求的一般处理程序的代码,虽然正真写的时候都是用到再写,但这里不可能一步一步详细列出,为了便于理解,先将一般处理程序代码贴出来:
1.IsLogin.ashx,用于判断用户是否登录,登录则返回用户名.这里注意,在一般处理程序中要使用session,必须引入using System.Web.SessionState且要实现IRequiresSessionState接口
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.SessionState;
namespace AJAX无刷新登录.AJAX
{
/// <summary>
/// IsLogin 的摘要说明
/// </summary>
public class IsLogin : IHttpHandler,IRequiresSessionState
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
if (context.Session["userName"] != null)
{
string userName = context.Session["userName"].ToString();
context.Response.Write("yes|"+userName);
}
else
{
context.Response.Write("no");
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
}2.CheckLogin.ashx,用于检测用户输入用户名密码是否匹配,正确则返回yes,错误返回no,这里为了简便没有连接数据库.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.SessionState;
namespace AJAX无刷新登录.AJAX
{
/// <summary>
/// CheckLogin 的摘要说明
/// </summary>
public class CheckLogin : IHttpHandler,IRequiresSessionState
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string userName = context.Request["userName"];
string password=context.Request["password"];
if (userName=="admin"&&password=="admin")
{
context.Session["userName"] = "admin";
context.Response.Write("ok");
}
else
{
context.Response.Write("no");
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
}3.LoginOut.ashx,用于控制用户登出,设置session为空.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.SessionState;
namespace AJAX无刷新登录.AJAX
{
/// <summary>
/// LoginOut 的摘要说明
/// </summary>
public class LoginOut : IHttpHandler,IRequiresSessionState
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Session["userName"] = null;
}
public bool IsReusable
{
get
{
return false;
}
}
}
}一般处理程序就结束了,下面贴出主界面的代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="AJAX无刷新登录.Login" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="JQueryUI/css/ui-lightness/jquery-ui-1.8.2.custom.css" rel="stylesheet" />
<script src="JQueryUI/jquery-1.4.2.min.js"></script>
<script src="JQueryUI/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript">
//判断是否登录,登录则显示登录名,隐藏登录按钮,显示注销按钮
//否则相反
var isLogin = function () {
$.post("/AJAX/IsLogin.ashx", function (data) {
var strs = data.split('|');
if (strs[0] == "yes") {
$("#pShowLogin").hide();
$("#pShowLoginOut").show();
$("#spanName").text(strs[1]);
} else {
$("#pShowLogin").show();
$("#pShowLoginOut").hide();
$("#spanState").text("未登录");
}
});
}
$(function () {
isLogin();
//点击登录弹出登录窗口
$("#btnShowLogin").click(function () {
//模态窗口,设定长宽
$("#pLogin").dialog({
height: 160,
width: 300,
modal: true
});
});
//点击取消则关闭弹出框
$("#btnCancel").click(function () {
$("#pLogin").dialog('close');
});
//点击登录发送post请求在一般处理程序CheckLogin.ashx中验证登录,
//根据回调函数结果判断是否登录成功
$("#btnLogin").click(function () {
var userName = $("#txtUserName").val();
var password = $("#txtPwd").val();
$.post("/AJAX/CheckLogin.ashx", { "userName": userName, "password": password }, function (data) {
if (data == "ok") {
$("#pLogin").dialog('close');
isLogin();
}
else {
alert("用户名或密码错误");
}
});
});
//点击注销发送post请求,在一般处理程序中设置session为null,并调用isLogin函数刷新状态
$("#btnExit").click(function () {
$.post("/AJAX/LoginOut.ashx", function () {
isLogin();
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<p id="pShowLogin" style="display: none">
<span id="spanState"></span>
<input type="button" value="登录" id="btnShowLogin" />
</p>
<p id="pShowLoginOut" style="display: none">
<span id="spanName"></span>
<input type="button" value="注销" id="btnExit" />
</p>
<p id="pLogin" title="登录窗口" style="display: none">
<table style="text-align: left" id="tbLoin">
<tr>
<td>用户名：</td>
<td>
<input type="text" id="txtUserName" /></td>
</tr>
<tr>
<td>密码：</td>
<td>
<input type="password" id="txtPwd" /></td>
</tr>
<tr>
<td>
<input type="button" value="登录" id="btnLogin" /></td>
<td style="text-align: left">
<input type="button" value="取消" id="btnCancel" /></td>
</tr>
</table>
</p>
</form>
</body>
</html>相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
Atas ialah kandungan terperinci AJAX实现不刷新登录. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1392
52
Apakah yang perlu saya lakukan jika saya memuat turun kertas dinding orang lain selepas log masuk ke akaun lain pada mesin kertas dinding?
Mar 19, 2024 pm 02:00 PM
Apabila anda log masuk ke akaun stim orang lain pada komputer anda, dan akaun orang lain itu kebetulan mempunyai perisian kertas dinding, stim akan memuat turun kertas dinding yang dilanggan ke akaun orang lain secara automatik selepas bertukar kembali ke akaun anda sendiri Pengguna boleh menyelesaikan masalah ini dengan mematikan penyegerakan awan wap. Apa yang perlu dilakukan jika enjin kertas dinding memuat turun kertas dinding orang lain selepas log masuk ke akaun lain 1. Log masuk ke akaun stim anda sendiri, cari penyegerakan awan dalam tetapan, dan matikan penyegerakan awan stim. 2. Log masuk ke akaun Steam orang lain yang anda log masuk sebelum ini, buka Bengkel Kreatif Kertas Dinding, cari kandungan langganan, dan kemudian batalkan semua langganan. (Sekiranya anda tidak dapat mencari kertas dinding pada masa hadapan, anda boleh mengumpulnya dahulu dan kemudian membatalkan langganan) 3. Tukar semula ke wap anda sendiri
Bagaimanakah saya boleh log masuk ke akaun saya sebelum ini di Xiaohongshu? Apakah yang perlu saya lakukan jika nombor asal hilang selepas ia ditukar?
Mar 21, 2024 pm 09:41 PM
Dengan perkembangan pesat media sosial, Xiaohongshu telah menjadi platform popular untuk ramai anak muda untuk berkongsi kehidupan mereka dan meneroka produk baharu. Semasa penggunaan, kadangkala pengguna mungkin menghadapi kesukaran untuk log masuk ke akaun sebelumnya. Artikel ini akan membincangkan secara terperinci cara menyelesaikan masalah log masuk ke akaun lama di Xiaohongshu, dan cara menangani kemungkinan kehilangan akaun asal selepas menukar pengikatan. 1. Bagaimana untuk log masuk ke akaun sebelumnya Xiaohongshu? 1. Dapatkan kata laluan dan log masuk. Jika anda tidak log masuk ke Xiaohongshu untuk masa yang lama, akaun anda mungkin dikitar semula oleh sistem. Untuk memulihkan hak akses, anda boleh cuba log masuk ke akaun anda sekali lagi dengan mendapatkan semula kata laluan anda. Langkah-langkah operasi adalah seperti berikut: (1) Buka Aplikasi Xiaohongshu atau laman web rasmi dan klik butang "Log Masuk". (2) Pilih "Retrieve Password". (3) Masukkan nombor telefon bimbit yang anda gunakan semasa mendaftar akaun anda
Bagaimana untuk melaksanakan log masuk WeChat dwi pada telefon mudah alih Huawei?
Mar 24, 2024 am 11:27 AM
Bagaimana untuk melaksanakan log masuk WeChat dwi pada telefon mudah alih Huawei? Dengan kebangkitan media sosial, WeChat telah menjadi salah satu alat komunikasi yang sangat diperlukan dalam kehidupan seharian orang ramai. Walau bagaimanapun, ramai orang mungkin menghadapi masalah: log masuk ke beberapa akaun WeChat pada masa yang sama pada telefon mudah alih yang sama. Bagi pengguna telefon mudah alih Huawei, tidak sukar untuk mencapai log masuk WeChat dwi Artikel ini akan memperkenalkan cara mencapai log masuk WeChat dwi pada telefon mudah alih Huawei. Pertama sekali, sistem EMUI yang disertakan dengan telefon mudah alih Huawei menyediakan fungsi yang sangat mudah - pembukaan dua aplikasi. Melalui fungsi pembukaan dwi aplikasi, pengguna boleh serentak
Panduan Pengaturcaraan PHP: Kaedah untuk Melaksanakan Jujukan Fibonacci
Mar 20, 2024 pm 04:54 PM
Bahasa pengaturcaraan PHP ialah alat yang berkuasa untuk pembangunan web, yang mampu menyokong pelbagai logik dan algoritma pengaturcaraan yang berbeza. Antaranya, melaksanakan jujukan Fibonacci adalah masalah pengaturcaraan biasa dan klasik. Dalam artikel ini, kami akan memperkenalkan cara menggunakan bahasa pengaturcaraan PHP untuk melaksanakan jujukan Fibonacci, dan melampirkan contoh kod tertentu. Jujukan Fibonacci ialah jujukan matematik yang ditakrifkan seperti berikut: unsur pertama dan kedua bagi jujukan ialah 1, dan bermula dari unsur ketiga, nilai setiap unsur adalah sama dengan jumlah dua unsur sebelumnya. Beberapa elemen pertama urutan
Bagaimana untuk memasukkan versi web Baidu Netdisk? Pintu masuk log masuk versi web Baidu Netdisk
Mar 13, 2024 pm 04:58 PM
Baidu Netdisk bukan sahaja boleh menyimpan pelbagai sumber perisian, tetapi juga berkongsinya dengan orang lain Ia menyokong penyegerakan berbilang terminal Jika komputer anda tidak memuat turun klien, anda boleh memilih untuk memasuki versi web. Jadi bagaimana untuk log masuk ke versi web Baidu Netdisk? Mari kita lihat pengenalan terperinci. Pintu masuk masuk versi web Baidu Netdisk: https://pan.baidu.com (salin pautan ke pelayar untuk dibuka) Pengenalan perisian 1. Perkongsian Menyediakan fungsi perkongsian fail, pengguna boleh menyusun fail dan berkongsi dengan rakan-rakan yang memerlukan. 2. Awan: Ia tidak mengambil terlalu banyak memori Kebanyakan fail disimpan dalam awan, dengan berkesan menjimatkan ruang komputer. 3. Album foto: Menyokong fungsi album foto awan, mengimport foto ke cakera awan, dan kemudian menyusunnya untuk dilihat oleh semua orang. ,
Bagaimana untuk log masuk jika Xiaohongshu hanya mengingati akaun tersebut? Saya hanya ingat bagaimana untuk mendapatkan semula akaun saya?
Mar 23, 2024 pm 05:31 PM
Xiaohongshu kini telah disepadukan ke dalam kehidupan seharian ramai orang, dan kandungannya yang kaya serta kaedah operasi yang mudah membuatkan pengguna menikmatinya. Kadang-kadang, kita mungkin terlupa kata laluan akaun Memang menjengkelkan untuk hanya mengingati akaun tetapi tidak boleh log masuk. 1. Bagaimana untuk log masuk jika Xiaohongshu hanya mengingati akaun tersebut? Apabila kami terlupa kata laluan kami, kami boleh log masuk ke Xiaohongshu melalui kod pengesahan pada telefon bimbit kami. Operasi khusus adalah seperti berikut: 1. Buka Aplikasi Xiaohongshu atau versi web Xiaohongshu 2. Klik butang "Log Masuk" dan pilih "Log Masuk Akaun dan Kata Laluan" 3. Klik butang "Lupa kata laluan anda?" . Masukkan nombor akaun anda Klik "Seterusnya"; 5. Sistem akan menghantar kod pengesahan ke telefon bimbit anda, masukkan kod pengesahan dan klik "OK"; Anda juga boleh menggunakan akaun pihak ketiga (seperti
Bagaimana untuk melaksanakan fungsi klon WeChat pada telefon mudah alih Huawei
Mar 24, 2024 pm 06:03 PM
Bagaimana untuk melaksanakan fungsi klon WeChat pada telefon mudah alih Huawei Dengan populariti perisian sosial dan penekanan yang semakin meningkat terhadap privasi dan keselamatan orang ramai, fungsi klon WeChat telah beransur-ansur menjadi tumpuan perhatian. Fungsi klon WeChat boleh membantu pengguna log masuk ke berbilang akaun WeChat pada telefon mudah alih yang sama pada masa yang sama, menjadikannya lebih mudah untuk diurus dan digunakan. Tidak sukar untuk melaksanakan fungsi klon WeChat pada telefon mudah alih Huawei Anda hanya perlu mengikuti langkah berikut. Langkah 1: Pastikan versi sistem telefon mudah alih dan versi WeChat memenuhi keperluan Pertama, pastikan versi sistem telefon mudah alih Huawei anda telah dikemas kini kepada versi terkini, serta Apl WeChat.
Bagaimana untuk menyelesaikan masalah biasa ketidaksahihan masa log masuk Laravel
Mar 06, 2024 pm 09:24 PM
Bagaimana untuk menyelesaikan masalah biasa Laravel tamat masa log masuk Apabila menggunakan Laravel untuk membangunkan aplikasi web, pengesahan log masuk ialah fungsi yang sangat penting. Walau bagaimanapun, kadangkala jika pengguna tidak beroperasi untuk masa yang lama selepas log masuk, halaman mungkin log keluar secara automatik atau pengesahan mungkin gagal. Masalah ini agak biasa Perkara berikut akan memperkenalkan cara menyelesaikan masalah ini dengan menetapkan masa sesi dan memberikan contoh kod tertentu. 1. Tetapkan masa tamat sesi dalam Laravel, secara lalai sessi
