程式師世界 >> 編程語言 >> 更多編程語言 >> 編程解疑 >> ajax-Ajax無刷新提交表單並搜索數據庫

ajax-Ajax無刷新提交表單並搜索數據庫

編輯：編程解疑

Ajax無刷新提交表單並搜索數據庫

![圖片說明](http://img.ask.csdn.net/upload/201603/22/1458634248_267260.png)圖片說明
大家看圖也能明白我的意思。頁面中包含兩個框架，下面的框架就是主要的問題所在。兩個下拉列表聯動已經會做了，現在想要點擊“確定”後提交表單並在下面顯示出數據庫查詢結果，但同時下拉列表不能刷新，保持選擇的項目狀態。目前點擊按鈕後會出現第二圖的情況，惡心死我了。
我參考Shelley Powershot的《JavaScript學習指南》，可是卻沒能達到我想要的效果。提交表單是大概只能用post方法了吧……求大神相助，可以提供思路，提供參考文獻或者指正我的代碼
sd_help.php如下：

 <!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=utf-8" />
<link href="style.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>
<body class="font">
    <div align="center"><font size="4px">選擇您需要的幫助</font></div><br>
    <form name="search" action="search_db.php" method="post">
    <div align="center">
        <select name="domain" id="domain" onChange="redirec(document.search.domain.options.selectedIndex)">
            <option selected value="0">請選擇</option>
            <option value="1">體育</option>
            <option value="2">藝術</option>
            <option value="3">文史</option>
        </select>&nbsp;&nbsp;&nbsp;&nbsp;
        <select name="items" id="items">
            <option value="0" selected>請選擇</option>
        </select>&nbsp;&nbsp;
        <input type="submit" value="確定" id="submitButton"/>
        </form>
    </div>
<script language="javascript">
    //獲取一級菜單長度
    var groups = document.search.domain.options.length;
    var group = new Array(groups);
    //把一級菜單都設為數組
    for (i=0; i<groups; i++)
    { group[i] = new Array();}
    //定義基本選項
    group[0][0] = new Option("請選擇", "0");

    group[1][0] = new Option("足球", "1");
    group[1][1] = new Option("籃球", "2");
    group[1][2] = new Option("乒乓球", "3");

    group[2][0] = new Option("歌唱", "4");
    group[2][1] = new Option("舞蹈", "5");
    group[2][2] = new Option("樂器", "6");

    group[3][0] = new Option("小說", "7");
    group[3][1] = new Option("散文", "8");
    group[3][2] = new Option("詩詞", "9");
    //聯動函數
    function redirec(x)
    {
    var temp = document.search.items;
    for (i=0;i<group[x].length;i++)
    { temp.options[i]=new Option(group[x][i].text,group[x][i].value);}
    temp.options[0].selected=true;
    }

//<![CDATA[
//全局變量
var xmlHttpObj;
function catchEvent(eventObj,event,eventHandler){
    if(eventObj.addEventListener){
        eventObj.addEventListener(event,eventHandler,false);
    }else if(eventObj.attachEvent){
        event="on"+event;
        eventObj.attachEvent(event,eventHandler);
    }
}

catchEvent(window,"load",function(){
    //document.getElementById("helps").style.display="block";
    document.getElementById("items").onchange=populateList;
    //document.getElementById("submitButton").style.display="none";
});
//創建XHR對象
function getXmlHttp(){
    var xmlhttp=null;
    if(window.XMLHttpRequest){
        xmlhttp=new XMLHttpRequest();
        if(xmlhttp.overrideMimeType){
            xmlhttp.overrideMimeType('text/html');
        }

    }else if(window.ActiveObject){
        xmlhttp=new ActiveObject("Microsoft.XMLHTTP");
    }
    return xmlhttp;
}
//准備並發送XHR請求
function populateList(){
    var items=document.getElementById("items").value;
    var url='search_db.php';
    var qry="items="+items;
    //如果xmlHttpObj為空
    if(!xmlHttpObj)
        xmlHttpObj=getXmlHttp();
    if(!xmlHttpObj) return;

    xmlhttp.open('POST',url,true);
    xmlhttp.onreadystatechange=getItems;
    xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xmlhttp.send(qry);
}
//處理返回的數據
function getItems(){
    if(xmlHttpObj.readyState==4&&xmlHttpObj.status==200){
        document.getElementById('helps').innerHTML=xmlHttpObj.responseText;
    }else if(xmlHttpObj.readyState==4&&xmlHttpObj.status!=200){
        document.getElementById('helps').innerHTML='請求出錯誤！';
    }
}
//]]>
</script>
    <div align="center">
        <table><tr><td id="helps"></td></tr></table>
    </div>
</body>

search_db.php如下（暫為演示，所以沒有執行數據庫查詢）：

 <?php
    if(empty($_QUEST['items'])){
        echo "未傳入items值！悲劇！";
    } else echo ($_QUEST['items']);
?>

最佳回答：

現在這個問題搞清楚了，之前的方法看來好像搞復雜了。

 //異步請求 
    document.getElementById("items").onchange = function() { 
    var request = new XMLHttpRequest();
    request.open("POST", "search_db.php");
    var data = "items=" + document.getElementById("items").value;
    request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    request.send(data);
    request.onreadystatechange = function() {
        if (request.readyState===4) {
            if (request.status===200) { 
                document.getElementById("helps").innerHTML = request.responseText;
            } else {
                document.getElementById("helps").innerHTML ='請求出錯誤！';
            }
        } 
    }
    }

另外，修改後的頁面去掉了submitButton提交表單按鈕，因為一旦提交表單，就會刷新頁面，跳轉到其他頁面，所以去掉了；再通過Ajax異步獲取items（第二個下拉列表）值的變化並發送請求、發送參數，PHP腳本處理後返回本頁面。