asp+ajax能实现根据下拉列表值动态无刷新显示数据

最新推荐文章于 2021-06-26 05:04:58 发布

转载最新推荐文章于 2021-06-26 05:04:58 发布 · 1.7k 阅读

文章标签：

#ajax #asp #url #javascript #null #function

网站建设专栏收录该内容

740 篇文章

订阅专栏

本文介绍了一种使用ASP结合AJAX技术实现在网页上根据下拉列表选择动态无刷新加载数据的方法。通过监听下拉列表变化并发送AJAX请求获取相应数据，然后更新页面内容。

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>asp+ajax能实现根据下拉列表值动态无刷新显示数据</title>
</head>

<body>
<select id="bb">
<option value="1">a</option>
<option value="2">b</option>
</select>
<div id="cc"></div>
<script language="javascript">
function _get(a){return document.getElementById?document.getElementById(a):null}
var request = false;
try {
  request = new XMLHttpRequest();
} catch (trymicrosoft) {
  try {
    request = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (othermicrosoft) {
    try {
      request = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (failed) {
      request = false;
    }
  }
}
_get("bb").onchange = aaa;

function aaa(b){
b = b || window.event;
var target = b.target || b.srcElement;
var vl= _get(target.id).options[_get(target.id).selectedIndex].value;
creatrequest("serch.asp?name="+vl+"")//这里可以写url和你所选的那个options的value比如"1.asp?id="+vl+""
}

function creatrequest(url){
//alert(url)
request.open("GET", url, false);
request.onreadystatechange = updatePage;
request.send(null);
}

function updatePage() {
if (request.readyState == 4) {
      var xmlDoc = request.responseText;
  _get("cc").innerHTML=xmlDoc
  }
}
</script>

</body>
</html>