从php的表的所有行接收JSON编码数据，并使用ajax在html表中显示

时间：2018-08-14 22:47:28

标签： php jquery html json ajax

我在几个小时内挣扎，但没有任何进展，我也找不到任何合适的解决方案。 我正在尝试检索json数据（包括表中的行）并使用ajax在html表中显示。我现在的要点是，当我使用以下代码时仅显示一行，但是当我尝试从所有位置解析数据时给出错误行：

PHP 

    if (isset($_POST['groups_per_table'])){ 
        try{
        $stmt = $db_con->prepare("SELECT * FROM groups_permissions");
        $stmt->execute();
        $response = array();            
        while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
            $response['id'] = $row['id'];
            $response['group'] = $row['group'];
            $response['restricted_pages'] = $row['restricted_pages'];
            $response['restricted_permissions'] = $row['restricted_permissions'];               
            echo json_encode($response);
        }
    }       
    catch(PDOException $e){
        echo $e->getMessage();
    }
}`

如果我在查询 WHERE id = 1 中使用（仅第一个行），那么它将正确显示数据：

JS 

$( document ).ready(function() {
groups_per_table();
function groups_per_table(){
    $.ajax({
        type: "POST",
        url  : '../core/ajaxpdo.class.php',
        data: 'groups_per_table='+'givedata',
        success: function (response) {
            var gp_data = $.parseJSON(response);
            console.log(response);                          
            $("#gp_body").html('<tr><td class="text-center"><label id="'+gp_data.id+'" class="csscheckbox csscheckbox-primary"><input type="checkbox"><span></span></label></td><td><strong>'+gp_data.group+'</strong></td><td>'+gp_data.restricted_pages+'</td><td>'+gp_data.restricted_permissions+'</td><td class="text-center"><a href="javascript:void(0)" data-toggle="tooltip" title="" class="btn btn-effect-ripple btn-sm btn-success" style="overflow: hidden; position: relative;" data-original-title="Edit User"><span class="btn-ripple animate" style="height: 32.2917px; width: 32.2917px; top: -6.81251px; left: 0.3229px;"></span><i class="fa fa-pencil"></i></a><a href="javascript:void(0)" data-toggle="tooltip" title="" class="btn btn-effect-ripple btn-sm btn-danger" style="overflow: hidden; position: relative;" data-original-title="Delete User"><i class="fa fa-times"></i></a></td></tr>');                
        },
        error: function() {
            alert('There is an error!');
        }
    });
    return false;       
}});

我想在表中显示数据库中的所有行，它在控制台中给出以下错误：

控制台日志 

Uncaught SyntaxError: Unexpected token { in JSON at position 76
at Function.parse [as parseJSON] (<anonymous>)
at Object.success (groups-permissions.php:968)
at u (jquery-3.3.1.min.js:2)
at Object.fireWith [as resolveWith] (jquery-3.3.1.min.js:2)
at k (jquery-3.3.1.min.js:2)
at XMLHttpRequest.<anonymous> (jquery-3.3.1.min.js:2)

JSON数据 

{"id":"1","group":"group","restricted_pages":"","restricted_permissions":""}{"id":"2","group":"newgroup","restricted_pages":"b","restricted_permissions":"f"}{"id":"3","group":"asd","restricted_pages":"a,b,c,d","restricted_permissions":"e,f,g,h"}

2 个答案:

答案 0 :(得分：0)

进行循环以将数据放入DOM：

var testObject = [{
    "id": "1",
    "group": "group",
    "restricted_pages": "",
    "restricted_permissions": ""
  },
  {
    "id": "2",
    "group": "newgroup",
    "restricted_pages": "b",
    "restricted_permissions": "f"
  },
  {
    "id": "3",
    "group": "asd",
    "restricted_pages": "a,b,c,d",
    "restricted_permissions": "e,f,g,h"
  }
];

function putdataToDom(gp_data) {
  $("#gp_body").html('');
  for (var i = 1; i < gp_data.length; i++) {
    $("#gp_body").append('<tr><td class="text-center"><label id="' + gp_data[i].id + '" class="csscheckbox csscheckbox-primary"><input type="checkbox"><span></span></label></td><td><strong>' + gp_data[i].group + '</strong></td><td>' + gp_data[i].restricted_pages + '</td><td>' + gp_data[i].restricted_permissions + '</td><td class="text-center"><a href="javascript:void(0)" data-toggle="tooltip" title="" class="btn btn-effect-ripple btn-sm btn-success" style="overflow: hidden; position: relative;" data-original-title="Edit User"><span class="btn-ripple animate" style="height: 32.2917px; width: 32.2917px; top: -6.81251px; left: 0.3229px;"></span><i class="fa fa-pencil"></i></a><a href="javascript:void(0)" data-toggle="tooltip" title="" class="btn btn-effect-ripple btn-sm btn-danger" style="overflow: hidden; position: relative;" data-original-title="Delete User"><i class="fa fa-times"></i></a></td></tr>');
  }
}
putdataToDom(testObject);

$(document).ready(function() {
  groups_per_table();

  function groups_per_table() {
    $.ajax({
      type: "POST",
      url: '../core/ajaxpdo.class.php',
      data: 'groups_per_table=' + 'givedata',
      success: function(response) {
        var gp_data = $.parseJSON(response);
        console.log(response);
        putdataToDom(gp_data);
      },
      error: function() {
        alert('There is an error!');
      }
    });
    return false;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="gp_body" border=1></table>

答案 1 :(得分：0)

这是JSON中的 SyntaxError ，这意味着您的JSON不是有效的JSON，您的JSON结果应该是这样的：

[{
    "id": "1",
    "group": "group",
    "restricted_pages": "",
    "restricted_permissions": ""
}, {
    "id": "2",
    "group": "newgroup",
    "restricted_pages": "b",
    "restricted_permissions": "f"
}, {
    "id": "3",
    "group": "asd",
    "restricted_pages": "a,b,c,d",
    "restricted_permissions": "e,f,g,h"
}]

所以我建议您添加另一个数组，可以将其命名为$ json并将数据推送到其中，如下所示：

服务器端（PHP）

// ...
$response = array();
$json = array();  
while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
    $response['id'] = $row['id'];
    $response['group'] = $row['group'];
    $response['restricted_pages'] = $row['restricted_pages'];
    $response['restricted_permissions'] = $row['restricted_permissions'];
    array_push($json, $response);
}
echo json_encode($json);
// ...

客户端（JavaScript）

$( document ).ready(function() {

    groups_per_table();

    function groups_per_table(){

        $.ajax({

            type: "POST",
            url  : '../core/ajaxpdo.class.php',
            data: 'groups_per_table='+'givedata',
            success: function (response) {

                var gp_data = $.parseJSON(response);

                for(var i = 0; i < gp_data.length; i++) {

                    $("#gp_body").html('<tr><td class="text-center"><label id="'+gp_data[i].id+'" class="csscheckbox csscheckbox-primary"><input type="checkbox"><span></span></label></td><td><strong>'+gp_data[i].group+'</strong></td><td>'+gp_data[i].restricted_pages+'</td><td>'+gp_data[i].restricted_permissions+'</td><td class="text-center"><a href="javascript:void(0)" data-toggle="tooltip" title="" class="btn btn-effect-ripple btn-sm btn-success" style="overflow: hidden; position: relative;" data-original-title="Edit User"><span class="btn-ripple animate" style="height: 32.2917px; width: 32.2917px; top: -6.81251px; left: 0.3229px;"></span><i class="fa fa-pencil"></i></a><a href="javascript:void(0)" data-toggle="tooltip" title="" class="btn btn-effect-ripple btn-sm btn-danger" style="overflow: hidden; position: relative;" data-original-title="Delete User"><i class="fa fa-times"></i></a></td></tr>');
                }

            },
            error: function() {
            alert('There is an error!');
            }
        });

        return false;
    }
});
相关问题
最新问题