在使用Ajax或JavaScript选择下拉列表选项后，在同一页面上执行PHP脚本

I am creating a MySQL query that will be execute when user select options from more a dropdown lists.

我正在创建一个MySQL查询，当用户从更多的下拉列表中选择选项时，该查询将被执行。

What I want is, on selecting a dropdown list option a query related to that option should be automatically executed using ajax/javascript on the same page. As I have the both html and php code on the same page.

我想要的是，在选择下拉列表选项时，应该使用ajax/javascript在同一页面上自动执行与该选项相关的查询。因为我在同一个页面上有html和php代码。

Earlier I was using form submit options for dropdown list but as the number of dropdown option are more than five for filtering the result so queries became complicated to implement. That's why I want to refine result of each dropdown individually.

之前我在下拉列表中使用表单提交选项，但是由于下拉选项的数量超过了5个，所以查询的实现变得非常复杂。这就是为什么我要细化每个下拉菜单的结果。

Any help is appreciated. Thanks in advance!

任何帮助都是感激。提前谢谢!

My HTML code for dropdown list is:

我的下拉列表的HTML代码是:

<p>
<label for="experience">Experience :</label>
<select id="experience" name="experience">
    <option value="" selected="selected">All</option>
    <option value="Fresher">Fresher</option>
    <option value="Experienced">Experienced</option>
</select>
</p>

PHP code for executing related queries is:

执行相关查询的PHP代码是:

<?php
if (isset($_GET['exp'])) {

    switch ($_GET['exp']) {

        case 'Experienced':
        $query = "SELECT job_seekers.ID, job_seekers.Name, job_seekers.Skills, job_seekers.Experience FROM job_seekers where job_seekers.Experience!='Fresher'";
        break;

    case 'Fresher':
        $query = "SELECT job_seekers.ID, job_seekers.Name, job_seekers.Skills, job_seekers.Experience FROM job_seekers where job_seekers.Experience='Fresher'";
        break;

    default:
        $query = "SELECT job_seekers.ID, job_seekers.Name, job_seekers.Skills, job_seekers.Experience FROM job_seekers";

    }
}
$result = mysql_query($query) or die(mysql_error());

echo "<ul class=\"candidates\">";

while($row = mysql_fetch_row($result))
{
    echo "<li>";
    echo "<p> <b>ID:</b> <u>$row[0]</u> </p>";
    echo "<p> <b>Name :</b> $row[1] </p>";
    echo "<p> <b>Key Skills:</b> $row[2] </p>";
        echo "<p> <b>Experience:</b> $row[3] </p>";
    echo "</li>";
}

    echo "</ul>";               

?>

3 个解决方案

#1

When you want to AJAX call a php script, you should you $.ajax provided by Jquery

当您想要AJAX调用一个php脚本时，您应该$。Jquery ajax提供的

http://api.jquery.com

so you can use it like so:

所以你可以这样使用:

$.ajax({
    url: 'ajax.php',
    data: {
        //put parameters here such as which dropdown you are using
    },
    success: function(response) {
        //javascript and jquery code to edit your lists goes in here.
        //use response to refer to what was echoed in your php script
    }
});

this way, you will have dynamic dropdowns and the refined results you want

这样，您将得到动态下拉和您想要的精化结果

#2

<?php
if (isset($_GET['experience'])) {

    echo $_GET['experience'];
        /* do mysql operations and echo the result here */
    exit;
}
?>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
function myFunction(value)
{
    if(value!="All")
    {
        $.ajax(
        {
            type: "GET",
            url: '<?php echo $_SERVER['PHP_SELF']; ?>',
            data: { experience: value},
            success: function(data) {
                $('#resultDiv').html(data);
        }
    });
    }
    else
    {
        $('#resultDiv').html("Please select a value.");
    }
}
</script>
</head>

<body>
<p>
<label for="experience">Experience :</label>
<select id="experience" name="experience" onChange="myFunction(this.value)">
    <option value="All" selected="selected">All</option>
    <option value="Fresher">Fresher</option>
    <option value="Experienced">Experienced</option>
</select>
</p>
<div id="resultDiv">
Please select a value.
</div>
</body>
</html>

#3

You cannot re-execute a PHP part on the same page. Rather use Ajax request to perform the action.

不能在同一页面上重新执行PHP部分。而是使用Ajax请求执行操作。

#1