net uses ajax to implement mailbox registration and locale selection instances
- 2021-01-22 05:05:49
- OfStack
This article illustrates how.net implements mailbox registration and locale selection using ajax. Share with you for your reference. The specific implementation method is as follows:
The first thing to know is that Ajax is short for Asynchronous JavaScript and XML (and DHTML, etc.).
ajax is about asynchronous interaction with the server on the browser. Before XMLhttpRequest was widely used, the user stays on the page there is no way to realize the function of local update, only by refreshing the whole page to obtain the latest data, and the price of this code is the need to transfer a large amount of data, and May 1 some temporary user information will be lost, and ajax use realized the role of local update page content, the principle is to call XMLhttpRequest this agent, sends a request to the service after processing interfaces defined by ajax to update the content of the page.
ajax to implement mailbox registration and locale selection example to illustrate:
First of all, the front desk:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication2._Default" %>
<!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>ajax The initial practice of using </title>
<style type="text/css">
div{width:800px;margin:0 auto;height:25px;}
</style>
<script type="text/javascript">
function createRequest()// Create an object
{
var request;
try
{
request = new XMLHttpRequest();
}
catch(microspft)
{
try
{
request = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(othermicrosoft)
{
try
{
request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(failed)
{
request = null;
}
}
}
return request;
}
var req = null;// Registered mail
function sendRequest()// Send the request
{
if(document.forms[0].useremail.value=="")
{
alert(" User mailbox cannot be empty! ");
document.forms[0].useremail.focus();
return false;
}
req = createRequest();// create Ajax The request object
req.open("GET","default.aspx?Email="+document.forms[0].useremail.value);
req.send("");// Open the server connection and send the request
req.onreadystatechange = dealMethod;// Set the function to run when the server response is complete
}
function dealMethod()// Call a function
{
if(req.readyState==4&&req.status==200)// At this point, the server has responded to the complete state
{
if(req.responseText=="0")//responseText Is the server response value property
document.getElementById("canuse").innerHTML = "<img src='//img.jbzj.com/file_images/article/201410/icon_need.gif' />"+" This email address has been registered ";
else
document.getElementById("canuse").innerHTML = "<img src='//img.jbzj.com/file_images/article/201410/icon_error.gif'/>"+" The email address is not registered ";
}
}
var req2=null;// Initializes the drop-down box
function GetSelect()
{
req2 = createRequest();
req2.open("GET","default.aspx?Selected=1");
req2.send("");
req2.onreadystatechange=changeSelected;
}
function changeSelected()
{
if(req2.readyState==4&&req2.status==200)
{
var s = req2.responseText;
var provinces = s.split('&')[0].split('|');// In the background return field, get the provincial member column as (1 , henan ),(2 , jiangxi ) Etc.
var cities = s.split('&')[1].split('|');// Get the city subcolumn in the background return field (1 , zhengzhou ),(2 Luoyang, ),(3 Kaifeng, ) Etc.
document.forms[0].province.length=0;
for(var i=0;i<provinces.length;i++)
{
var op = new Option();
op.value = provinces[i].split(',')[0];
op.text = provinces[i].split(',')[1];
document.forms[0].province.options.add(op);// Place the province number and the province name respectively value and text The form is added to select Under the option inside
}
document.forms[0].city.length=0;
for(var j=0;j<cities.length;j++)
{
var op2 = new Option();
op2.value = cities[j].split(',')[0];
op2.text = cities[j].split(',')[1];
document.forms[0].city.options.add(op2);// Divide the city number and city name by value and text The form is added to select Under the option inside
}
}
}
var req3=null;// Changing provinces triggers changes in cities
function GetCity()
{
req3 = createRequest();
req3.open("GET","default.aspx?ProId="+document.forms[0].province.value);
req3.send("");
req3.onreadystatechange=changeCity;
}
function changeCity()
{
if(req3.readyState==4&&req3.status==200)
{
var s = req3.responseText;
var cities = s.split('|');
document.forms[0].city.length=0;
for(var i=0;i<cities.length;i++)
{
var op = new Option();
op.value = cities[i].split(',')[0];
op.text = cities[i].split(',')[1];
document.forms[0].city.options.add(op);
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<table align="center">
<tr>
<th>Email</th>
<th><input type="text" name="useremail" value=""/></th>
<th id="canuse"></th>
<th></th>
</tr>
<tr>
<th><select name="province" onchange="GetCity();"></select></th>
<th><select name="city"></select></th>
<th><input type="button" value=" registered " onclick="sendRequest();"/></th>
</tr>
</table>
</form>
</body>
<script type="text/javascript">
GetSelect();
</script>
</html>And then the backstage part:
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (Request.QueryString["Email"] != null)// Registered mail
{
// Normally, the data source here would be from something 1 It is read from a database, and it is defined casually here for convenience 1 Instead of a rigid number
string bbb = "2320774925@qq.com";
string aaa = Request.QueryString["Email"];
if (aaa == bbb)
Response.Write("0");
else
Response.Write("1");
Response.End();
}
// As a general rule, the next two processing sections should use two tables of data
if (Request.QueryString["Selected"] != null)// Initializes the drop-down box
{
// Normally, this data would be read from a database and get the province number 1 Correspond to all the following city numbers and city names, and then in some way first combine the two columns of data in the province table to form such as "1, henan |2, zhejiang |3, hubei |4, jiangsu |5, anhui |6, shandong |7, Jiangxi "such a string, finally plus the province number for 1 All the corresponding city numbers and city names are finally formed as follows "1, henan |2, zhejiang |3, hubei |4, jiangsu |5, anhui |6, shandong |7, jiangxi &1, zhengzhou |2, luoyang |3, kaifeng |4, xinyang |5, nanyang |6, zhumadian |7, anyang |8, hebi |9, puyang |10, pingdingshan " such 1 The column string is passed back to the front end
string result = "1, henan |2, zhejiang |3, hubei |4, jiangsu |5, anhui |6, shandong |7, jiangxi &1, zhengzhou |2, luoyang |3, kaifeng |4, xinyang |5, nanyang |6, zhumadian |7, anyang |8, hebi |9, puyang |10, pingdingshan ";
Response.Write(result);
Response.End();
}
if (Request.QueryString["ProId"] != null)// Changing provinces triggers changes in cities
{
// Normally the data here should still be read from the database. In the front end, after initializing the drop-down box, all the provinces will be populated province In the drop-down box, the province number is 1 All of the cities will also be populated to city In the drop-down box, the server will receive it when you reselect the province 1 It's a new number, actually this number is called the province number, and then here Get all the corresponding city numbers and city names by this province number. Pass 1 Determining the method of processing and finally obtain the shape "1, zhengzhou |2, luoyang |3, kaifeng |4, xinyang |5, nanyang " Such a string is passed back to the front end
int num = Int32.Parse(Request.QueryString["ProId"]);
if (num == 1)
Response.Write("1, zhengzhou |2, luoyang |3, kaifeng |4, xinyang |5, nanyang ");
if (num == 2)
Response.Write("1, hangzhou |2, ningbo |3, wenzhou |4, jiaxing |5, huzhou ");
if (num == 3)
Response.Write("1, wuhan |2, Yellowstone |3,10 weir |4, yichang |5, jingzhou ");
if (num == 4)
Response.Write("1, nanjing |2, wuxi |3, xuzhou |4, changzhou |5, suzhou ");
if (num == 5)
Response.Write("1, hefei |2, wuhu |3, bengbu |4, huainan |5, Ma on shan ");
if (num == 6)
Response.Write("1, jinan |2, Qingdao |3, zibo |4, zaozhuang |5, dongying ");
else
Response.Write("1, nanchang |2, jingdezhen |3, pingxiang |4,9 jiang |5, at ");
Response.End();
}
}
}Hope this article described to everybody.net program design is helpful.