Asp.Net中使用Ajax登录开发案列

最新推荐文章于 2022-07-18 12:53:00 发布
最新推荐文章于 2022-07-18 12:53:00 发布
阅读量1.3k 收藏
点赞数 4
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mr_zmx_Kiss_Code/article/details/80270567
版权

ajax同步，ajax开发注意事项，ajax的作用就是实时同步。无刷新技术。

ajax登录案列：

<script>
        //$("[type=password]").val = "";
        登录链接测试，使用时可删除
        //$(".submit_btn").click(function () {
        //    
        //});
        //主程序入口
        $(function () {
            //登录
            LoginimmediatelyUser();
            //验证用户名是否存在
            checkUserName();
        });
        
        //登录模块
        function LoginimmediatelyUser()
        {
            $("[type=button]").click(function () {
                $.post("login.ashx", { name: $("#txtName").val(), pwd: $("#txtPwd").val() }, function (data) {
                    if (data == "ok") {
                        window.location.href = "index.aspx";
                    }
                    else
                    {
                        alert("登录异常");
                        window.location.href = "Login.aspx";
                    }
                });
            });
        }
        //用户名是否存在验证
        function checkUserName()
        {
            $("#txtName").blur(function () {
                var inputVal = $("#txtName").val();
                var reg = /[\w\d]{6,}/g;
                if (inputVal == "")
                {
                    $("#tittleId").html("不允许为空");
                }
                else if (!reg.test(inputVal)) {
                    $("#tittleId").html("* 请输入6位以上的英文字母或数字的组合");
                    $("#tittleId").css("color", "red");
                }
                else
                {
                    //异步验证用户名是否存在
                    $.post("checkUserName.ashx", { name: $("#txtName").val(), pwd: $("#txtPwd").val() }, function (returndata) {


                  //用户名存在，返回1。否则返回0  
            if (returndata == "1") {
                      $("#tittleId").html("* 此用户名已被注册").css("color", "red");
                      //                        $("#btn_register").attr("disabled", "disabled");  
                  }
                  else {
                      $("#tittleId").html("恭喜！此用户名可以使用").css("color", "green");
                      //                        $("#btn_register").removeAttr("disabled");  
                  }
               });
                }
            });
        }

    </script>


前端源码

<body>
   <div class="layui-canvs"></div>
<div class="layui-layout layui-layout-login">
     <div style="text-align:center; color:yellow;border:1px; border-color:yellow" id="tittleId"></div>
<h1>
<strong>LarryCMS管理系统后台</strong>
<em>Management System</em>
</h1>
<div class="layui-user-icon larry-login">
<input type="text" placeholder="账号" class="login_txtbx" id="txtName"/>
</div>
<div class="layui-pwd-icon larry-login">
<input type="password" placeholder="密码" class="login_txtbx" id="txtPwd"/>
</div>
    <div class="layui-val-icon larry-login">
    <div class="layui-code-box">
    <input type="text" id="code" name="code" placeholder="验证码" maxlength="4"  class="login_txtbx"/>
            <img src="images/verifyimg.png" alt="" class="verifyImg" id="verifyImg" οnclick="javascript:this.src='xxx'+Math.random();" />
    </div>
    </div>
    <div class="layui-submit larry-login">
    <input type="button" value="立即登陆" class="submit_btn"/>
    </div>

</div>
<script type="text/javascript" src="common/layui/lay/dest/layui.all.js"></script>
<script type="text/javascript" src="js/login.js"></script>
<script type="text/javascript" src="jsplug/jparticle.jquery.js"></script>


<script type="text/javascript">
$(function(){
$(".layui-canvs").jParticle({
background: "#141414",
color: "#E6E6E6"
});

});
</script>
</body>

疯狂学吧孩子
关注
  • 4
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
小白看过来!有关于highcharts 数据格式 以及案例 下钻
qq_41407619的博客
10-22 1212
小白看过来!有关于highcharts 数据格式 以及案例 下钻 博主新手 最近做了一个highcharts下钻的报表 要求是一级下转 刚开始是导入highcharts常用的几个包highcharts.js，highcharts-zh_CN.js，exporting.js ,drilldown.js(这个是必须导入的 实现下钻的依赖包) 刚刚入手看了官方文档 当时只有各种...
ASP.NET中Ajax怎么使用
01-21
在ASP.NET中应用Ajax的格式如下： 前台代码（用JQuery库） $.ajax({ 　type: POST, 　async: true, 　url: ../Ajax/ajax.ashx, 　dataType: html, 　data: null 　success: function (result) 　{ 　//do ...
在.NET中使用highcharts实例代码
weixin_33928467的博客
12-16 76
<%@ Page Language="C#" MasterPageFile="~/test/test.master" AutoEventWireup="true" CodeFile="highcharts.aspx.cs" Inherits="test_highcharts" Title="" %><asp:Content ID="Content1" ContentP...
.NET盲点面试
qq_41285553的博客
07-18 263
1.net运行机制 使用Asp.net 进行动态Web开发，编写好Web应用程序，即动态页面，并部署到Web服务器，如IIS中； 客户端在浏览器输入地址，请求相应的动态页面； Web 服务器根据客户端的请求，对Web应用程序进行编译或解释，并生成HTML流，返回给客户端 客户端浏览器解释HTML流，并显示为Web页面 2.Post和Get区别 GET在浏览器回退时是无害的，而POST会再次提交请求。 GET请求会被浏览器主动cache，而POST不会，除非手动设置。 GET请求只能进行url编码，而POST
javascript中ajax post实例详解
weixin_30790841的博客
01-16 49
一，原生态的XMLHttpRequest 代码如下 复制代码 <script language="javascript"> function saveintroduce() { //获取接受返回信息层 var introducemsg = document.getElementById("introducemsg"); //获取表单对象和用户...
全栈开发工程师学习秘籍 — HTTP和AJAX重点知识
weixin_34208283的博客
12-08 288
1、成为全站开发工程师需要掌握的技术栈 全栈（全站）开发工程师（FULL-STACK）：前后端自己都可以独立完成开发 需要使用的技术栈： [前端] HTML(5) + CSS(3) JAVASCRIPT（JQ、VUE、REACT...） [后端] Java （JSP）（最难） Python Node PHP (PHP) C# （.net -&gt;dot net） （ASP.NET） C ... ...
深入继承之抽象类和接口综合分析及完整案列解说(二)
01-04 611
通过深入继承之抽象类和接口综合分析及完整案列解说（一），我想大家已经认识到了知识共享的巨大力量了。我门上面看到的这些东西不是我们任何一个人在短时间内就能够总结出来的，但是大家一起总结，那结果就是这样爽的。      我希望大家都能够大方一点，别做得那么小气，生怕自己知道的那点知识被别人知道了。饭碗就被别人抢了，事实上在跟人分享的过程中并不是一味的在付出，你同样也会有收获，无论是帮别人解答疑问还是跟
JavaScript日历控件开发 C# 读取 appconfig文件配置数据库连接字符串，和配置文件 List<T>.ForEach 调用异步方法的意外 ef 增加或者更新的习惯思维 asp....
01-18 219
JavaScript日历控件开发 概述 在开篇之前，先附上日历的代码地址和演示地址，代码是本文要分析的代码，演示效果是本文要实现的效果代码地址：https://github.com/aspwebchh/javascript-control/tree/master/calendar演示地址：https://www.chhblog.com/html/demo/calend...
小米4支持html5,针对在webview模式中,小米魅族手机不支持html5原生video的control的解决办法![原创]...
weixin_29117669的博客
06-04 350
其实,解决办法就是,重新写个control控制功能,.同样用流行的video.js可以实现第一步就是增加个播放的图片..要不然没有按钮多难看!webkit-playsinline> 上面的视频链接是那个那个河南卫视的直播,,闲了可以自己写个video看直播这第二步自然就是控制方法拉.其实很简单,会js的估计都会写,我抛砖引玉.....$(document).ready(function...
浅析Asp.net MVC 中Ajax的使用
10-23
在ASP.NET MVC beta中我们可以使用Ajax.BeginForm, Ajax.ActionLink来进行Ajax调用，同样我们也可以使用一些支持Ajax 框架如jQuery来简化对ajax的调用。
在ASP.NET中实现AJAX
02-04
AsynchronousJavaScriptandXML(Ajax)最近掀起的高潮，要完全归功于...请尝试MichaelSchwarz的AJAX.NET包装器，通过它ASP.NET开发人员可以快速方便的部署很容易利用AJAX功能的页面。需要注意的是，这个包装器处于初
使用JavaScript验证ASP.NET中的AJAX组合框
04-08
本文将深入探讨如何使用JavaScript来验证ASP.NET中的AJAX组合框（ComboBox），确保用户选择的有效性，并实现正确显示项目列表的功能。 首先，让我们理解AJAX组合框（ComboBox）在ASP.NET中的作用。它结合了下拉列表...
ASP.NET中的Ajax输入框内容限制程序
03-17
摘要:.NET源码,Ajax相关,AjaxControlToolkit.dll　中实现Ajax输入框内容限制的程序，同样使用了AjaxControlToolkit.dll控件来实现的Ajax功能，方便实用。当用户输入的数据非规定的内容时，字符会自动消失，输入一个...
大学生挑战杯-喜树根器官培养和抗癌物质喜树碱生成的研究.rar
07-26
大学生挑战杯-喜树根器官培养和抗癌物质喜树碱生成的研究.rar
b278视频及游戏管理平台-springboot+vue.zip（可运行源码+sql文件+）
07-26
视频及游戏管理平台是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。 视频及游戏管理平台是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。 视频及游戏管理平台是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。 视频及游戏管理平台是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。 视频及游戏管理平台是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。 视频及游戏管理平台是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。
大模型应用-为Ollma开发的简单的HTML网页UI应用-附项目源码-优质项目实战.zip
最新发布
07-26
大模型应用_为Ollma开发的简单的HTML网页UI应用_附项目源码_优质项目实战
基于JAVA局域网监听软件的设计与开发(源代码+论文).rar
07-26
基于JAVA局域网监听软件的设计与开发(源代码+论文).rar
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值