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

【问题标题】：AJAX - Change innerHTML of element on change event in selection input not workingAJAX - 在选择输入中更改事件时更改元素的 innerHTML 不起作用
【发布时间】：2020-03-18 14:58:26
【问题描述】：

当用户在 <select> 元素中进行选择并显示通过 AJAX 在元素中获得的所述值但它不起作用时，我试图从数据库中获取产品的值，如果我转到 @987654322 @ 它确实给了我想要的结果 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'];
}
?>

一如既往，我们将不胜感激任何形式的帮助，并感谢您抽出宝贵时间。

【问题讨论】：

标签： javascript php ajax onchange

【解决方案1】：

您在脚本末尾添加了一个额外的}。下面的就OK了。

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

【讨论】：