Ajax 调用未填充表

Posted 2023-02-24

【中文标题】Ajax 调用未填充表

【英文标题】：Ajax call not populating table

【发布时间】：2017-04-14 07:45:22

【问题描述】：

我正在尝试使用所谓的现代方法来填充我的表，该方法使用 Ajax 异步更新网站的各个部分。到目前为止，我已经设法使用纯 php 填充表格。这是代码。提前感谢您提供解决此问题的提示！

function showUsersBasic()
$.ajax(
        url: 'php_dbrequests\php_requests.php',
        type:'POST',
        dataType: 'json',
        success: function(output_string)
                $('#db-table-users').append(output_string);
             // End of success function of ajax form
        ); // End of ajax call    

这是 php_dbrequests\php_requests.php 中的代码

<?php
require 'database.php';
$sql = "SELECT id, email, regdate FROM users";
$records = $conn->prepare( $sql );
$records->execute();
$results = $records->fetchAll( PDO::FETCH_ASSOC );
    $output_string = '';
    $output_string .=  '<table>';
    $output_string .= '<tr>';
    $output_string .= '<th>ID</th>';
    $output_string .= '<th>Email</th>';
    $output_string .= '<th>Register Date</th>';
    $output_string .= '</tr>';
foreach( $results as $row )
    $output_string .=  "<tr><td>";
    $output_string .=  $row['id'];
    $output_string .=  "</td><td>";
    $output_string .=  $row['email'];
    $output_string .=  "</td><td>";
    $output_string .=  $row['regdate'];
    $output_string .=  "</td><td>";
    $output_string .=  "</td>";
    $output_string .=  "</tr>";

    $output_string .= '</table>';
echo json_encode($output_string);?>

我知道我已经掌握了最基本的内容：我的数据库连接成功，调用 ajax 函数的按钮有效。我仔细检查了对我表的引用。请，任何提示将不胜感激！

【问题讨论】：

在 chrome 开发工具中，转到网络选项卡并进行 ajax 调用，它将显示它是否返回预期结果或错误。

您能解释一下导致您发布此内容的意外行为吗？

@WEBjuju 点击提交按钮后，我的表的内容将不会填充。也没有返回错误信息。但我已经验证，至少在按钮中对 ajax 函数的引用是有效的。

html 中是否存在与 db-table-users 匹配的 id 属性的元素？

@flaunster 我没有安装 chrome。我正在使用 Mozilla Firefox 来运行该项目。你知道其中有什么同源选项吗？

【参考方案1】：

请使用$.get() 函数通过ajax 获取您的PHP 数据。

function showUsersBasic() 
    $.get("php_dbrequests\php_requests.php", function(output_string, status)
        $('#db-table-users').append(output_string);
    );
 

【讨论】：

我已经用它替换了我的代码，我得到了相同的结果。

【参考方案2】：

这里出了什么问题？我们能得到更多的上下文吗？仔细检查您的选择器（类与 id）

使用开发工具确保您在 ajax 调用中获得响应 - 或 - 将 alert(response); 添加到您的成功函数中。

*哇！ - 尝试提醒响应。如果一切正常，您应该在此处看到来自 php 脚本的响应。

【讨论】：

我将函数替换为 alert(output_string);我没有显示任何错误或操作。

【参考方案3】：

您需要修改 php 代码以返回带有 data 之类的键的数组，并且不要返回 table，因为您的 html 中已经有 table。所以只需返回带有填充数据的tr。

<?php
require 'database.php';
$sql = "SELECT id, email, regdate FROM users";
$records = $conn->prepare( $sql );
$records->execute();
$results = $records->fetchAll( PDO::FETCH_ASSOC );
    $output_string = '';
    #$output_string .=  '<table>';
    $output_string .= '<tr>';
    $output_string .= '<th>ID</th>';
    $output_string .= '<th>Email</th>';
    $output_string .= '<th>Register Date</th>';
    $output_string .= '</tr>';
foreach( $results as $row )
    $output_string .=  "<tr><td>";
    $output_string .=  $row['id'];
    $output_string .=  "</td><td>";
    $output_string .=  $row['email'];
    $output_string .=  "</td><td>";
    $output_string .=  $row['regdate'];
    $output_string .=  "</td><td>";
    $output_string .=  "</td>";
    $output_string .=  "</tr>";

    #$output_string .= '</table>';
echo json_encode(array('data'=>$output_string) );?>

然后将你的ajax代码修改为：

function showUsersBasic()

            console.info('showUserBasic called');  

  $.ajax(
    url: 'php_dbrequests\php_requests.php',
    type:'POST',
    dataType: 'json',
    success: function(output_string)
            //OPEN FIREFOX FIREBUG EXTENSION & check console and click the ajax request to see its response
            console.log(output_string);           

            $('#db-table-users').append(output_string.data);
         // End of success function of ajax form
    ); // End of ajax call   
 

【讨论】：

得到了同样的无响应行为。我认为这是我所缺少的大局观（除了我明显缺乏专业知识）。

我更新了 ajax 代码你能在 firebug 扩展控制台中检查上述代码的响应吗？让我知道输出是什么。

刚刚安装了插件。

不知道怎么用。

打开项目 url 后按 f12。然后单击“控制台”选项卡，一旦您执行基于 ajax 的操作，就会显示一个请求，单击它，您可以在特定选项卡中查看其响应和其他详细信息

【参考方案4】：

我认为您应该从 ajax 调用代码中删除参数“dataType”。您期待 JSON，但它正在返回 html。您还需要从 php 中的 echo 中删除 json_encode()。

【参考方案5】：

试试这个代码：

success: function(response)
                $('#db-table-users').append(response.output_string);
             // End of success function of ajax form
        ); // End of ajax call    

【讨论】：

与其他建议一样，不会显示任何错误或操作。