Rookie Cai Zhi’s Ajax review Chapter 3 (Ajax’s no refresh login)

Time:2021-10-24

Well, as before, first build a login.html page to fill in the login information, and then build a dealdata.aspx page (of course, it is best to use the general processing program: *. Ashx) to process the data.

In the login.html page, the code is as follows:

Copy codeThe code is as follows:
<head>
< title > no refresh login < / Title >
<script src=”Scripts/jquery-1.4.1.js” type=”text/javascript”></script>
<script type=”text/javascript”>
$(function () {
//Element binding global ajaxstart event
$(“#divMsg”).ajaxStart(function () {
$(this).show(); // Display the contents of span
})
//Element binding global ajaxstop event
$(“#divMsg”).ajaxStop(function () {
$(this). HTML (“request processing completed!”). Hide();
})
$(“#btnsure”). Click (function() {/ / click button event
var $name = $(“#txtName”);// Get login
var $pwd = $(“#txtPwd”);// Get password
if ($name.val() != “” && $pwd.val() != “”) {
//Call the login() method
Login($name.val(),$pwd.val());
} else {
If ($name. Val() = = “”) {/ / if the login name is not empty
Alert (“login name cannot be empty!”);
$name.focus();// Get focus
return false;
} else {
Alert (“password cannot be empty!”);
$pwd.focus();
return false;
}
}
})
})
function Login(name, password) {
$.ajax({
Type: “post”, / / the method of data request (post or get). The default is get
URL: “dealdata. ASPX”, / / the address to send the request (the default is the current page)
Data: “action = login & date =” + new date() + “& name =” + name + “& PWD =” + password, / / data sent to the server
//Data returned after successful login
success: function (data) {
If (data = = “true”) {/ / judge according to the return value (Note: there should be an error when true is written in ture!)
Alert (“login succeeded!”);
//window.location = “1.htm”; Page to jump to
} else {
Alert (“wrong login name or password!”);
return false;
}
}
});
}
</script>
</head>
<body style=”text-align:center”>
< div > login name: < input type = “text” value = “” / > < / div >
<br />
< div > password: < input type = “text” value = “” / > < / div > < br / >
<div>
< input type = “reset” value = “OK” / >
</div>
< span style = “display: none;” > sending request</span>
</body>
</html>

In dealdata.aspx, the background code is as follows:

Copy codeThe code is as follows:
public partial class ManageData : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string name = System.Web.HttpUtility.UrlDecode(Request[“name”]);// Get login
string pwd = System.Web.HttpUtility.UrlDecode(Request[“pwd”]);// Get password
Response.Write(Login(name, pwd));
Response.End();
}
private bool Login(string name, string pwd)
{
bool result = false;
If (name = = “side dish” & & PWD = = “123456”)
{
return true;
}
return result;
}
}

Well, children’s shoes, try it quickly! No refresh, you can!