如何将mysql查询的结果导入html文本框

时间:2016-05-01 21:40:43

标签: javascript php mysql

已经工作了8个小时并且没有到达任何地方。进行更改只会遇到另一个块。开始并回到几乎方形1。寻求帮助,了解我做错了什么。我确实通过将所有学生归还桌子来完成这项工作,但这不是我需要的。我想要做的是: 1.提示用户输入学生证。 2.针对mysql查询运行id 3.将有关学生的信息(ID,姓名,电子邮件和GPA)输出到4个文本框中。 我知道我需要一个数组,然后在js / ajax中拆分4个文本框之间的响应。如何在函数中调用数组,然后将该学生的结果输出到文本框中?任何帮助或建议表示赞赏。

这是我到目前为止所做的: HTML:

<script type="text/javascript">
function queryStudent() {
    var ajaxRequest;
    try {
        ajaxRequest = new XMLHttpRequest;
    }catch(e) {
        //IE Browsers
        try {
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try{
                    ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e){
                    // Something went wrong
                    alert("Browser not compatible");
                    return false;
                }
            }
    }
    ajaxRequest.onreadystatechange = function() {
        if(ajaxRequest.readyState == 4 && ajaxRequest.status == 200) {
            //delcare a array
            //use ajax response.split to return the results of query to each textbox here
            var results = ajaxRequest.responseText.split(); //how do i get query results in here
            //output array indexes to html element id's
            document.getElementById('studentID').value = response[0]; //fill text box 1
            document.getElementById('stuName').value = response[1];//text box 2
            document.getElementById('email').value = response[2];
            document.getElementById('GPA').value = response[3];         
}
};
        var stuID = document.getElementByID('stuID').value
        var queryString = "?stuID=" + stuID;
        ajaxRequest.open("POST", "search_single.php"+ queryString, true);
        ajaxRequest.send(stuID);

        }
</script> 
<form name="student" method="post" action="search_single.php">
<label>StudentID:</label>
<input type="text" id="input" name="stuID" value="">
<br>
<br>
<input type="button"  onclick="queryStudent();" value="Search" id="button">
</form>
<h2>Student information will be displayed in the textboxes below:</h2>
<br>
<table id="outuput">
<tr>
    <td><label>Student ID:</label></td>
    <td><input type="text" id="stuID" value="" readonly></td>
</tr>
<tr>
    <td><label>Student Name:</label></td>
    <td><input type="text" id="stuName" value="" readonly></td>
</tr>    
<tr>
    <td><label>Email:</label></td>
    <td><input type="text" id="email" value=" " readonly></td>
</tr>
<tr>
    <td><label>GPA:</label></td>
    <td><input type="text" id="gpa" value=" " readonly></td>
</tr>
<br>
</table></body>

PHP:

$stuID = filter_input(INPUT_POST, 'studentID');
//Code for query
$query = 'SELECT *
          FROM student
          WHERE studentID = :stuID';
$statement = $db->prepare($query); //
$statement->bindValue(':stuID', $stuID); //bind all values (name, email..ect)?
$statement->execute();
$students = $statement->fetch(); //Fetch individual row's

1 个答案:

答案 0 :(得分:2)

我仔细看了一下你的代码,发现了很多错误。我建议您使用IDE进行开发。 IDE具有自动代码验证功能,可以轻松发现并纠正错误。 还习惯阅读PHP docs函数。类似的javascript文档是here

客户代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript">
    function queryStudent() {
        //Retrieve user input, student ID
        var stuID = document.getElementById('input').value

        //Build querystring
        var queryString = "?stuID=" + stuID;

        //Create XMLHttpRequest
        var xmlhttp = new XMLHttpRequest();

        //Define function to process server feedback
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

                //Parse reponse
                var obj = JSON.parse(xmlhttp.responseText);

                //Populate form
                document.getElementById('stuID').value = obj[0].studentID;
                document.getElementById('stuName').value = obj[0].stuName;
                document.getElementById('email').value = obj[0].email;
                document.getElementById('gpa').value = obj[0].GPA;
            }
        };
        //Run query
        xmlhttp.open("POST", "search_single.php" + queryString, true);
        xmlhttp.send();
    }
    </script> 
</head>
<body>

    <form name="student" method="post" action="search_single.php">
        <label>StudentID:</label>
        <input type="text" id="input" name="stuID" value="">
        <br>
        <br>
        <input type="button"  onclick="queryStudent();" value="Search" id="button">
    </form>
    <h2>Student information will be displayed in the textboxes below:</h2>

    <table id="output">
        <tr>
            <td><label>Student ID:</label></td>
            <td><input type="text" id="stuID" value="" readonly></td>
        </tr>
        <tr>
            <td><label>Student Name:</label></td>
            <td><input type="text" id="stuName" value="" readonly></td>
        </tr>    
        <tr>
            <td><label>Email:</label></td>
            <td><input type="text" id="email" value=" " readonly></td>
        </tr>
        <tr>
            <td><label>GPA:</label></td>
            <td><input type="text" id="gpa" value=" " readonly></td>
        </tr>
    </table>


</body>
</html>

服务器代码

<?php

//-------------------------
//Database constants, enter your DB info into these constants :
define(DB_HOST,     "hostname");
define(DBUSER,      "username");
define(DBPASS,      "password");
define(DBSCHEME,    "databasename");
//-------------------------

//Create DB link
$con = new PDO('mysql:host='.DB_HOST.';dbname='.DBSCHEME, DBUSER, DBPASS); 
$con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

//Retrieve user input 
$stuID = $_REQUEST['stuID'];

//Evaluate user input
if( $stuID == "" )
    die("Invalid Student ID");

//Prepare and execute
$sql = 'SELECT studentID, stuName, email, GPA FROM student WHERE studentID = :stuID';
$query = $con->prepare($sql);
$query->bindValue(':stuID', $stuID, PDO::PARAM_STR);
$query->execute();

//Retrieve results
$students = $query->fetchAll(PDO::FETCH_ASSOC);
$json = json_encode($students);

//Output to ajax
echo $json;