Question

我还是学生，我对网络开发很陌生。我正在学习ajax。我想将（通过按钮）ID传递给我的PHP脚本进行SQL处理，并将检索到的数据显示到我的页面而不重新加载它。但它似乎没有用。按下按钮后，它会直观地加载PHP页面（根据我自己的理解，使用ajax时不会发生这种情况）。

HTML和JavaScript代码：

<!DOCTYPE HTML>
<html>

<head>

</head>
<body>

<?php
  session_start();
?>
<form action="retrieve_data.php" method="POST" name="searchForm">
    EMPLOYEE ID: <input type="text" name='emp_id' id='emp_id'/>
    <input type="submit" value="Search" onsubmit="searchEmp()"/>
</form>
    <br>
    NAME:<p id="empName"></p><br>
    POSITION:<p id="empPos"></p>

 <script>

 function searchEmp() {

            var empID = document.getElementById('emp_id').value;
            var query = "?emp_id = " + empID;
            var xhr = new XMLHttpRequest();

            xhr.onreadystatechange = function() {

           if(xhr.readyState == 4) {
              document.getElementById('empName').innerHTML = '<?php echo  $_SESSION["empName"]; ?>';
              document.getElementById('empPos').innerHTML = '<?php echo  $_SESSION["empPosition"];?>';

           }
        }

            xhr.open("GET", "retrieve_data.php" +query, true);

            xhr.send(null);

        };
    </script>

retrieve_data.php：

    <?php

session_start();
if(!empty($_GET["emp_id"])){

$_SESSION["emp_id"] = $_GET["emp_id"];
$emp_id = $_SESSION["emp_id"];

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "overtimedtr";

// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}

$sql = "SELECT * FROM employees where id ='".$emp_id."'";
$result = mysqli_query($conn, $sql);

if (mysqli_num_rows($result) > 0) {
    // output data of each row
    while($row = mysqli_fetch_assoc($result)) {

        $_SESSION["empName"] = $row['name'];
        $_SESSION["empPosition"] = $row['position'];

    }
} else {
    echo "0 results";
}

mysqli_close($conn);
}

?>

这是我的html页面的图片：

我想要做的是当我点击搜索按钮时，页面应该显示名称和位置，而不是在<p>元素中重新加载页面，其中id为“empName”和“empPos”，结果不是我想要的，它显示我的PHP页面（显示为空）。

编辑：

我发现我不需要在表单中添加method="GET"，然后页面不必刷新，就像我想要的那样。

<form name="searchForm">
        EMPLOYEE ID: <input type="text" name='emp_id' id='emp_id'/>
        <input type="submit" value="Search" onsubmit="searchEmp()"/>
</form>

唯一剩下的问题是我似乎无法从PHP页面获取$_SESSION["empName"]和$_SESSION["empPosition"]的值。我怎么会出错？

if(xhr.readyState == 4) {
              document.getElementById('empName').innerHTML = '<?php echo  $_SESSION["empName"]; ?>';
              document.getElementById('empPos').innerHTML = '<?php echo  $_SESSION["empPosition"];?>';

           }

Answer 1

您的代码中有很多错误。

您的retrieve_data.php

中的错误

当您使用AJAX时，不使用$_SESSION来交换数据;相反，您可以像普通页面一样打印结果，但通常以结构化格式嵌入，如 JSON 或 XML 。我建议您组织要在数组中检索的所有内容，然后使用像json_encode这样的编码函数。例如：

if (mysqli_num_rows($result) > 0) {
    // output data of each row
    while($row = mysqli_fetch_assoc($result)) {
        $result["empName"] = $row['name'];
        $result["empPosition"] = $row['position'];
    }
} else {
    $result["empName"] = '0 results.';
    $result["empPosition"] = '0 results.';
}
//json encode prints the result formatted
exit(json_encode($result));

html中的错误

首先，当您使用AJAX时，通常不使用表单，因为表单的默认行为是加载页面;方法和操作的信息已经在open()方法中给出，所以你是多余的（还要注意你告诉表单在AJAX使用POST时使用GET）。更好地使用按钮。如果必须使用use forms，则始终返回false以防止加载页面。另外，在onreadystatechange内你不能使用php的echo。请记住，PHP是一个预处理器，一旦在客户端，打印的所有内容都是不可更改的。您必须使用XMLHttpRequest属性responseText或responseXML。此属性包含收到的响应。如果您遵循我在您的php文件中使用json_encode的建议，那么tou需要使用JSON.parse来处理收到的数据。同样在您的查询字符串中不要使用空格例如：

EMPLOYEE ID: <input type="text" name='emp_id' id='emp_id'/>
<button onclick="searchEmp()">Search</button>
<br>
NAME:<p id="empName"></p><br>
POSITION:<p id="empPos"></p>

<script>

    function searchEmp() {
        var empID = document.getElementById('emp_id').value;
        var query = "?emp_id=" + empID;
        var xhr = new XMLHttpRequest();

        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                jsonResponse = JSON.parse(xhr.responseText);
                document.getElementById('empName').innerHTML = jsonResponse.empName;
                document.getElementById('empPos').innerHTML = jsonResponse.empPosition;
            }
        }

        xhr.open("GET", "retrieve_data.php" + query, true);
        xhr.send(null);
    }
</script>

我建议您检查基本的AJAX文档，因为在某些AJAX概念中似乎有些混乱。

https://www.w3schools.com/xml/ajax_intro.asp

如果您还有其他问题，请与我们联系。

如何检索由php中的ajax发送的数据？

1 个答案:

您的retrieve_data.php

html中的错误