• JQuery下的AJAX响应例子


    用户登录文件,其实可以用HTML的静态页面

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="mylogin.aspx.cs" Inherits="mylogin" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        
    <title></title>
        
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
        
    <script language ="javascript" type="text/javascript">
            $(document).ready(function () {
                
                
    //用户录入的时候提示
                $("#txtUserName").change(function () {
                    
    if ($("#txtUserName").val() != "") {
                        $(
    "#userNameTip").html("");
                    }
                    
    else {
                        $(
    "#userNameTip").html("请输入用户名");
                    }
                });

                
    //密码录入的时候提示
                $("#txtPassword").change(function () {
                    
    if ($("#txtPassword").val() != "") {
                        $(
    "#passwordTip").html("");
                    }
                    
    else {
                        $(
    "#passwordTip").html("请输入密码");
                    }
                });

                
    //提交前检查录入情况
                $("#submitLogin").click(function () {
                    
    if (CheckInput()) {
                        AjaxLogin();
                    }
                });
            });

            
    //检查用户是否录入
            function CheckInput() {
                var flag
    =true;
                
    if ($("#txtUserName").val() == "") {
                    $(
    "#userNameTip").html("请输入用户名");
                    flag 
    = false;
                }
                
    if ($("#txtPassword").val() == "") {
                    $(
    "#passwordTip").html("请输入密码");
                    flag 
    = false;
                }

                
    if (flag)
                    
    return true;
                
    else
                    
    return false;
            }

            
    //Ajax方式请求登陆,注意格式
            function AjaxLogin() {
                $.ajax({
                    type: 
    "post",
                    url: 
    "Ajax/userLogin.ashx",
                    data: {
                        userName: $(
    "#txtUserName").val(),
                        password: $(
    "#txtPassword").val()
                    },
                    dataType: 
    "string",
                    beforeSend: function () {
                        
    //请求响应前,给出友好提示
                        $("#maxDiv").css("FILTER""Alpha(Opacity=50)");
                        $(
    "#maxDiv").css("position""absolute");
                        $(
    "#maxDiv").css("z-index""1");
                        $(
    "#maxDiv").css("visibility""true");
                        $(
    "#maxDiv").css("top""0");
                        $(
    "#maxDiv").css("left""0");
                        $(
    "#maxDiv").css("width""800px");
                        $(
    "#maxDiv").css("height""600px");                    
                        $(
    "#maxDiv").css("text-align""center");
                        $(
    "#maxDiv").css("vertical-align""middle");                   
                        $(
    "#maxDiv").html("<br><br><img src='images/loading.gif' /><font size=4 color=#333333>正在处理,请稍候...</font>");
                    },
                    success: function (data) {
                        
    //响应完成后,提示去掉
                        $("#maxDiv").css("width""0px");
                        $(
    "#maxDiv").css("height""0px");
                        $(
    "#maxDiv").html("");

                        
    if (data == "success") {
                            alert(
    "ok");
                        }
                        
    else {
                            alert(
    "fail");
                        }
                    },
                    error: function () {
                        
    //响应完成后,提示去掉
                        $("#maxDiv").css("width""0px");
                        $(
    "#maxDiv").css("height""0px");
                        $(
    "#maxDiv").html("");

                        alert(
    "系统繁忙,请稍候再试");
                    }
                })
            }
        
    </script>
    </head>
    <body>
        
    <form id="form1" runat="server">
        
    <div>
        
            
    <table style="100%; " border=1>
                
    <tr>
                    
    <td>
                        
    <div>
                            用户名:
    </div>
                    
    </td>
                    
    <td>
                        
    <input id="txtUserName" type="text" /><div id="userNameTip" style=" 338px">
                        
    </div>
                    
    </td>
                    
    <td>
                        
    &nbsp;</td>
                
    </tr>
                
    <tr>
                    
    <td>
                        
    <div>
                            密码:
    </div>
                    
    </td>
                    
    <td>
                        
    <input id="txtPassword" type="password" /><div id="passwordTip" style=" 344px">
                        
    </div>
                    
    </td>
                    
    <td>
                        
    &nbsp;</td>
                
    </tr>
                
    <tr>
                    
    <td>
                        
    &nbsp;</td>
                    
    <td>
                        
    <input id="submitLogin" type="button" value="登陆" /></td>
                    
    <td>
                        
    &nbsp;</td>
                
    </tr>
            
    </table>    
        
    </div>
        
    </form>
        
    <div id="maxDiv">
        
    </div>
    </body>

    </html>  

    AJAX响应的文件,这里我用的ashx文件,其实也可以用aspx文件,但是我觉得ashx文件效率高点。

    如果想使用SESSION,需要用 System.Web.SessionState  名空间,并且继承 IRequiresSessionState 类。

    <%@ WebHandler Language="C#" Class="userLogin" %>

    using System;
    using System.Web;

    public class userLogin : IHttpHandler {
        
        
    public void ProcessRequest (HttpContext context) {
            context.Response.ContentType 
    = "text/plain";

            
    string userName = context.Request["userName"].ToString();
            
    string password = context.Request["password"].ToString();
            
    if (userName.Equals("admin"&& password.Equals("admin"))
                context.Response.Write(
    "success");
            
    else
                context.Response.Write(
    "fail");
           
            
    //context.Response.Write("Hello World");
        }
     
        
    public bool IsReusable {
            
    get {
                
    return false;
            }
        }
    } 


  • 相关阅读:
    Mysql语句
    数据库的介绍以及安装
    数据库的基本操作
    进程
    并发编程
    友链
    C/C++第十一届蓝桥杯省赛B组第二场比赛
    数据结构之【栈】+十进制转d进制(堆栈数组模拟)
    sort函数的用法与实验
    memset的实验
  • 原文地址:https://www.cnblogs.com/ringwang/p/2029641.html
Copyright © 2020-2023  润新知