Home > Backend Development > C#.Net Tutorial > How to implement asp.net+jquery ajax login without refresh

How to implement asp.net+jquery ajax login without refresh

高洛峰
Release: 2017-01-12 14:21:56
Original
1406 people have browsed it

Because I need to study the ajax of js for work, the following is the result.
Mainly consists of three parts:
1. Friendly reminder in the js part. Pay attention to the return false in $("#btn_login") in the js part; this can prevent the server from being rolled back, otherwise it will still be refreshed

$(document).ready(function () {
    $("#btn_login").click(function () {
        postlogin();
        return false;
    });
});

function postlogin() {
    if (checkUserName() && checkUserPwd()) {
        var username = $('#txt_loginname').val();
        var userpass = $('#txt_loginpass').val();
        $.post("../UserLogin.aspx", { UserName: username, UserPass: userpass }, function (result) {
            if (result == "1") {
                alert("登录成功!");
            } else if (result == "3") {
                alert("用户名不正确!");
            } else if (result == "2") {
                alert("密码不正确!");
            } else {
                alert("登录失败!请重试!" + result);
            }
        });
    }
}

function checkUserName() {
    if ($("#txt_loginname").val().length == 0) {
        alert('用户名不能为空!');
        return false;
    } else {
        return true;
    }
}

function checkUserPwd() {
    if ($("#txt_loginpass").val().lenght == 0) {
        alert('密码不正确!');
        return false;
    } else {
        return true;
    }
}
Copy after login

2. Page part

<table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="32%" height="37" valign="middle">用户名:</td>
            <td width="68%" valign="middle">
                <input type="text" name="txt_loginname" id="txt_loginname" class="input_1"/>
            </td>
          </tr>
          <tr>
            <td height="37" valign="middle">密 码:</td>
            <td valign="middle">
            <input type="password" name="txt_loginpass" id="txt_loginpass" class="input_2"/>
            </td>
          </tr>
          <!--<tr>
            <td height="37" valign="middle">验证码:</td>
            <td valign="middle">
              <input type="text" name="textfield3" id="textfield3" class="input_3" style="float:left"/>
              <span style="float:left; margin-left:6px;"><img src="images/img_7.gif" /></span></td>
          </tr>-->
          <tr>
            <td colspan="2">
              <input type="image" name="btn_login" id="btn_login" src="images/img_4.gif" />
              <input type="image" name="input" src="images/img_5.gif" />
               <input type="image" name="input" src="images/img_6.gif" />
            </td>
          </tr>
        </table>
Copy after login

3. The background part is the page that is redirected in js to process login information

protected void Page_Load(object sender, EventArgs e)
        {
            string username = Request.Form["UserName"];
            string userpass = Request.Form["UserPass"];
            T_User user = UserManager.loginpassword(username, userpass);
            if (user != null)
            {
                Session["user"] = user;
                Response.Write("1");  //登录成功
                Response.End();

            }
            else
            {
                if (UserManager.OnlyOne(username) >= 1)
                {
                    Response.Write("2");  //密码不正确
                    Response.End();
                }
                else
                {
                    Response.Write("3");  //用户名不存在
                    Response.End();
                }
            }
        }
Copy after login

More articles related to the implementation method of asp.net+jquery ajax non-refresh login Please pay attention to PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template