Ajax实现局部刷新
Ajax实现局部刷新 <script type="text/javascript"> var xmlhttp; function getData() { //获取用户填写的名称 var city=document.getElementByIdx("txt").value; //创建异步调用对象 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); //将对象状态与事件相关联 xmlhttp.onreadystatechange=statechange; //加载要链接的页面 xmlhttp.Open("POST","datapage.aspx?city=" +city,true); //发送请求 xmlhttp.Send(); } function statechange() { //判断异步调用是否已经完成 if(xmlhttp.readystate==4) { //判断完成的提示代码是否是OK状态 if(xmlhttp.status==200) { //将返回数据作为参数,传递给填充方法 FillData(xmlhttp.responseText); } } } function FillData(strcity) { document.getElementByIdx("DropDownList1").options.length=0; var indexofcity; var city; //切割传递来的字符串 while(strcity.length>0) { //判断是否是最后一个字符串 indexofcity=strcity.indexOf(","); if(indexofcity >0) { city=strcity.substring(0,indexofcity); strcity=strcity.substring(indexofcity+1); //填充下拉框 document.getElementByIdx("DropDownList1").add(new Option(city,city)); } else { // 如果是最后一个字符串 lastcity=strcity.substring(0,2); document.getElementByIdx("DropDownList1").add(new Option(lastcity,lastcity)); break; } }; } </script> 第二个页面 protected void Page_Load(object sender, EventArgs e) { //获取传递过来的参数 string city =Request.QueryString["city"]; Response.Clear(); //判断城市名 switch (city) { case "beijing": //填充相关的区域 Response.Write("朝阳,海淀,东城,西城"); break; case "shanghai": Response.Write("浦东,静安,虹口,徐汇"); break; case "jinan": Response.Write("历下,历城,市中,天桥"); break; } } ----------------------------------使用回调技术实现局部刷新 <script type="text/javascript"> function FillData() { var city=document.getElementByIdx("TextBox1").value; <% =this.ClientScript.GetCallbackEventReference(this,"city","FillDll",null) %>; } function FillDll(strcity) { document.getElementByIdx("DropDownList1").options.length=0; var indexofcity; var city; //切割传递来的字符串 while(strcity.length>0) { //判断是否是最后一个字符串 indexofcity=strcity.indexOf(","); if(indexofcity >0) { city=strcity.substring(0,indexofcity); strcity=strcity.substring(indexofcity+1); //填充下拉框 document.getElementByIdx("DropDownList1").add(new Option(city,city)); } else { // 如果是最后一个字符串 document.getElementByIdx("DropDownList1").add(new Option(strcity,strcity)); break; } }; } </script> private string _data; public string GetCallbackResult() { //返回处理后的数据 return _data; } public void RaiseCallbackEvent(string eventArgument) { //判断传递过来的参数 switch (eventArgument) { case "北京": _data = "朝阳,海淀,东城,西城"; break; case "上海": _data = "浦东,静安,徐汇,虹口"; break; case "济南": _data = "历城,历下,市中,天桥"; break; } } -------------------Iframe实现局部刷新 <script language="javascript"> function Search() { var city=document.getElementByIdx("TextBox1").value; if(city !="") { document.getElementByIdx("iframe1").src="myframe.aspx?city=" +city; } } </script> <iframe src="myframe.aspx" style="TEXT-ALIGN: center" id="iframe1" width="100%" height="100%" frameborder="0" scrolling="no"/> 第二页面myframe.aspx <div style="TEXT-ALIGN: center"> <asp:DropDownList ID="DropDownList1" runat="server" Width="154px"> </asp:DropDownList></div> protected void Page_Load(object sender, EventArgs e) { //获取传递过来的参数 string city = Request.QueryString["city"]; //判断城市名 switch (city) { case "北京": //填充相关的区域 DropDownList1.Items.Clear(); DropDownList1.Items.Add("朝阳"); DropDownList1.Items.Add("海淀"); DropDownList1.Items.Add("东城"); DropDownList1.Items.Add("西城"); break; case "上海": DropDownList1.Items.Clear(); DropDownList1.Items.Add("浦东"); DropDownList1.Items.Add("静安"); DropDownList1.Items.Add("虹口"); DropDownList1.Items.Add("徐汇"); break; case "济南": DropDownList1.Items.Clear(); DropDownList1.Items.Add("历下"); DropDownList1.Items.Add("历城"); DropDownList1.Items.Add("市中"); DropDownList1.Items.Add("天桥"); break; } } --------------------------------------使用脚本方法实现局部刷新 <script type="text/javascript"> function FillData(strcity) { document.getElementByIdx("DropDownList1").options.length=0; var indexofcity; var city; //切割传递来的字符串 while(strcity.length>0) { //判断是否是最后一个字符串 indexofcity=strcity.indexOf(","); if(indexofcity >0) { city=strcity.substring(0,indexofcity); strcity=strcity.substring(indexofcity+1); //填充下拉框 document.getElementByIdx("DropDownList1").add(new Option(city,city)); } else { // 如果是最后一个字符串 document.getElementByIdx("DropDownList1").add(new Option(strcity,strcity)); break; } }; } </script> using System.Text; protected void Page_Load(object sender, EventArgs e) { //创建字符串连接对象 StringBuilder myscript = new StringBuilder(); //使用字符串组织一个JavaScript脚本方法 myscript.Append("function seekCity() {\n"); myscript.Append("var city=document.getElementByIdx('TextBox1').value; \n"); myscript.Append("switch(city) {\n"); myscript.Append("case '北京': \n"); myscript.Append("FillData('" + GetCityStr("北京") +"'); \n"); myscript.Append("break; \n"); myscript.Append("case '上海': \n"); myscript.Append("FillData('" + GetCityStr("上海") + "'); \n"); myscript.Append("break; \n"); myscript.Append("case '济南': \n"); myscript.Append("FillData('" + GetCityStr("济南") + "'); \n"); myscript.Append("break; }\n"); myscript.Append(" }\n"); //使用注册脚本方法在页面的客户端,注册这个字符串编写的脚本方法。 Page.ClientScript.RegisterClientScriptBlock(typeof(string), "seekCity", myscript.ToString(),true); } //通过获取城市名,返回城市的区县字符串 private string GetCityStr(string INcity) { string city=""; switch (INcity) { case "北京": city = "朝阳,海淀,东城,西城"; break; case "上海": city = "浦东,静安,徐汇,虹口"; break; case "济南": city = "历城,历下,市中,天桥"; break; } //返回包含区县的 字符串连接 return city; }