實現刷新的方法主要是Ajax,本文檔實現Ajax有兩個方法(Jquery 和 W3C的JS方法);其次,使用JS也可以實現刷新數據不刷新頁面(詳見其他刷新頁面方法JS實現);對於CallbackRefresh的方法也可以實現刷新。
上面的方法都是在頁面不刷新情況下刷新數據,Iframe實現的刷新會刷新頁面,此方法可以借鑒。
Ajax的實現:
Javascript方式:
<script type="text/javascript"> function loadXMLDoc(str) { var xmlhttp; var txt, x, i; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { xmlDoc = xmlhttp.responseXML; //xmlDoc = xmlhttp.responseText; txt = ""; x = xmlDoc.getElementsByTagName("TagName"); for (i = 0; i < x.length; i++) { if (x[i].childNodes[0].nodeValue.contains(str)) { txt = txt + x[i].childNodes[0].nodeValue; } } document.getElementById("txtHint").innerHTML = txt; } } xmlhttp.open("GET", "url", true); xmlhttp.send(); }
jquery:
<script type="text/javascript"> function loadXMLDoc(str) { $("div").ajaxError(function(){ alert("An error occurred!"); }); $("#txt").ajaxStart(function(){ alert("AJAX 請求已成功完成"); }); $("div").ajaxSuccess(function(){ alert("AJAX 請求已成功完成"); }); $("#txt").ajaxComplete(function(){ alert("AJAX 請求已成功完成"); }); $("button").click(function(){ $("#txt").load("url"); }); }
URL的使用:
Txt:
如果是 e.txt
xmlDoc = xmlhttp.responseText;
XML:
如果是e.xml
xmlDoc = xmlhttp.responseXML; x = xmlDoc.getElementsByTagName("TagName"); x[i].childNodes[0].nodeValue
asp頁面:
如果是Asp頁面 可以用下面方法調用方法獲取返回值:
URL:"WebForm1.aspx?city=" + "beijing"
頁面方法一:
在被請求頁面的WebForm1.aspx.cs 的Page_Load 里面寫:
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; } }
頁面方法二:
直接在被請求頁面WebForm1.aspx 頁面寫代碼
<% response.write("<table>") response.write("<tr><td><b>" & "asda" & "</b></td>") response.write("<td>" & "asdad" & "</td></tr>") response.write("</table>") %>
其他的刷新頁面方法:
方法1:
CallbackRefresh:
頁面調用方法
<script type="text/javascript"> function FillData() { var city=document.getElementById("TextBox1").value; <% =this.ClientScript.GetCallbackEventReference(this,"city","FillDll",null) %>; } function FillDll(strcity) { document.getElementById("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.getElementById("DropDownList1").add(new Option(city,city)); } else { // 如果是最后一個字符串 document.getElementById("DropDownList1").add(new Option(strcity,strcity)); break; } }; } </script>
后台代碼:要繼承ICallbackEventHandler (重要)
public partial class _Default : System.Web.UI.Page,ICallbackEventHandler { private string _data; protected void Page_Load(object sender, EventArgs e) { } #region ICallbackEventHandler 成員 public string GetCallbackResult() { //返回處理后的數據 return _data; } public void RaiseCallbackEvent(string eventArgument) { //判斷傳遞過來的參數 switch (eventArgument) { case "北京": _data = "朝陽,海淀,東城,西城"; break; case "上海": _data = "浦東,靜安,徐匯,虹口"; break; case "濟南": _data = "歷城,歷下,市中,天橋"; break; } } #endregion }
JS 實現局部刷新: 后台代碼如下:
protected void Page_Load(object sender, EventArgs e) { //創建字符串連接對象 StringBuilder myscript = new StringBuilder(); //使用字符串組織一個JavaScript腳本方法 myscript.Append("function seekCity() {\n"); myscript.Append("var city=document.getElementById('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; } //返回包含區縣的 字符串連接 return city; }
頁面層直接調用:
onclick="seekCity()"
切割字符:
function FillData(strcity) { document.getElementById("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.getElementById("DropDownList1").add(new Option(city,city)); } else { // 如果是最后一個字符串 document.getElementById("DropDownList1").add(new Option(strcity,strcity)); break; } }; }
Iframe實現局部刷新:
要求刷新頁面JS代碼:
<script language="javascript"> function Search() { var city=document.getElementById("TextBox1").value; if(city !="") { document.getElementById("iframe1").src="myframe.aspx?city=" +city; } }
被請求頁面代碼:
<asp:DropDownList ID="DropDownList1" runat="server" Width="154px"> 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; } }