AJAX - 在选择输入中更改事件时更改元素的 innerHTML 不起作用

AJAX - Change innerHTML of element on change event in selection input not working

当用户在 <select> 元素中进行选择并在元素中显示通过 AJAX 获得的所述值但它不起作用时,我试图从数据库中获取产品的值,如果我转到 precio.php?q=PRODUCTO%201 它确实给了我想要的结果 10 这让我认为 php 文件中的代码是正确的,问题必须出在 <script> 部分或 <select> 元素。

这是我在 <head>

中的 AJAX 函数
<script>
    function precioProd(str) {
        if (str=="") {
            document.getElementById("precio").innerHTML="";
            return;
        }
        if (window.XMLHttpRequest) {
            var xmlhttp = new XMLHttpRequest();
        }
        xmlhttp.onreadystatechange = function() {
          if (this.readyState == 4 && this.status == 200) {
            document.getElementById("precio").innerHTML = this.responseText;
          }
        };
        xmlhttp.open("GET", "precio.php?q="+str, true);
        xmlhttp.send();
      }
    }
</script>

这是我在 <body>

中的 <select> 元素
<div class="form-group row">
    <label class="col-sm-4 col-form-label font-weight-bold">Elige un Producto</label><br>
    <div class="col-sm-8">
        <select class="custom-select my-1 mr-sm-2" id="producto" name="producto" onchange="precioProd(this.value)" required>
            <option selected>Elegir...</option>
    <?php require $_SERVER['DOCUMENT_ROOT'].'/php/fetch_lista_productos_compra.php'; ?>
        </select>
    </div>
</div>
<h3 id="precio" name="precio"></h3>

这是precio.php

的内容
<?php 
require $_SERVER['DOCUMENT_ROOT'].'/php/db_key.php';

$con = mysqli_connect($servername, $username, $password, $dbname);

$q = $_GET["q"];

$sql = "SELECT precio FROM productos WHERE titulo = '".$q."'";

$result = mysqli_query($con,$sql);

while($row = mysqli_fetch_array($result)) {
    echo $row['precio'];
}
?>

一如既往,我们将不胜感激,感谢您抽出宝贵时间。

您在脚本末尾添加了额外的 }。以下就可以了

<script>
    function precioProd(str) {
        if (str=="") {
            document.getElementById("precio").innerHTML="";
            return;
        }
        if (window.XMLHttpRequest) {
            var xmlhttp = new XMLHttpRequest();
        }
        xmlhttp.onreadystatechange = function() {
          if (this.readyState == 4 && this.status == 200) {
            document.getElementById("precio").innerHTML = this.responseText;
          }
        };
        xmlhttp.open("GET", "precio.php?q="+str, true);
        xmlhttp.send();
    }
</script>