我们需要两个页面a.aspx、b.aspx,a页面代码如下(就用最常见的,两个下拉列表连动的例子):
|
当a页面触发onchange事件后,我们进入写在a页面的SetBList()方法中,这里将完整的js列出来:
<script language="javascript">
var xmlHttp;
function SetBList() {
var avalue = document.getElementById("AList").value;
var url = "b.aspx?Avalue=" + avalue;
createXMLHttpRequest(); // 创建xmlHttp对象
xmlHttp.onreadystatechange = handleStateChange; // 当xmlHttp状态码发生改变时,调用handleStateChage方法
xmlHttp.open("GET", url, true); // GET方法发送请求
xmlHttp.send(null);
}
function BListInitial() {
// 先清空一下BList的option
clearBList();
var blist = document.getElementById("BList"); // 获取BList对象
var rs = xmlHttp.responseXML.getElementsByTagName("City"); // 从返回xml文档中,读取<City>标签的数据
// 这个循环取值的地方,卡了我一会,将xmlHttp.responseXML创建成一个xml文档,然后找读文档的方法,但问题是不同浏览器创建xml文档的方法不一样
for(var i=0;i<rs.length;i++) {
var option = document.createElement("OPTION");
option.text = rs[i].getElementsByTagName("CityName");
option.value = rs[i].getElementsByTagName("CityCode");
blist.options.add(option);
}
}
function clearBList() {
var ven = document.getElementById("VendorList");
while(ven.options.length > 0)
ven.removeChild(ven.childNodes[0]);
}
function handleStateChange() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
BListInitial();
}
}
}
function createXMLHttpRequest() {
// IE
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// Mozilla
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
</script>
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
b.aspx页面将html部分全部删除,仅仅留一行:
|
原因是我们a页面要求返回的xml文档,因此,我们将Html标签部分删除。然后在b页面的Page_Load方法中,对数据库进行操作,然后数据写成xml的格式,例如:
|
在整体运行之前可以先将b页面测试一下,如果得到类似如下结果,则说明,数据部分是没问题的。
|
【编辑推荐】