javascript - 为什么我的文本框没有用查询结果更新

标签 javascript php html json ajax

使用本书章节末尾的问题自学 PHP,我用它来学习如何应用每一章的方法。创建了一个 html 页面,接受用户输入的汽车 ID,单击按钮,该汽车的信息就会显示在文本框中。我搜索了很多文档、SO 和网络,但根据我当前的学习晴雨表找不到我正在寻找的方法。使用 phpexplode() 方法有效还是 ajax/json 效果更好?

当我单击搜索时,文本框中没有填充任何内容,因此如果有人可以教我做错了什么以及需要修复代码的地方,那就太好了。谢谢!

<?php
$host = "localhost";
$dbname = "car_search_db";
$user = "pontiac";
$password = "Race_Day!";

try {
    $db = new PDO("mysql:dbname=$dbname;host=$host",$user,$password);

}
catch (PDOException $e) {
    $error_message = $e->getMessage();
    include ('error.php');
    exit();
}   

$car_ID = isset($_GET['car_ID']) ? $_POST['car_ID'] : '';
if($car_ID == "")
    die("Invalid input");

$query = 'SELECT carID, make, model, year FROM fastCars
          WHERE carID = :car_ID';         
$statement = $db->prepare($query);
$statement->bindValue(':car_ID', $car_ID); 
$statement->execute();
$cars = $statement->fetchAll(PDO::FETCH_ASSOC);

$json = json_encode($cars);
echo $json;
?>

<!DOCTYPE html>
<head>
<title>Fast Car Page</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<script type="text/javascript">
function queryCars() {
    //get user input
    var id = document.getElementById('car_ID').value;

    //create a query string
    var queryString = "?car_ID=" + car_ID;

    //create XMLHTTP Request
    var ajaxRequest;
    try {
        ajaxRequest = new XMLHttpRequest;
    }catch(e) {
        //IE Browsers
        try {
            ajaxRequest = new ActiveXobjectect("Msxml2.XMLHTTP");
            } catch (e) {
                try{
                    ajaxRequest = new ActiveXobjectect("Microsoft.XMLHTTP");
                } catch (e){
                    // Something went wrong
                    alert("Browser not compatible");
                    return false;
                }
            }
    }
    //create ajax function that processes server response
     ajaxRequest.onreadystatechange = function() {
        if(ajaxRequest.readyState == 4 && ajaxRequest.status == 200) {
            var object = JSON.parse(xmlhttp.responseText);
            document.getElementById('car_id').value = object[0].car_ID;
            document.getElementById('make').value = object[1].make;
            document.getElementById('model').value = object[2].model;
            document.getElementById('year').value = object[3].year;         

        }
    };
            //execute the query
            xmlhttp.open("POST", "car_search.php" + queryString, true);
            xmlhttp.send();
}


</script> 
<header><h1>Fast Car Lookup - Search & Split</h1></header>
<br>
<h2>Search for a car info by ID</h2>
<br>
<form action="car_search.php" method="get">
<label>StudentID:</label>
<input type="text" id="id" name="car_ID">
<br>
<br>
<input type="button"  onclick="queryCars();" value="Search" id="get_info">

<h2>information will be displayed in the textboxes below for the car ID chosen:</h2>
<br>

<table id="outuput">
<tr>
    <td><label>Car ID:</label></td>
    <td><input type="text" id="car_ID" value="" readonly></td>
</tr>
<tr>
    <td><label>Make:</label></td>
    <td><input type="text" id="make" value="" readonly></td>
</tr>    
<tr>
    <td><label>Model:</label></td>
    <td><input type="text" id="model" value="" readonly></td>
</tr>
<tr>
    <td><label>Year:</label></td>
    <td><input type="text" id="" value="" readonly></td>
</tr>
<br>
</table>
</form>
<a href="index.htm">Back to first page</a>
</body>
</html>

最佳答案

您在这里绑定(bind)了错误的变量:

$statement->bindValue(':car_ID', $student_ID);

应该是

$statement->bindValue(':car_ID', $car_ID);

您还在 php 中使用 post,但汽车 id 在查询字符串中 - 应该在 php 中使用 GET。

关于javascript - 为什么我的文本框没有用查询结果更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37009570/

相关文章:

javascript - CSS/JS 导航菜单中的箭头(例如 playframework.org)

javascript - 如何从 Azure DevOps 扩展检索工作项?

java - 无法在Android代码中的Alarm OnReceive方法上执行select.php

php - $_REQUEST 优先级是什么?

css - 如何在 CSS 中将导航和内容区域的高度拉伸(stretch)到 100%?

javascript - 从 json 中获取数据并用作链接

php - 使用 PHP 打开一个新窗口

Javascript 不注册 onClick 按钮的值并将其 append 到文本区域

c# - 如何使用 httpClient.postAsync 在 UWP 中上传图像或 bytes[]

html - Dojo//dijit.form.FilteringSelect//如何在Dojo的filter Select中的一个<select>字段中添加一个类