Ajax实现无刷新级联菜单（使用mootools）

最新推荐文章于 2024-03-20 17:38:44 发布

最新推荐文章于 2024-03-20 17:38:44 发布 · 130 阅读

文章标签：

#Ajax #Mootools #XML #JavaScript #ViewUI

Ajax 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用 MooTools 框架实现的 AJAX 功能案例。通过具体代码展示了如何发送 POST 请求并更新页面内容的过程。文章重点讲解了设置请求头以方便服务器区分请求类型的方法。

使用了mootools Ajax的方法，不过其他的还是没有改成它封装好的方法，第一次用 mootools将就一下吧 >.<!!

<script type="text/javascript" src="../jscript/mootools-release-1.11.js"></script>
<script type="text/javascript">
//Ajax-------------------------------------
	var myAjax;
	function sendRequest(url){
		myAjax = new Ajax(url,{method: 'post',onComplete:updateList});
		//设置Header，便于后台区分请求的类型
		//当捕捉到Ajax请求后需要设置response.setContentType("text/xml")
		//否者会出现抓取后台请求的XML文件为空的现象
		myAjax.setHeader('RequestType','ajax');
		myAjax.request();
	}
	
	function refreshList() {
        var section = document.getElementById("触发的下拉菜单ID").value;         
        if(section == "" ) {
          clearList();
          return;
        }
        var url = "调用的后台链接" + section;           
           sendRequest(url);
     }

     function updateList(txt,xml) {
        clearList();
        //alert(xml.xml);
        var product = document.getElementById("要动态出现结果的菜单ID"); 
        var results = xml.getElementsByTagName("xml取的TagName");
        var option = null;
        for(var i = 0; i < results.length; i++) {
          option = document.createElement("option");
          option.value=personId[i].firstChild.nodeValue;
          option.appendChild(document.createTextNode(results[i].firstChild.nodeValue));
          product.appendChild(option);
        }
     }

     function clearList() {
        var product = document.getElementById("要动态出现结果的菜单ID");
        while(product.childNodes.length > 0) {
          product.removeChild(product.childNodes[0]);
        }
     }
</script>