显示从 Controller - Codeigniter 传递过来的表（视图）中的数据

Question

我想在插入数据时以及加载页面时在表中显示数据。 存储数据成功地与代码一起工作，但问题是；

1. 当我使用 POST 时，表单数据在 URL 中是完全可见的。
2. 如何在 html 表中显示以 json 格式传递的所有数据。

HTML：

<table class="table table-striped table-bordered" id="myTable">
        <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">Match</th>
            <th scope="col">Match Date</th>
            <th scope="col">Winner</th>
            <th scope="col">Loser</th>
            <th scope="col">Man of the Match</th>
            <th scope="col">Bowler of Match</th>
            <th scope="col">Best Fielder</th>
        </tr>
        </thead>
    </table>

JAVASCRIPT：

<script>
$(function() {
    $("#submit").on("click", function(e) {
        var team_one = $('#team_one').val();
        var team_two = $('#team_two').val();
        var match_summary = $('#match_summary').val();
        var match_date = $('#match_date').val();
        var winner = $('#winner').val();
        var loser = $('#loser').val();
        var man_of_the_match = $('#man_of_the_match').val();
        var bowler_of_the_match = $('#bowler_of_the_match').val();
        var best_fielder = $('#best_fielder').val();

        $.ajax(
                {
                    type: "POST", //HTTP POST Method
                    url: '<?php echo base_url(); ?>/MatchController/storeMatch',
                    data: { //Passing data
                        'team_one': team_one,
                        'team_two': team_two,
                        'match_summary' : match_summary,
                        'match_date' : match_date,
                        'winner' : winner,
                        'loser' : loser,
                        'man_of_the_match' : man_of_the_match,
                        'bowler_of_the_match' : bowler_of_the_match,
                        'best_fielder' : best_fielder
                    },
                    success: function (response) {

                        console.log("Response: " + response);

                        alert("Data stored successfully");

                    },

                });
    });
});


//FETCH ALL MATCH DATA USING PASSED API IN CONTROLLER

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

    function getData(){
        $.ajax({
            url : "<?php echo base_url(); ?>/MatchController/fetchMatchData",
            method : 'get',
            dataType: "json",
            success: function(data){

            }
        });
    }
});

CONTROLLER：

    public function storeMatch()
{

    $team_one = $_POST['team_one'];
    $team_two = $_POST['team_two'];
    $match_date = $_POST['match_date'];
    $match_summary = $_POST['match_summary'];
    $winner = $_POST['winner'];
    $loser = $_POST['loser'];
    $man_of_the_match = $_POST['man_of_the_match'];
    $bowler_of_the_match = $_POST['bowler_of_the_match'];
    $best_fielder = $_POST['best_fielder'];

    $data = array(
        'team_one' => $team_one,
        'team_two' => $team_two,
        'match_date' => $match_date,
        'match_summary' => $match_summary,
        'winner' => $winner,
        'loser' => $loser,
        'man_of_the_match' => $man_of_the_match,
        'bowler_of_the_match' => $bowler_of_the_match,
        'best_fielder' => $best_fielder
    );

    $this->MatchModel->saveMatchData($data);

}

public function fetchMatchData()
{
    $match_data = $this->MatchModel->fetchMatchList();
    return $match_data;
}

Answer 1

尝试将结果传递给<tbody>使用JQuery

 success: function(data){
     //delete old tbody block
     $('#myTable tbody').remove()
     //add tbody block
     $('#myTable').append('<tbody><tr><td>'+data.someValue+'</td></tr></tbody>')
        }

当您想要添加新数据时，只需调用您的getData()即可。

success: function (response) {
                    getData()
                    console.log("Response: " + response);

                    alert("Data stored successfully");

                },

另请查看您的ajax呼叫的 e.preventDefault。 如果您使用 ajax 不必要地重新加载页面