2014-02-24 46 views
3

我是Ajax的新手,我試過教程書,但沒有奏效。代碼用於搜索。Ajax搜索不工作,而XML已經運行?

這是腳本search.htm

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>AJAX + MySQL I</title> 
<script type="text/javascript" src="search.js"></script> 
</head> 

<body onload='process()'> 

<h1>Student Search</h1> 

<form name="form1"> 
Masukkan Nama Mahasiswa: <input type="text" id="namaMhs" /> 
</form> 

<p><strong>Hasil Pencarian :</strong></p> 

<div id="hasil" /> 

</body> 
</html> 

和JS腳本search.js

var xmlHttp = createXmlHttpRequestObject(); 

function createXmlHttpRequestObject() 
{ 
    var xmlHttp; 
    if(window.ActiveXObject) 
    { 
     try 
     { 
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
     catch (e) 
     { 
      xmlHttp = false; 
     } 
    } 
else 
{ 
    try 
    { 
     xmlHttp = new XMLHttpRequest(); 
    } 
    catch (e) 
    { 
     xmlHttp = false; 
    } 
} 

if (!xmlHttp) alert("Obyek XMLHttpRequest tidak dapat dibuat"); 
else 
return xmlHttp; 
} 

function process() 
{ 
    if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0) 
    { 
     nama = 
      encodeURIComponent(document.getElementById("namaMhs").value); 
     xmlHttp.open("GET", "search.php?namaMhs=" + nama, true); 
     xmlHttp.onreadystatechange = handleServerResponse; 
     xmlHttp.send(null); 
    } 
    else 
    setTimeout('process()', 1000); 
} 

function handleServerResponse() 
{ 
    if (xmlHttp.readyState == 4) 
    { 
     if (xmlHttp.status == 200) 
     { 
      var xmlResponse = xmlHttp.responseXML; 
       xmlRoot = xmlResponse.documentElement; 

       nimArray = xmlRoot.getElementsByTagName("nim"); 
       namaMhsArray = xmlRoot.getElementsByTagName("namamhs"); 
      alamatArray = xmlRoot.getElementsByTagName("alamat"); 

      if (nimArray.length == 0) 
      { 
      html = "Data tidak ditemukan"; 
      } 
      else 
      { 

    // membentuk tabel untuk menampilkan hasil pencarian 

      html = "<table border='1'><tr><th>NIM</th><th>Nama 
         Mhs</th><th>Alamat</th></tr>"; 

      for (var i=0; i<nimArray.length; i++) 
      { 
       html += "<tr><td>" + nimArray.item(i).firstChild.data + 
          "</td><td>" + 
          namaMhsArray.item(i).firstChild.data + 
          "</td><td>" + 
         alamatArray.item(i).firstChild.data + 
          "</td></tr>"; 
      } 
      html = html + "</table>"; 
      } 

      document.getElementById("hasil").innerHTML = html; 
       setTimeout('process()', 1000); 
     } 
     else 
     { 
      alert("Ada masalah dalam mengakses server: " + 
      xmlHttp.statusText); 
     } 
    } 
} 

,並在PHP search.php中的最後一個腳本

<?php 
header('Content-Type: text/xml'); 
echo '<hasil>'; 
$namaMhs = $_GET['namaMhs']; 
mysql_connect("localhost","root","*******"); 
mysql_select_db("mahasiswa"); 
$query = "SELECT * FROM mhs WHERE namamhs LIKE '%$namaMhs%'"; 
$hasil = mysql_query($query); 
while ($data = mysql_fetch_array($hasil)) 
{ 
    echo "<mhs>"; 
    echo "<nim>".$data['NIM']."</nim>"; 
    echo "<namamhs>".$data['NAMAMHS']."</namamhs>"; 
    echo "<alamat>".$data['ALAMAT']."</alamat>"; 
    echo "</mhs>"; 
} 
echo '</hasil>'; 
?> 

請幫我解決這個腳本。 search.php上的XML已經在運行,但我的搜索沒有。任何幫助表示讚賞。

+1

Ankur,這是一個TON代碼,用於在現代JS庫中執行一行代碼。我的建議是使用jQuery:http://jqapi.com/#p=jQuery.post – ladieu

回答

1

您在提交負載腳本,以前有在文本字段甚至值:

<body onload='process()'> 

<h1>Student Search</h1> 

<form name="form1"> 
Masukkan Nama Mahasiswa: <input type="text" id="namaMhs" /> 
</form> 

你應該一個值的文本字段中添加這樣:​​

<input type="text" value="testname" id="namaMhs" /> 

或者作爲一個更好的選擇,添加一個提交按鈕,不要在加載時運行該功能,而是在提交時運行該功能:

<body> 
     <h1>Student Search</h1> 

     <form name="form1"> 
     Masukkan Nama Mahasiswa: <input type="text" id="namaMhs" /> 
    <input type="button" value="Search" onclick="process();" /> 
     </form> 

您的代碼中可能存在更多甚至更多的問題,我沒有仔細查看所有內容,但是這應該讓您獲得良好的開端。