无法将 jQuery 的 SQL AJAX 调用结果显示为 HTML

Posted

技术标签:

【中文标题】无法将 jQuery 的 SQL AJAX 调用结果显示为 HTML【英文标题】:Trouble displaying SQL AJAX call results from jQuery onto HTML 【发布时间】:2019-07-29 19:16:53 【问题描述】:

我目前正在尝试将从我的数据库返回的数据显示到我的 php 显示页面上。我一直在关注本教程: https://www.phpzag.com/ajax-drop-down-selection-data-load-with-php-mysql/

起初我尝试用它来测试我的数据。但我发现它工作不正常。因此,我决定在我的系统上使用教程中提供的示例数据来查看哪里出了问题。因此我的页面如下:

populatePage.php

<?php
require_once('../../config/sessionHandler.php'); 
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="src/populatePage.js"></script>

    <title>Populate Page</title>
</head>
<body >
    <div class="page-header">
        <h3>
            <select id="employee">
                <option value="" selected="selected">Select Employee Name</option>
                    <?php
                    $sql = "SELECT id, employee_name, employee_salary, employee_age FROM employee LIMIT 10";
                    $resultset = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
                    while( $rows = mysqli_fetch_assoc($resultset) ) 
                    ?>
                <option value="<?php echo $rows["id"]; ?>"><?php echo $rows["employee_name"]; ?></option>
                    <?php  ?>
            </select>
        </h3>
    </div>
    <div id="display">
        <div id="heading" class="row">
            <h3>

            </h3>
        </div>
        <div id="records" class="row">
            <h3>

            </h3>
        </div>
    </div>
</body>
</html>

populatePage.js

$(document).ready(function()
// code to get all records from table via select box
$("#employee").change(function() 
var id = $(this).find(":selected").val();
var dataString = 'empid='+ id;
$.ajax(
url: 'popJax.php',
dataType: "json",
data: dataString,
cache: false,
success: function(employeeData) 
if(employeeData) 
$("#heading").show();
$("#no_records").hide();
$("#emp_name").text(employeeData.employee_name);
$("#emp_age").text(employeeData.employee_age);
$("#emp_salary").text(employeeData.employee_salary);
$("#records").show();
 else 
$("#heading").hide();
$("#records").hide();
$("#no_records").show();


);
)
);

popJax.php

<?php
require_once('../../config/sessionHandler.php');

$_SESSION['PopulateWorking'] = true;

if($_REQUEST['empid']) 
    
        $sql = "SELECT id, employee_name, employee_salary, employee_age FROM    employee WHERE id='".$_REQUEST['empid']."'";
        $resultset = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
        $data = array();

        while( $rows = mysqli_fetch_assoc($resultset) ) 
            
                $data = $rows;
            
            echo json_encode($data);
     
else 
    
        echo 0;
        $_SESSION['Fail'] = true;
    

?>>

我的sessionHandler是用来实现数据库连接和会话验证的。

我按照教程进行操作。到目前为止,我的系统将:

-从表中检索用户。

-用它们填充下拉列表。

-允许我选择一个用户。

-将 $_SESSION['PopulateWorking'] 显示为 'true'

-当我在 JS 调试器中观看时,正确读取员工数据。

但是在这些方面的某个地方我遗漏了一些东西。我经常使用 AJAX、PHP 和 SQL。但我绝不是专家。我正在寻找我缺少一个完整步骤的地方?我只是想尝试像他在教程中那样显示数据。因为这样我就可以微调和改变周围的一切,让它按照我想要的方式工作。但是现在,当我单击用户时,页面上没有任何内容像他的教程中那样填充。我的工作直到真正的重要部分。显示选定的数据。

当比较他的矿旁边时也没有显示:“请选择员工姓名以查看详细信息”,页面上的任何地方?所以我在想我在某个地方错过了整个 DIV?还是不生成?还是脚本调用不正确?

我似乎无法弄清楚我在哪里错误地使用了 JSON 数据?

TL;DR:为什么我的页面不会像本教程中那样在我的页面上显示结果数据?

【问题讨论】:

警告:您对SQL Injections 持开放态度,应该真正使用参数化的prepared statements,而不是手动构建查询。它们由PDO 或MySQLi 提供。永远不要相信任何类型的输入,尤其是来自客户端的输入。即使您的查询仅由受信任的用户执行,you are still in risk of corrupting your data。 我强烈建议您停止学习本教程!它正在教你非常错误的 PHP 编码实践。 @Dharman 哦,不!我只是想找到一种方法将我的 SQL 数据显示到下拉列表中。真的有那么糟糕吗?老实说,我只是想使用 AJAX 将表数据显示到来自 SQL 的列表中。有没有更好的方法来做到这一点? @Morjee,你需要听听达曼的建议。该代码存在 sql 注入漏洞。您正在将参数/请求直接传递到 sql 查询中,而无需事先进行转义、验证和清理 【参考方案1】:

很抱歉浪费了时间。我没有尝试在 popJax.php 中引用的任何 div

我需要添加

【讨论】:

以上是关于无法将 jQuery 的 SQL AJAX 调用结果显示为 HTML的主要内容,如果未能解决你的问题,请参考以下文章

Jquery Ajax 无法将数据定向到服务器

jquery-无法从我通过ajax调用获得的对象类型响应中检索数据

Ajax 无法正常工作。 PHP 无法在 SQL 中插入数据

如何使用 ajax 调用将 jquery 数据表加载到 div 中

ajax/jquery POST 请求的不必要重复

如何调试 jquery AJAX 调用?