运用Ajax通过select下拉框能得到数据,请高手指点

大伙应该在开发中遇到过这种情况，就是通过下拉框选择要显示的内容。
在没用到ajax技术时，我们可以使用 选择后再次获得下拉框的数据，和显示的数据一起反映在页面上，这是最笨的方法，因为你选择多少次，下拉框的数据就要从数据库重复读取多少次。我现在想用AJAX做一个  http://bj.homev.cn/house/Search.aspx?HouseType=3 这样的 select 的效果,本人对ajax不太懂,所以请各位"高手"帮助~ 给小弟一个这样的例子 让小弟 研究一下,小弟不胜感激@  QQ115590262

解决方案 »

  1.   

    给你一个例子，我测试过的，最简单的，原理是一样的，
    http://127.0.0.1/index.html是你要打开的页，当选择一个下拉框时，触发JS函数report()，JS会提交表单信息给
    http://127.0.0.1/test.php页，然后在当前页会把test.php页显示在div层reportDiv里面,我描述可能不行,你学会这个简单的例子就会做复杂的了.
    http://127.0.0.1/index.html:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Report</title>
    <!--<link href="../css/style.css" rel="stylesheet" title="win2k-cold-1" type="text/css" media="all">-->
    <style type="text/css">
    <!--
    body {
    margin-left: 0px;
    margin-top: 0px;
    }
    -->
    </style>
    <script type="text/javascript">
    <!--
    var $ = function (id) {
        return "string" == typeof id ? document.getElementById(id) : id;
    };
    -->
    </script>
    <script language="JavaScript" type="text/JavaScript">
    <!--
    // JavaScript Documentvar mainurl = 'http://127.0.0.1/test.php';// JavaScript Document
    var isIE;
    var reg;
    var divObj;
    var postStr = "";// ajax object inital
    if (navigator.appName == 'Microsoft Internet Explorer') 
    isIE = true;
    else
    isIE = false;
    function newXMLHttpRequest() 
    {
    var xmlreq = false;
    if (window.XMLHttpRequest) 
    {
         xmlreq = new XMLHttpRequest();// Create XMLHttpRequest object in non-Microsoft browsers
       } 
       else if (window.ActiveXObject) 
       {
         // Create XMLHttpRequest via MS ActiveX
         try {
           // Try to create XMLHttpRequest in later versions of Internet Explorer
         xmlreq = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e1) {
           // Failed to create required ActiveXObject
           try {
             // Try version supported by older versions of Internet Explorer
             xmlreq = new ActiveXObject("Microsoft.XMLHTTP");
           } catch (e2) {
             // Unable to create an XMLHttpRequest with ActiveX
           }
        }
       }
       return xmlreq;
    }
    function requestServer()
    { 
      req = newXMLHttpRequest();
    if(req)
    {
      getSubmitStr();
         var url = window.mainurl;//"http://127.0.0.1/test.php";
      req.onreadystatechange = processRequest;
      req.open("POST", url, true);
          req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
          req.send(postStr);  
    }
    else
    {
    alert('Cannot create XMLHTTP instance');
    } 
    }
    function processRequest()
    {
    if(req.readyState==4)
    {
    if(req.status==200)
    {
    parseMessages();
    }
    else
    {

    //alert(req.status);
    }
    }
    }
    function parseMessages()
    {
    divObj.innerHTML = req.responseText;
    }
    function report()
    {
    divObj = document.getElementById("reportDiv");
    divObj.innerHTML = "<table width=\"100%\" height=\"500\" ><tr><td valign=\"middle\" align=\"center\">loading...</td></tr></table>"; 
    requestServer();
    }
    function getSubmitStr()
    {
    postStr = "";
    var inputs = document.getElementsByTagName("INPUT");
    if(inputs.length > 0)
    {
    for(i=0; i<inputs.length; i++)
    {
    switch(inputs[i].type.toUpperCase())
    {
    case 'HIDDEN':
    case 'TEXT':
    postStr += "&" + inputs[i].name + "=" + encodeURI(inputs[i].value);
    break;
    case 'RADIO':
    case 'CHECKBOX':
    if(inputs[i].checked)
    {
    postStr += "&" + inputs[i].name + "=" + encodeURI(inputs[i].value);
    }
    break;
    }
    }
    }

    var sls = document.getElementsByTagName("SELECT");
    if(sls.length > 0)
    {
    for(i=0; i<sls.length; i++)
    {
    postStr += "&" + sls[i].name + "=" + encodeURI(sls[i].value);
    }
    }
    }/* 
    function show(obj)
    {
    if(obj.value!='' && obj.value!='0') 
    {
    report();
    }
    else
    {
    $('reportDiv').innerHTML='';
    }
    }
    */ 
    -->
    </script>
    <body>
    <form action="" method="post" name="form1" target="_self">
    <table width="95%" cellpadding="4" cellspacing="5" align="center">
    <tr>
    <td height="50" align="center" class="selectTitle"><strong>Report</strong></td>
    </tr>
    <tr>
    <td width="600" align="left" class="selectTitle">
    <select id="number" name="number" class="select" onChange="javascript:report();">
    <option value="0" selected> -- Select -- </option>
    <option value="1"> One </option>
    <option value="2"> Two </option>
    <option value="3"> Three </option>
    </select>  
    </td>
    </tr>
    </table>
    </form>
    <form action="" method="post" name="form2" target="_self">
    <table width="95%" cellpadding="4" cellspacing="5" boder=1 align="center">
    <tr><td>
    <div id="reportDiv" align="left"></div>
    </td></tr>
    </table>
    </form>
    </body>
    </html>
    http://127.0.0.1/test.php:
    <?
    print_r($_REQUEST);
    ?>
      

  2.   

    http://bj.homev.cn/house/Search.aspx?HouseType=3 是三个下拉菜单 可以同时传值 也可以 单传哪位朋友有类似的例子
      

  3.   


    这个靠你自己写啊，弄懂Ajax原理，然后写个页面，处理的时候也就是JS代码难写一些。没可能别人帮你写完，呵呵！至于那个网站，你自己把那个JS代码复制下来，看看。