JQuery下的AJAX响应例子

zoukankan html css js c++ java

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>
                     </td>
            </tr>
            <tr>
                <td>
                    <div>
                        密码：</div>
                </td>
                <td>
                    <input id="txtPassword" type="password" /><div id="passwordTip" style=" 344px">
                    </div>
                </td>
                <td>
                     </td>
            </tr>
            <tr>
                <td>
                     </td>
                <td>
                    <input id="submitLogin" type="button" value="登陆" /></td>
                <td>
                     </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;
        }
    }
}

查看全文

相关阅读:
洛谷P1043数字游戏
 luogu P1330 封锁阳光大学
 luoguP1242 新汉诺塔
 luogu P1892 [BOI2003]团伙
 luogu P3375 【模板】KMP字符串匹配
 luoguP1440 求m区间内的最小值
 luoguP2700 逐个击破
 luoguP2814 家谱
 luogu P1962 斐波那契数列
 P3379 【模板】最近公共祖先（LCA）

原文地址：https://www.cnblogs.com/ringwang/p/2029641.html