iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > node.js >Ajax如何实现无刷新登录
  • 968
分享到

Ajax如何实现无刷新登录

2024-04-02 19:04:59 968人浏览 泡泡鱼
摘要

这篇文章主要为大家展示了“ajax如何实现无刷新登录”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Ajax如何实现无刷新登录”这篇文章吧。先建一个Login.h

这篇文章主要为大家展示了“ajax如何实现无刷新登录”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Ajax如何实现无刷新登录”这篇文章吧。

先建一个Login.html页面吧,用于填写登录信息,然后再建一个DealData.aspx页面吧(当然,这里用一般处理程序是最好的了:*.ashx),用来处理数据用的。
在login.html页面中其代码如下:

<head>
<title>无刷新登录</title>
<script src="Scripts/Jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//元素绑定全局ajaxStart事件
$("#divMsg").ajaxStart(function () {
$(this).show(); //显示span里面的内容
})
//元素绑定全局ajaxStop事件
$("#divMsg").ajaxStop(function () {
$(this).html("请求处理已经完成!").hide();
})
$("#btnSure").click(function () {//点击按钮事件
var $name = $("#txtName");//获取登录名
var $pwd = $("#txtPwd");//获取密码
if ($name.val() != "" && $pwd.val() != "") {
//调用Login()方法
Login($name.val(),$pwd.val());
} else {
if ($name.val() == "") {//如果登录名不为空
alert("登录名不能为空!");
$name.focus();//获取焦点
return false;
} else {
alert("密码不能为空!");
$pwd.focus();
return false;
}
}
})
})
function Login(name, passWord) {
$.ajax({
type: "POST", //数据请求的方式(post或get),默认为get
url: "DealData.aspx", //发送请求的地址(默认为当前页)
data: "action=Login&date=" + new Date() + "&name=" + name + "&pwd=" + password,//发送到服务器的数据
//登录成功后返回的数据
success: function (data) {
if (data == "True") {//根据返回值进行判断(注意:Ture写成true应该会出错吧!)
alert("登录成功!");
//window.location = "1.htm";要跳转的页面
} else {
alert("登录名或密码错误!");
return false;
}
}
});
}
</script>
</head>
<body >
<div>登录名:<input type="text" id="txtName" value="" /></div>
<br />
<div>密 码:<input type="text" id="txtPwd" value="" /></div><br />
<div>
<input type="reset" value="确定" id="btnSure" />
</div>
<span id="divMsg" >正在发送请求......</span>
</body>
</html>


在DealData.aspx中,其后台代码如下:

复制代码 代码如下:


public partial class ManageData : System.WEB.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string name = System.Web.HttpUtility.UrlDecode(Request["name"]);//获取登录名
string pwd = System.Web.HttpUtility.UrlDecode(Request["pwd"]);//获取密码
Response.Write(Login(name, pwd));
Response.End();
}
private bool Login(string name, string pwd)
{
bool result = false;
if (name == "小菜" && pwd=="123456")
{
return true;
}
return result;
}
}

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

--结束END--

本文标题: Ajax如何实现无刷新登录

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

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

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

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

下载Word文档
猜你喜欢
  • Ajax如何实现无刷新登录
    这篇文章主要为大家展示了“Ajax如何实现无刷新登录”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Ajax如何实现无刷新登录”这篇文章吧。先建一个Login.h...
    99+
    2022-10-19
  • AJAX怎么实现无刷新登录功能
    这篇文章主要为大家展示了“AJAX怎么实现无刷新登录功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“AJAX怎么实现无刷新登录功能”这篇文章吧。最近学习了如何...
    99+
    2022-10-19
  • jQ中如何使用ajax实现用户无刷新登录
    这篇文章给大家分享的是有关jQ中如何使用ajax实现用户无刷新登录的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。ajax俗称无刷新登录或局部刷新登录,这样可以提高用户体验了,文章...
    99+
    2022-10-19
  • 如何基于Ajax技术实现无刷新用户登录功能
    这篇文章主要为大家展示了“如何基于Ajax技术实现无刷新用户登录功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何基于Ajax技术实现无刷新用户登录功能”这...
    99+
    2022-10-19
  • ajax如何实现无刷新分页
    这篇文章主要介绍ajax如何实现无刷新分页,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体如下:在普通的分页中,一旦页码改变,则url改变,整个页面都会刷新,如果我们希望页码的改变...
    99+
    2022-10-19
  • 如何实现类似facebook无刷新ajax更新
    这篇文章主要介绍了如何实现类似facebook无刷新ajax更新,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 ...
    99+
    2022-10-19
  • AJAX如何实现RSS无刷新聚合器
    这篇文章主要介绍AJAX如何实现RSS无刷新聚合器,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! rss.js代码如下:<!-- //控制ID fu...
    99+
    2022-10-19
  • ajax如何实现无刷新评论功能
    小编给大家分享一下ajax如何实现无刷新评论功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!这是留言板的界面,当用户点击提交留...
    99+
    2022-10-19
  • 如何实现Ajax无刷新分页效果
    这篇文章给大家分享的是有关如何实现Ajax无刷新分页效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。Ajax无刷新分页效果,如下代码实现<!doctype ht...
    99+
    2022-10-19
  • jsp+ajax如何实现无刷新上传文件
    这篇文章主要为大家展示了“jsp+ajax如何实现无刷新上传文件”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“jsp+ajax如何...
    99+
    2022-10-19
  • ajax如何实现无刷新上传和下载
    这篇文章主要介绍了ajax如何实现无刷新上传和下载,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 关于上传使用F...
    99+
    2022-10-19
  • pushState实现Ajax无刷新页面切换
    可以通过使用pushState方法来实现Ajax无刷新页面切换。pushState方法可以向浏览器的历史记录中添加一个新的状态,并且...
    99+
    2023-08-15
    pushState
  • Ajax如何实现带有验证码的局部刷新登录界面
    这篇文章给大家分享的是有关Ajax如何实现带有验证码的局部刷新登录界面的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。运行界面:验证码后台访问部分上一篇博客已经介绍多了,这里介绍如何利用img中src实现局部刷新验...
    99+
    2023-06-08
  • ajax如何实现无刷新上传文件功能
    这篇文章主要介绍了ajax如何实现无刷新上传文件功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。具体内容如下<!DOCTYPE HTML><ht...
    99+
    2023-06-08
  • Ajax如何实现无闪烁定时刷新页面
    这篇文章主要介绍Ajax如何实现无闪烁定时刷新页面,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!在Web开发中我们经常需要实现定时刷新某个页面:来保持session的值或者检查session的值是否为空(比如说防止同...
    99+
    2023-06-08
  • 如何使用AJAX实现无刷新数据分页
    这篇文章将为大家详细讲解有关如何使用AJAX实现无刷新数据分页,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。一、实现过程注意:一下的内容都是在服务器内使用的。首先要在服务器的路径下建立几个文件,比如,pa...
    99+
    2023-06-08
  • Ajax如何实现页面无刷新留言效果
    这篇文章将为大家详细讲解有关Ajax如何实现页面无刷新留言效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。利用Ajax实现页面无刷新留言效果实现效果前言:在百度贴吧,以及一些论坛中,当你回复或者评论完毕...
    99+
    2023-06-08
  • AJAX怎么实现无刷新搜索功能
    这篇文章主要介绍“AJAX怎么实现无刷新搜索功能”,在日常操作中,相信很多人在AJAX怎么实现无刷新搜索功能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”AJAX怎么实现无刷...
    99+
    2022-10-19
  • 如何实现ajax局部刷新
    这篇文章主要介绍了如何实现ajax局部刷新,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。ajax局部刷新 <script>&nb...
    99+
    2022-10-19
  • AJAX如何实现无刷新检测用户名功能
    这篇文章将为大家详细讲解有关AJAX如何实现无刷新检测用户名功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。先来看看原理图register.php<!DOCTYPE html>&l...
    99+
    2023-06-08
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作