簡體   English   中英

我如何將mysql查詢的結果獲取到html文本框中

[英]How do i get the results of a mysql query into html textbox

已經為此工作了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

我仔細查看了您的代碼,發現了很多錯誤。 我建議您使用IDE進行開發。 IDE具有自動代碼驗證功能,可輕松發現和糾正錯誤。 另外,養成閱讀有關函數的PHP文檔的習慣。 類似的javascript文檔在這里

客戶代碼

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM