Question

我一直试图创建一个简单的页面，该页面在您从<option>标记中选择了<select>之后会更新。到目前为止，我已经能够获得一个请求，使我的PHP脚本可以接收所选选项的值，但是响应不会影响显示的内容（即使确实如此）。 Firefox再次显示响应是整个页面，但脚本附加了一些其他文本，因此我知道它可以通过。

即使我收到的页面/内容都已更新，但该页面似乎也从未更新过。

index.php：

<?php
$pageName = "Index";
include "static/header.php";
require "static/db.php";
try {
    $stmt = $db->prepare("SELECT id, year, make FROM public.vehs");
    $stmt->execute();
    $vals = $stmt->fetchAll();
} catch (Exception $e) {
    die($e->getMessage());
}

#
#

$message = "";

if(isset($_POST['dropdownValue'])) {
    $message = "value set";
}
?>
<body>
<script>
    $(document).ready(function(){
        $('#select1').change(function(){
            //Selected value
            let inputValue = $(this).val();
            //Ajax for calling php function
            $.post('index.php', { dropdownValue: inputValue }, function(data){
            });
        });
    });
</script>
<select id="select1">
        <option value="" disabled selected></option>
        <?php
            foreach($vals as $row) {
                echo("<option value='{$row["id"]}'>{$row["year"]} - {$row["make"]}</option>");
            }
        ?>
    </select><br>
<?php if(!empty($message)): ?>
    <p><?= $message ?></p>
<?php endif; ?>
</body>

header.php：

<?php
$pageName;
?>
<head>
    <title>Test Website - <?php echo $pageName ?></title>
    <link rel="stylesheet" type="text/css" href="/static/css/style.css">
    <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="application/javascript" src="/static/js/ajax.js"> # Really just jQuery, idk why i named it that
    <script type="application/javascript" src="/static/js/bootstrap.min.js"></script>
</head>

请求的响应：

<head>
    <title>Test Website - Index</title>
    <link rel="stylesheet" type="text/css" href="/static/css/style.css">
    <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="application/javascript" src="/static/js/ajax.js"
    <script type="application/javascript" src="/static/js/bootstrap.min.js"></script>
</head>
<body>
<script>
    $(document).ready(function(){
        $('#select1').change(function(){
            //Selected value
            let inputValue = $(this).val();
            //Ajax for calling php function
            $.post('index.php', { dropdownValue: inputValue }, function(data){
            });
        });
    });
</script>
<select id="select1">
        <option value="" disabled selected></option>
        <option value='1'>2020 - Test</option>    </select><br>
    <p>value set</p>
</body>

请求后我在浏览器中看到的内容：

<html><head>
    <title>Test Website - Index</title>
    <link rel="stylesheet" type="text/css" href="/static/css/style.css">
    <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="application/javascript" src="/static/js/ajax.js" <script=""></script>
</head>
<body>
<script>
    $(document).ready(function(){
        $('#select1').change(function(){
            //Selected value
            let inputValue = $(this).val();
            //Ajax for calling php function
            $.post('index.php', { dropdownValue: inputValue }, function(data){
            });
        });
    });
</script>
<select id="select1">
        <option value="" disabled="" selected=""></option>
        <option value="1">2020 - Test</option>    </select><br>

</body></html>

Answer 1

要实现您要执行的操作，请创建另一个文件，如selected.php，因为您正在加载整个HTML页面，而只想更改p内的值，那么在加载数据后，您需要更改{ {1}}使用$（'p'）。text（data）

编辑您的// selected.php <?php $message = ""; if(isset($_POST['dropdownValue'])) { $message = "value set"; } echo $message; ?>文件，如下所示

index.php

希望这会有所帮助！

POST响应后页面内容未更新

1 个答案: