显示从控制器传递的表（视图）中的数据 - Codeigniter

Posted 2023-05-08

【中文标题】显示从控制器传递的表（视图）中的数据 - Codeigniter

【英文标题】：Displaying data in table(view) passed from Controller - Codeigniter

【发布时间】：2021-10-11 07:57:28

【问题描述】：

我想在插入数据以及加载页面时在表格中显示数据。使用代码成功存储数据，但问题是；

当我使用 POST 时，表单数据在 URL 中完全可见。 如何在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)

            
        );
    
);

控制器：

    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;

【参考方案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");

                ,

还请查看 e.preventDefault 进行 ajax 调用。如果您使用 ajax 不必要地重新加载页面