如何使用JQuery從下拉列表中顯示帶有Ajax的.php文件？

Question

基本上，我已經在一個名爲admin.php的頁面上使用來自數據庫的php填充下拉列表。

我現在在Ajax中使用JQuery，以便在從下拉菜單中單擊姓時。

它會調用employerProfile.php並在<div id="showEmployerProfile">中顯示它，但我的代碼似乎不工作。

有沒有錯誤，只是功能不想工作。

這裏的JS：

//SHOW EMPLOYER PROFILE FOR ADMIN 
$(".eNameData").click(function() { 
var eNameData = $(this).val(); 
    var dataToSend = 'eName=' + eNameData; 

    $.ajax({     
     url: "includes/employerProfile.php", 
     type: "POST", 
     data: dataToSend,  
     cache: false, 
     success: function(html) 
     { 
     $("#showEmployerProfile").show(); 
      } 
    }); 
    } 
); 

下面是admin.php的代碼：

<script type="text/javascript" src="/js/jq.js"> 
</script> 

    <div id="pMainDashBoard"> 

    <?php /*?>DROP DOWN MENU TO SELECT EMPLOYER<?php */?> 

    <form id="employer" method="get"> 
    <select name = "selectEmployer" id = "selectEmployer"> 
      <?php 

      include "database_conn.php"; 
      $sql = "SELECT surname FROM employer"; 
      mysql_query($sql) or die (mysql_error()); 
      $queryresult = mysql_query($sql) or die(mysql_error()); 

     while ($row = mysql_fetch_assoc($queryresult)) { 
      $eName = $row['surname']; 
      echo"<option value = \"$eName\">$eName</option>\n"; 
         } 
      mysql_free_result($queryresult); 
      mysql_close($conn); 
     ?> 
     </select> 
     </form> 
    </p> 

<div id ="showEmployerProfile"> 

</div> 

employerProfile.ph p：

employerProfile有$ userID = $ _GET ['userID'];然後是database_conn.php。 SQL查詢被表述爲：

$query = SELECT * FROM employer WHERE userID = '$userID'; 

，但有「」對SQL那麼下面的這段聲明每格的echo'ed並且有「」周圍每個標籤。

 echo <div id=\"empName\">; 
     echo <h2>; 
     echo $row["forename"] .' '; 
     echo $row["surname"]; 
     echo - ; 
     echo $row["position"]; 
     echo </h2>; 
     echo </div>; 




     echo <div id=\"employerHead\">; 

     echo <div id=\"empCompName\">; 
     echo <h2>Company Name</h2>; 
     echo $row["companyName"]; 
     echo </div>; 

        ..blah blah 

     echo "</div>"; 

} 


?> 

任何幫助非常感謝，謝謝。 T.J

Answer 1

這取決於什麼employerProfile.php樣子完全相同，但假設它返回的HTML（你是呼應例如HTML），您需要使用HTML來填充showEmployerProfile股利。

所以，你需要改變：

success: function(html) 
    { 
     $("#showEmployerProfile").show(); 
    } 

喜歡的東西：

success: function(php_output) // using a different name for clarity 
    { 
     $("#showEmployerProfile").html(php_output).show(); 
    } 

而且你需要在第一部分更改爲類似：

$("#selectEmployer").change(function() { 
    var eNameData = $(this).val(); 

這樣您正在對下拉選擇中的更改作出反應。

編輯：根據您的評論，您需要提供userID到您的ajax功能和employerProfile.php。您需要更改select是如何構建的admin.php：

$sql = "SELECT userID, surname FROM employer";  // changed 
mysql_query($sql) or die (mysql_error()); 
$queryresult = mysql_query($sql) or die(mysql_error()); 

while ($row = mysql_fetch_assoc($queryresult)) { 
    $eName = htmlspecialchars($row['surname']); // changed 
    $userID = intval($row['userID']);    // added, assuming userID is an integer 
    echo"<option value = \"$userID \">$eName</option>\n"; // changed 
} 

現在你select選項將有對應於用戶ID的值。

Answer 2

假設您正在從employerProfile.php文件回顯HTML輸出。

您沒有將輸出HTML傳遞給showEmployerProfile div。你只是在沒有任何東西的情況下展示div。您的Ajax調用應該更改爲：

$(".eNameData").change(function() { 
    var eNameData = $(this).val(); 
    var dataToSend = 'eName=' + eNameData; 
    $.ajax({     
     url: "includes/employerProfile.php", 
     type: "POST", 
     data: dataToSend,  
     cache: false, 
     success: function(response) 
        { 
         $("#showEmployerProfile").html(response); 
         $("#showEmployerProfile").show(); 
        } 
     }); 
}); 

Answer 3

您不使用click事件，您需要使用change事件。

var the_thing = function(e){ 
    $.ajax({ 
     url: "some.url", 
     data: {"surname":$(this).val()}, 
     success: function(d){ 
      $("div_to_show").show(); 
     } 
    }); 
} 
var dd = $("#my_drop_down").change(the_thing); 

Answer 4

你可以嘗試一些這方面是這樣的：

在你employerProfile.php，開始創建一個響應緩衝區，並添加內容

<?php 
    try{ 
     $strUrl = 'your new php file to build html content'; 
     ob_start(); 
     include $strUrl; 
     $string = ob_get_clean(); 
     $json = array("content" => $string,"isSuccess" => true); 
     echo json_encode($json); 
    }catch(Exception $e){ 
     echo array("isSuccess" => false); 
    } 
?> 

在新的PHP文件爲建設內容，您可以在JavaScript

<?php 
    foreach($rows as $row){ 
    echo '<div>'.$row["forename"].'</div>'; 
    .... 
    .... 
    } 
    ?> 

最後：添加此

success: function(response) 
     { 
      $("#showEmployerProfile").html(response.content); 
      $("#showEmployerProfile").show(); 
     } 

希望這有助於..

注意：你必須使用change事件eyurdakul發佈