如何使用Ajax將php數組索引值傳遞給html元素

Question

希望這是我對此表格提出的最后一個問題。 我的php工作正常，正在獲取正確的數據。 我已經為索引創建了變量，現在想將它們傳遞給我的js / ajax，以便這些值填充html文本框。 不確定代碼是否正確，因為這里沒有很多示例。

我在此頁面的ajax部分中正確調用數組索引嗎？ 不知道我是否應該使用“ innerHTML”或值屬性。 如果我要離開的話，請解釋一下該如何做。 如果您需要查看我的PHP，我可以進行編輯。 謝謝！

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

            document.getElementById("studentID").value = output1;           
            document.getElementById("stuName").value = output2;
            document.getElementById("email").value = output3;
            document.getElementById("GPA").value = output4;

        }
    };
    var student_ID = document.getElementById('studentID').innerHTML = ajaxRequest.responseText; 

    var queryString = "?studentID=" + student_ID;
    ajaxRequest.open("GET", "search_single.php"+ queryString, true);
    ajaxRequest.send(); //Return value from function 
}
</script>   
<h2>Search for Students by studentID</h2>
<br>
<form name="myForm" action="search_single.php" method="post"> <!--no action or post as it is posted to same page-->
<label>Student ID:</label>
<input type="text" id="studentID">
<br>
<br>
<input type="button" onClick="queryStudent()" value="Search">
<h2>Student information will be displayed in the textboxes below:</h2>
<br>

<table id="outuput">
<tr>
    <td>Student ID:</td>
    <td><input type="text" id="studentID" value="" readonly></td>
</tr>
<tr>
    <td>Student Name:</td>
    <td><input type="text" id="stuName"  value="" readonly></td>
</tr>    
<tr>
    <td>Email:</td>
    <td><input type="text" id="email" value="" readonly></td>
</tr>
<tr>
    <td>GPA:</td>
    <td><input type="text" id="gpa" value="" readonly></td>
</tr>
<br>
</table>
</form>

PHP代碼：

if(!isset($studentID)) {
$studentID = filter_input(INPUT_GET, 'studentID', FILTER_VALIDATE_INT);
    if($studentID == NULL || $studentID == FALSE) {
        $studentID = 1;
    }
}
//prepare query 
$query = 'SELECT * FROM student
          WHERE studentID = :studentID';
$statement = $db->prepare($query);
$statement->bindValue(':studentID', $studentID);
$statement->execute();
$result = $statement->fetch(PDO::FETCH_ASSOC);

//var_dump($result); //check indexes

$output = "";
$output1 = $output.$result['studentID'];
$output2 = $output.$result['name'];
$output3 = $output.$result['email'];
$output4 = $output.$result['GPA'];

？>

Answer 1

您的代碼中有幾個錯誤，例如：

• id屬性

   <input type="text" id="studentID"> 

  和

   <td><input type="text" id="studentID" value="" readonly></td> 

  是同樣的。 更改id屬性之一以使其與眾不同。

• 您從輸入字段獲取學生ID的方式錯誤，

   var student_ID = document.getElementById('studentID').innerHTML = ajaxRequest.responseText; 

  它應該是，

   var student_ID = document.getElementById('studentID').value; 

• 在服務器端 ，在您的PHP代碼中

   $output = ""; $output1 = $output.$result['studentID'];... 

  您只是將值與一個空字符串連接起來，然后將其分配給另一個變量，這對您的代碼沒有任何好處。 相反，請從結果集中獲取結果行，並使用json_encode()函數對其進行編碼。 在客戶端 ，解析此json對象並填充適當的輸入字段。

因此，您的代碼應如下所示：

HTML：

<h2>Search for Students by studentID</h2>
<br>
<form name="myForm" action="search_single.php" method="post">
    <label>Student ID:</label>
    <input type="text" id="studentID" />
    <br>
    <br>
    <input type="button" onClick="queryStudent()" value="Search">
    <h2>Student information will be displayed in the textboxes below:</h2>
    <br>

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

JavaScript：

<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){
                var data = JSON.parse(ajaxRequest.responseText);
                if(data['status']){
                    document.getElementById("stuID").value = data['studentID'];
                    document.getElementById("stuName").value = data['name'];
                    document.getElementById("email").value = data['email'];
                    document.getElementById("gpa").value = data['GPA'];
                }else{
                    alert("You have passed an invalid student ID");
                }
            }
        };

        var student_ID = document.getElementById('studentID').value;
        var queryString = "?studentID=" + student_ID;
        ajaxRequest.open("GET", "search_single.php"+ queryString, true);
        ajaxRequest.send();
    }
</script>   

PHP：

<?php

    if(!isset($studentID)){
        $studentID = filter_input(INPUT_GET, 'studentID', FILTER_VALIDATE_INT);
        if($studentID == NULL || $studentID == false) {
            $studentID = 1;
        }
    }

    // Your PDO connection code

    $result = array(); // To hold the result array
    $query = 'SELECT * FROM student WHERE studentID = :studentID LIMIT 1';
    $statement = $db->prepare($query);
    $statement->bindValue(':studentID', $studentID);
    $statement->execute();
    if($statement->rowCount()){
        $result = $statement->fetch(PDO::FETCH_ASSOC);
        $result['status'] = true;
    }else{
        $result['status'] = false;
    }
    echo json_encode($result);

?>