如何使用Ajax从下拉列表中使用JQuery显示.php文件？

Question

基本上，我已经在名为admin.php的页面上使用php从数据库中填充了一个下拉列表。

我现在将JQuery与Ajax结合使用，以便从下拉菜单中单击姓氏。

它将调用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.php：

loyalProfile具有$ userID = $ _GET ['userID']; 然后是database_conn.php。 SQL查询表示为：

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

但在sql周围有“”，则此语句后的每个div都会被回显，并且每个标记周围都有“”。

        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>";

}


?>

非常感谢您的任何帮助，谢谢。 TJ

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();

这样，您可以对下拉选择中的更改做出反应。

编辑：根据您的评论，您需要提供用户ID到您的ajax函数和employerProfile.php 。 您需要更改在admin.php构建select方式：

$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选项将具有一个与userID对应的值。

Answer 2

您可以这样尝试：

在您的ownerProfile.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文件中，您可以添加以下内容：

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

最后在您的JavaScript中：

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

希望这可以帮助..

注意：您必须使用eyurdakul发布的change事件

Answer 3

假设您正在回显ployProfile.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 4

您不为此使用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);