使用一個文本字段來搜索數據庫，然後pupulate剩餘的字段在PHP

Question

我在這裏是新的，所以我希望這是有道理的，我是PHP和Ajax的新手......所以我很迷茫。

我有一個MySQL數據庫設置，以及在PHP中創建的幾種形式。我在其中一個表單上有幾個文本字段，應該顯示客戶信息。第一個文本（電話號碼）字段應該是一個搜索字段...所以我需要查詢我的數據庫，一旦用戶輸入手機＃，查找記錄並填充剩餘的字段。

我已經嘗試過這樣做的各種方法......但沒有什麼比較正確的！似乎顯示最有前途的方法是通過使用Onblur事件來調用將執行搜索的php頁面（使用Ajax）。

這工程，因爲我可以查詢數據庫來查找結果..並讓他們顯示回來。麻煩的是，這個帶有裏面數據的頁面實際上顯示在我的第一頁中間......所以基本上我有一個網頁顯示在另一個網頁內......這顯然不是我想要的。

的基本代碼我已經是：

HTML側 -

<script> 
    function showUser(str) { 
     if (str == "") { 
      document.getElementById("divider").innerHTML = ""; 
      return; 
     } 
     if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari 
      xmlhttp = new XMLHttpRequest(); 
     } 
     else {// code for IE6, IE5 
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
     xmlhttp.onreadystatechange = function() { 
      if (xmlhttp.readyState == 4) { 
       document.getElementById("divider").innerHTML = xmlhttp.responseText; 
      } 
     } 
     xmlhttp.open("GET", "GetCustomer.php?q="+str, true); 
     xmlhttp.send(); 
    } 
</script> 
</head> 
    <label for="CustPhone">Phone:</label> 
    <input type="text" name="CustPhone" id="CustPhone" tabindex="1" onchange="showUser(this.value)" value="<?php ?>">     
    <br> 
    <div id="divider"></div> 

<label for="CustLastName">Last Name:</label> 
    <input type="text" name="CustLastName" id="CustLastName" tabindex="2" value="<?php echo $clast; ?>"> 
    &nbsp;&nbsp;&nbsp;&nbsp; 
    <label for="CustFirstName">First Name:</label> 
    <input type="text" name="CustFirstName" id="CustFirstName" tabindex="3" value="<?php echo $cfirst; ?>"> 

    <p>&nbsp;</p> 

    <label for="CustAddress1">Address 1:</label> 
    <input type="text" name="CustAddress1" id="CustAddress1" tabindex="4" value="<?php echo $caddr1; ?>"> 

    &nbsp;&nbsp;&nbsp;&nbsp; 
    <label for="CustAddress2">Address2:</label> 
    <input type="text" name="CustAddress2" id="CustAddress2" tabindex="5" value="<?php echo $caddr2; ?>"> 

    <p>&nbsp;</p> 

和PHP -

include ("AddEdit.php"); 
require_once("customer_info.php"); 

function LoadData() 
{ 
$pn = $_POST['CustPhone']; 

if (strlen($Pn) < 10) 
{ 
    $query = "SELECT * FROM customer WHERE Phone='$Pn'"; 
    $result = mysql_query($query); 

    if (!$result) die ("Database access failed: " . mysql_error()); 
    $rows = mysql_num_rows($result); 
    $rowinfo = mysql_fetch_array($result); 

    if ($rows > 0) 
    { 
     $clast = $rowinfo['LastName']; 
     $cfirst = $rowinfo['FirstName']; 
     $caddr1 = $rowinfo['Address1']; 
     $caddr2 = $rowinfo['Address2']; 
     $ccity = $rowinfo['City']; 
     $cprov = $rowinfo['Province']; 
     $cpostal = $rowinfo['Postal']; 
    } 
} 

}

任何想法，我怎麼能做到這一點，而不是多跳......或者更重要的是在現有頁面上顯示數據，而不是顯示數據我的整個頁面內頁面的小版本??

Thx !!!

Answer 1

我會推薦使用jquery的Ajax，對於Ajax來說更簡單容易。
有關更多詳細信息，請參閱Jquery Ajax。

$.ajax({ 
      type: "POST", 
      url:"GetCustomer.php", 
      data: "q="+str, 
      success : function(data) { 
       //do someting with your data 
       } 
      } 

     }); 

有了這個，你可以在「進行中」處理錯誤狀態，以及顯示條，而Ajax調用正在進行中： 所以，你可以按照以下步驟改變你的Ajax調用。

成功您需要將數據映射到表單中的字段而不是在div內顯示它們。這是你的方法中唯一缺少的東西。所以，而不是跟隨線 -

document.getElementById("divider").innerHTML = xmlhttp.responseText; 

添加JS代碼映射數據與字段。

您可以使用JSON數據類型並輕鬆地將數據與表單映射。

Answer 2

首先，我建議使用jQuery ajax而不是舊的ajax。

我覺得你的結果是不正確的地方，因爲你在這行代碼

document.getElementById("divider").innerHTML = xmlhttp.responseText; 

使用「的innerHTML」因此您的結果將在那裏。