使用ajax發送參數不起作用

Question

我正在嘗試使用ajax將一些變量發送到php頁面，然后在div中顯示它們，但是它不起作用。

HTML代碼：

<div id="center">
    <form>                                  
        <input type="text" id="toSearch" class="inputText" title="Search for ...">              
        <select name="thelist1" id="ecoElem" class="comboBox">
            <option>-- Ecosystem Element --</option>
        </select> 
        <select name="thelist2" id="ecoActor" class="comboBox">                         
            <option>-- Ecosystem Actor --</option>
        </select>   
        <input type="button" value="Search" id="searchButton" onclick="loadData();">
    </form>        
</div>
 <div id="resBox">
    </div>

loadData函數：

function loadData(){
            if(window.XMLHttpRequest){
                xmlhttp = new XMLHttpRequest();
            }
            else{
                xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
            }

            searchT = document.getElementById('toSearch').value;
            ecoElem = document.getElementById('ecoElem').value;
            ecoActor = document.getElementById('ecoActor').value;

            xmlhttp.onreadystatechange = function(){
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
                    document.getElementById('resBox').innerHTML = xmlhttp.responseText;
                }
            }

            xmlhttp.open("POST","databaseRead.php",true);
            xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xmlhttp.send("text=" + searchT + "&elem=" + ecoElem + "&actor=" + ecoActor);}

最后是php頁面：

<?php   
$searchT = $_POST['text'];
$ecoElem = $_POST['elem'];
$ecoActor = $_POST['actor'];
echo $searchT;
?>

就是這樣，我已經為此工作了幾個小時，但仍然無法弄清楚。

Answer 1

嘗試更改按鈕，以便onclick返回false（如果正在提交表單）...

<input type="button" value="Search" id="searchButton" onclick="loadData();return false;">

另外，您可能希望對文本框中的值進行URL編碼，否則輸入=或＆的人會把它弄亂了……

xmlhttp.send("text=" + encodeURIComponent(searchT) + "&elem=" + + encodeURIComponent(ecoElem) + "&actor=" + + encodeURIComponent(ecoActor));}

Answer 2

您也可以使用JQuery。

function loadData(){   
     var searchT = $('#toSearch').val(); 
     var toSearch = $('#ecoActor ').val();    
     var ecoActor = $('#ecoActor').val();
     $.post("databaseRead.php"),{ text:searchT, elem:toSearch, actor:ecoActor },
          function(data){
          $('#resBox').html(data);
     });
}