使用 Slim 的 Web 应用程序 API。当在 table 中单击编辑 link 时，我正在尝试从我的 SQL 数据库获取数据以填充模态

Question

正在调试；单击编辑按钮时会找到每行的 id，但它似乎卡在了这一点上。所述行的数据不会填充模态。我将不胜感激任何帮助！ Here is a picture in chrome。我已经用尽了我所有的想法。我确实遇到本地主机无法为图像文件夹加载资源的错误，这会导致冲突吗？我不知道如何。

HTML

 <div class="tab-pane" id="admin">
                    <br>
                    <div class="container">
                        <table id="admin_table" class="display">
                            <thead>

                                <tr>
                                    <th>Title</th>
                                    <th>Genre</th>
                                    <th>Platform</th>
                                    <th>Score Phrase</th>
                                    <th>Score</th>
                                    <th>Release Year</th>
                                    <th>Release Month</th>
                                    <th>Release Day</th>
                                    <th>Editors Choice</th>
                                    <th>Edit</th>
                                    <th>x</th>

                                </tr>

                                <tbody id="admin_table_body">

                                </tbody>
                        </table>
                    </div> <br><br><br><br>
                </div>
            </div>
>Modal      

 <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">Edit</h4>
                  </div>
                    <div class="modal-body">
                    <form class="form-horizontal" method="post">
                        <div class="form-group">
                            <label class="col-sm-4 control-label"><strong>ID:</strong></label>
                            <input type="text" style="height:32px;" name="id" id="id" disabled/>
                            <label for="id" class="error"></label>
                        </div>

                       <div class="form-group">
                                <label class="col-sm-4 control-label"><strong>Title:</strong></label>
                                <input type="text" style="height:32px;" id="title" name="title"/>
                           <label for="title" class="error" ></label>
                       </div>

                       <div class="form-group">
                            <label class="col-sm-4 control-label"><strong>Genre:</strong></label>
                            <input type="text" style="height:32px;" id="genre" name="genre"/>
                            <label for="genre" class="error" ></label>
                       </div>

                       <div class="form-group">

                           <label class="col-sm-4 control-label"><strong>Platform:</strong></label>
                           <input type="text" style="height:32px;" id="platform" name="platform"/>
                           <label for="platform" class="error" ></label>
                        </div>

                       <div class="form-group">
                            <label class="col-sm-4 control-label"><strong>Score:</strong></label>
                            <input type="text" id="score" name="score" style="height:32px;"/>
                            <label for="score" class="error"></label>
                       </div>   
                                        <div class="form-group">
                            <label class="col-sm-4 control-label"><strong>Score Phrase:</strong></label>
                            <input type="text" id="score_phrase" name="score_phrase" style="height:32px;"/>
                            <label for="score_phrase" class="error"></label>
                       </div>

                       <div class="form-group">
                            <label class="col-sm-4 control-label"><strong>Release Year:</strong></label>
                            <input type="text" id="release_year" name="release_year" style="height:32px;"/>
                            <label for="release_year" class="error"></label>
                       </div>
                       <div class="form-group">
                            <label class="col-sm-4 control-label"><strong>Release Month:</strong></label>
                            <textarea id="release_month" name="release_month" style="height:32px;"></textarea>
                            <label for="release_month" class="error"></label>
                       </div>
                                        <div class="form-group">
                            <label class="col-sm-4 control-label"><strong>Release Day:</strong></label>
                            <textarea id="release_day" name="release_day" style="height:32px;"></textarea>
                            <label for="release_day" class="error"></label>
                       </div>
                                        <div class="form-group">
                            <label class="col-sm-4 control-label"><strong>Editors Choice:</strong></label>
                            <textarea id="editors_choice" name="editors_choice" style="height:32px;"></textarea>
                            <label for="editors_choice" class="error"></label>
                       </div>
                    </form>
          </div>

Main.js

        var rootURL ="http://localhost:4006/GamesAPI/api/games";
        var currentGame;
        //when the DOM is ready
        $(document).ready(function(){
            findAll();
            //findById();
            $(document).on("click","#admin_table_body a",function(){findById(this.id);});
           // $(document).on("click","#addButton",function(){addGame();});
           // $(document).on("click","#deleteButton",function(){deleteGame();});

        });

        var findAll=function(){
            console.log('findAll');
            $.ajax({
                type: 'GET',
                url: rootURL,
                dataType: "json", // data type of response
                success: renderList
            });
        };

        var findById = function(id)
        {
            console.log('findById: '+id);
            $.ajax({
                type: 'GET',
                url: rootURL + '/' + id,
                dataType: "json",
                //Gets stuck here
                success: function(data){
                    //$('#btnDelete').show();
                    console.log('findById success: ' +data.title);
                    currentGame = data;
                    renderDetails(currentGame);

                }


            });
        };


        function renderList(data){
            list = data.games;
            console.log("renderList");
            $('#admin_table_body tr').remove();
            $.each(list, function(index, games){
                $('#admin_table_body').append('<tr><td>' +games.title+'</td><td>'+games.genre+'</td><td>' 
                        +games.platform+'</td><td>' +games.score_phrase+'</td><td>'
                        +games.score+'</td><td>'+games.release_year+'</td><td>'+games.release_month+'</td><td>'
                        +games.release_day+'</td><td>'+games.editors_choice+'</td><td>\n\
                        <a href="#"  id="'+games.id+'" "span class="fa fa-pencil" data-toggle="modal" data-target="#editModal">Edit</a></td>\n\
                        <td id="'+games.id+'"><button type="button" id="deleteButton" class="btn btn-success">Delete</button></td></tr>');
            });
            $('#admin_table').DataTable();


           // $('gameList').append('<div class="row">');

           //The rest of this function is to populate a different client page
           output='<div class="row">';
            $.each(list, function(index,games){
                var img="pics/"+games.picture;
                output+=('<div class="col-sm-6 col-md-4 col-lg-3"><div class="card"><img src='+'"'+img+'"'+
                        'height="150"><p>Title: '+games.title+'</p><p>Genre: '+games.genre+'</p><p>Platform: '+games.platform+
                        '</p><p>Score: '+games.score+'  '+games.score_phrase+'</p></div></div>');
              // $('#gameList').append('<div class="col-sm-6 col-md-4 col-lg-3"><div class="card">'+game.title+'</div></div>');
           }); 
         // $('#gameList').append('</div>');
           output+='</div>';
           $('#productList').append(output);
            }; 


        var renderDetails = function(games)
        {
            $('#id').val(games.id);
            $('#title').val(games.title);
            $('#url').val(games.url);
            $('#platform').val(games.platform);
            $('#score').val(games.score);
            $('#score_phrase').val(games.score_phrase);
            $('#genre').val(games.genre);
            $('#pic').attr('src', 'pics/' + games.picture);
            $('#editors_choice').val(games.editors_choice);
            $('#release_year').val(games.release_year);
            $('#release_month').val(games.release_month);
            $('#release_day').val(games.release_day);

        };

DatabaseMethod.php

function getGame($id) { 
    $query = "SELECT * FROM games WHERE id = '$id'";
    try {
        global $db;
        $games = $db->query($query);  
        $game = $games->fetch(PDO::FETCH_ASSOC);
                header("Content-Type: application/json", true);
        echo $query;
                echo json_encode($game);
    } catch(PDOException $e) {
        echo '{"error":{"text":'. $e->getMessage() .'}}';
    }
}

Answer 1

您的服务器端 PHP 方法正在输出无效数据 JSON。

移除

echo $query;

来自您的代码，因为它刚刚从调试中遗留下来。这会阻止 jQuery 将整个响应视为 JSON 并相应地对其进行解析。

使用 Slim 的 Web 应用程序 API。当在 table 中单击编辑 link 时，我正在尝试从我的 SQL 数据库获取数据以填充模态

Web application using the Slim API. I'm trying to get data from my SQL database to populate a modal when the edit link is clicked in the table

ajax

rest

json

slim

bootstrap-modal