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

Basically, I have populated a dropdown list using php from a database on a page called admin.php.

基本上，我在一个名为admin.php的页面上使用php填充了一个下拉列表。

I'm now using JQuery with Ajax so that when a surname is clicked from the dropdown menu.

我现在正在使用Ajax与Ajax，以便从下拉菜单中单击一个姓氏。

It will call employerProfile.php and show it in the <div id="showEmployerProfile"> but my code doesn't seem to be working.

它将调用employerProfile.php并在

中显示它，但我的代码似乎不起作用。

There are no errors, just the function doesn't want to work.

没有错误，只是功能不想工作。

Here's the JS:

这是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();
            }
    });
  }
);  

Here is the code for the admin.php:

这是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:

employerProfile.php：

employerProfile has $userID = $_GET['userID']; then the database_conn.php. SQL query is stated as:

employerProfile有$ userID = $ _GET ['userID'];然后是database_conn.php。 SQL查询声明为：

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

but has " " around the sql then every div following this statement is echo'ed and has " " around each tag.

但是在sql周围有“”，然后这个语句后面的每个div都是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>";

}


?>

Any help is much appreciated, thank you. T.J

非常感谢任何帮助，谢谢。 T.J

4 个解决方案

#1

It depends on what employerProfile.php looks like exactly, but assuming that it returns html (you are echoing html for example), you need to use that html to populate your showEmployerProfile div.

这取决于employerProfile.php究竟是什么样子，但假设它返回html（例如你回显html），你需要使用那个html来填充你的showEmployerProfile div。

So you would need to change:

所以你需要改变：

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

to something like:

类似于：

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

And you need to change the first part to something like:

你需要将第一部分更改为：

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

That way you are reacting on changes in the dropdown selection.

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

Edit: Based on your comment, you need to supply the userID to your ajax function and employerProfile.php. You would need to change how your select is built in admin.php:

编辑：根据您的评论，您需要为您的ajax函数和employerProfile.php提供userID。您需要在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
}

Now your select options will have a value that corresponds to a userID.

现在，您的选择选项将具有与userID相对应的值。

#2

You can try some this like this:

你可以试试这样的：

In your employerProfile.php, start creating a response buffer and add content

在您的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);
    }
?>

In your new php file for building content you can add this:

在用于构建内容的新php文件中，您可以添加以下内容：

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

And finally in your javascript:

最后在你的javascript中：

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

Hope this helps..

希望这可以帮助..

Note: you have to use change event as eyurdakul posted

注意：您必须使用更改事件作​​为eyurdakul发布

#3

Assuming that you are echoing the HTML output from employerProfile.php file.

假设您正在回显employerProfile.php文件的HTML输出。

You are not passing the output HTML to the showEmployerProfile div. you are just showing the div without anything inside this. Your Ajax call should be changed as :

您没有将输出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();
                  }
      });
});

#4

you don't use click event for this, you need to use change event.

你没有使用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);