本文实例讲述了.net采用ajax实现邮箱注册和地区选择的方法。分享给大家供大家参考。具体实现方法如下:
首先要知道Ajax是 Asynchronous JavaScript and XML(以及 DHTML 等)的缩写.
ajax就是在浏览器上同服务器实现异步交互。在XMLhttpRequest被广泛使用之前,用户停留在页面上没有办法实现局部更新的功能,只能通过刷新整个页面来获取最新的数据,而由此代码的代价是需要传输大量的数据,而且有可能临时的一些用户信息也会丢失,而ajax的使用实现了局部更新页面内容的作用,原理是调用XMLhttpRequest这个代理,向服务发送请求,之后通过ajax定义的处理接口来更新页面的内容。
接下来用ajax实现邮箱注册和地区选择实例来说明:
首先前台部分:
<%@ 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的初步练习使用</title> <style type="text/css"> div{width:800px;margin:0 auto;height:25px;} </style> <script type="text/javascript"> function createRequest()//创建对象 { 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;//注册邮箱 function sendRequest()//发送请求 { if(document.forms[0].useremail.value=="") { alert("用户邮箱不可为空!"); document.forms[0].useremail.focus(); return false; } req = createRequest();//创建Ajax请求对象 req.open("GET","default.aspx?Email="+document.forms[0].useremail.value); req.send("");//打开服务器连接,发送请求 req.onreadystatechange = dealMethod;//设置服务器响应完成后要运行的函数 } function dealMethod()//调用函数 { if(req.readyState==4&&req.status==200)//此时是服务器已经响应完成状态 { if(req.responseText=="0")//responseText为服务器响应值属性 document.getElementById("canuse").innerHTML = "<img src='//img.jbzj.com/file_images/article/201410/icon_need.gif' />"+"该邮箱已注册"; else document.getElementById("canuse").innerHTML = "<img src='//img.jbzj.com/file_images/article/201410/icon_error.gif'/>"+"该邮箱未注册"; } } var req2=null;//初始化下拉框 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('|');//在后台返回字段中获得省份子列如(1,河南),(2,江西)等 var cities = s.split('&')[1].split('|');//在后台返回字段中获得城市子列如(1,郑州),(2,洛阳),(3,开封)等 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);//将省份编号和省份名分别以value和text的形式添加到select下的option里面 } 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);//将城市编号和城市名分别以value和text的形式添加到select下的option里面 } } } var req3=null;//改变省份触动城市的改变 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="注册" onclick="sendRequest();"/></th> </tr> </table> </form> </body> <script type="text/javascript"> GetSelect(); </script> </html>
然后是后台部分:
public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (Request.QueryString["Email"] != null)//注册邮箱 {//通常情况下,这里的数据来源应该是从某一个数据库里面读取的,这里为了方便就随便的定义了一个死板的数据代替了 string bbb = "2320774925@qq.com"; string aaa = Request.QueryString["Email"]; if (aaa == bbb) Response.Write("0"); else Response.Write("1"); Response.End(); } //常规情况下,接下来的两个处理部分应该用到两张数据表 if (Request.QueryString["Selected"] != null)//初始化下拉框 {
//通常情况下这里的数据应该是从数据库里面读取的,然后获取到省份编号为1对应下的所有城市编号和城市名称,接着按照某些方法首先将省份表里面的两列数据组合成形如"1,河南|2,浙江|3,湖北|4,江苏|5,安徽|6,山东|7,江西“这样的字符串,最后加上省份编号为1对应下的所有城市编号和城市名称最终形成形如"1,河南|2,浙江|3,湖北|4,江苏|5,安徽|6,山东|7,江西&1,郑州|2,洛阳|3,开封|4,信阳|5,南阳|6,驻马店|7,安阳|8,鹤壁|9,濮阳|10,平顶山"这样的一列字符串回传到前端 string result = "1,河南|2,浙江|3,湖北|4,江苏|5,安徽|6,山东|7,江西&1,郑州|2,洛阳|3,开封|4,信阳|5,南阳|6,驻马店|7,安阳|8,鹤壁|9,濮阳|10,平顶山"; Response.Write(result); Response.End(); } if (Request.QueryString["ProId"] != null)//改变省份触动城市的改变 {
//通常情况下这里的数据依然应该是从数据库里面读取的,在前端部分,初始化了下拉框之后,所有的省份将被填充到province下拉框中,省份编号为1 的所有城市也将被填充到city下拉框中,此时,当你重新选择省份的时候,服务器将会接收到一个新的数据,其实这个数据也就是所谓的省份编号了,然后这里 通过这个省份编号获得对应下的所有城市编号和城市名称,通过一定的方法处理最终获得形如"1,郑州|2,洛阳|3,开封|4,信阳|5,南阳"这样的字符串回传给前端 int num = Int32.Parse(Request.QueryString["ProId"]); if (num == 1) Response.Write("1,郑州|2,洛阳|3,开封|4,信阳|5,南阳"); if (num == 2) Response.Write("1,杭州|2,宁波|3,温州|4,嘉兴|5,湖州"); if (num == 3) Response.Write("1,武汉|2,黄石|3,十堰|4,宜昌|5,荆州"); if (num == 4) Response.Write("1,南京|2,无锡|3,徐州|4,常州|5,苏州"); if (num == 5) Response.Write("1,合肥|2,芜湖|3,蚌埠|4,淮南|5,马鞍山"); if (num == 6) Response.Write("1,济南|2,青岛|3,淄博|4,枣庄|5,东营"); else Response.Write("1,南昌|2,景德镇|3,萍乡|4,九江|5,新余"); Response.End(); } } }
希望本文所述对大家的.net程序设计有所帮助。
本文向大家介绍Ajax实现注册并选择头像后上传功能,包括了Ajax实现注册并选择头像后上传功能的使用技巧和注意事项,需要的朋友参考一下 在初次接触ajax后,我们做了一个crm训练的项目,大多数小组都有注册用户这一项,但是都忽略掉了一个功能,那就是,很多网站的注册是可以上传头像的,在这里我做了一个在已有的头像数组里选择图片上传作头像的小型crm(当然,可以从本地照片上传并裁剪的那种我还没做出来,不
本文向大家介绍java实现简单注册选择所在城市,包括了java实现简单注册选择所在城市的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了java实现简单注册选择所在城市的全部代码,供大家参考,具体内容如下 1.activity_main.xml 2.register.xml 3. MainActivity.java 4. RegisterAcivity.java
本文向大家介绍python实现QQ邮箱/163邮箱的邮件发送,包括了python实现QQ邮箱/163邮箱的邮件发送的使用技巧和注意事项,需要的朋友参考一下 QQ邮箱/163邮箱的邮件发送:py文件发送邮件内容相当于一个第三方的客户端,借助于QQ/163邮箱服务器来发送的邮件。 主要配置: 导入模块——import smtplib 邮箱SMTP服务器的主机地址,HOST——将来使用这个服务器收
本文向大家介绍利用Ionic2 + angular4实现一个地区选择组件,包括了利用Ionic2 + angular4实现一个地区选择组件的使用技巧和注意事项,需要的朋友参考一下 前言 本文主要给大家介绍的是关于利用Ionic2 + angular4实现一个地区选择组件的相关内容,为什么会有这篇文章?主要是因为最近在项目重构的过程中,发现之前用mobiscroll写的地区选择指令在angular2
本文向大家介绍Java实现邮箱发送功能实例(阿里云邮箱推送),包括了Java实现邮箱发送功能实例(阿里云邮箱推送)的使用技巧和注意事项,需要的朋友参考一下 前言 绑定阿里云域名,创建域名账户,并配置解析域名账户,获得发送邮箱的权限,上限两百封,超出要¥… 阿里云邮件推送控制台 https://www.aliyun.com/product/directmail 申请邮箱并解析域名 https://y
本文向大家介绍C#实现QQ邮箱发送邮件,包括了C#实现QQ邮箱发送邮件的使用技巧和注意事项,需要的朋友参考一下 闲着蛋疼。计划着改善公司的邮件服务。怎料公司网络封闭的太厉害了。我只能在家里利用开放点的网络来测试发送邮件; 利用qq邮箱发送到公司的企业邮箱上; 前提准备,登陆qq邮箱开启stmp服务。不开启的话没法通过代码登陆到你的邮箱; 查询腾讯qq邮箱的smtp主机地址为:smtp.qq.com