將JSON資料（通過使用Ajax）傳遞給ViewLaravel中的表

我是 Laravel 的新手，并試圖在內部專案中自學。

嘗試將 json 資料傳遞給表以顯示相同的資料。在 json 中接收到的資料是可以的，但不能在表中放入相同的資料

控制器：

public function getmilkrecordforbid(Request $req) 
                {
                    $bidformilk = $req->bidformilkrecord;
            
                    $bmilkrecord    = buffalomilkrecord::where('buffaloID', '=', $bidformilk)- 
                    >get(); 
     
                   return ($bmilkrecord);
                }

網頁.php

       Route::post('/getmilkrecordforbid'[BuffalodataController::class,'getmilkrecordforbid'])

ajax 檔案

              $('#selectid').on('change', function() {

                var bidformilkrecord = $('#selectid').val(); 

                    $.ajax({  
                        url         :   '/getmilkrecordforbid', 
                        dataType    :   "json",
                        method      :   "POST",
                        data        :   {'bidformilkrecord': bidformilkrecord, "_token":"{{ 
                                        csrf_token()}}"},

                    success: function(data){ 
                        
                        console.log(data)
                        console.log(data.length)
                    },  
                });
            });

控制臺日志

       (4) [{…}, {…}, {…}, {…}]0: {id: 5, buffaloID: 'Buffalo-02', date: '2020-12-15', milkmorning: '5.00', milkevening: '6.00', …}1: {id: 6, buffaloID: 'Buffalo-02', date: '2020-12-16', milkmorning: '5.00', milkevening: '5.00', …}2: {id: 7, buffaloID: 'Buffalo-02', date: '2020-12-17', milkmorning: '5.00', milkevening: '5.00', …}3: {id: 8, buffaloID: 'Buffalo-02', date: '2020-12-18', milkmorning: '5.00', milkevening: '5.00', …}length: 4[[Prototype]]: Array(0)

表格 html

       <table id="milksummery" class="table table-bordered table-hover table" 
             style="width:100%">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Morning Milk</th>
                    th>Evening Milk</th>
                    <th>Total Milk</th>
                </tr>
            </thead>

            <tbody>
                                                
            </tbody>

    </table>

您的指導對我很有幫助.......

uj5u.com熱心網友回復：

您只需要在成功事件上操作 DOM。我們正在獲取第一個 tbody 元素并為其添加更多元素。

這是帶有更新 DOM 的代碼。

$('#selectid').on('change', function() {

        var bidformilkrecord = $('#selectid').val(); 

            $.ajax({  
                url         :   '/getmilkrecordforbid', 
                dataType    :   "json",
                method      :   "POST",
                data        :   {
                    'bidformilkrecord': bidformilkrecord,
                    "_token": "{{ csrf_token() }}"
                },
            success: function(data){ 
                console.log(data)
                console.log(data.length)

                let tbody = document.getElementsByTagName("tbody")[0];

                for (let i = 0; i < data.length; i  ) {
                    let milkSummeryRow = tbody.insertRow();
                    let dateCell = milkSummeryRow.insertCell();
                    let dateText = document.createTextNode(data[i]['date']);
                    dateCell.appendChild(dateText);
                    
                    let milkMorningCell = milkSummeryRow.insertCell();
                    let milkMorningText = document.createTextNode(data[i]['milkmorning']);
                    milkMorningCell.appendChild(milkMorningText);

                    let milkEveningCell = milkSummeryRow.insertCell();
                    let milkEveningText = document.createTextNode(data[i]['milkevening']);
                    milkEveningCell.appendChild(milkEveningText);

                    let milkTotalCell = milkSummeryRow.insertCell();
                    let milkTotalText = document.createTextNode(parseFloat(data[i]['milkmorning'])   parseFloat(data[i]['milkevening']));
                    milkTotalCell.appendChild(milkTotalText);
                }

            },  
        });
    });

標籤：

上一篇：僅當Image的Source屬性不為空時，如何啟用背景關系選單項？

下一篇：如何使用in_array與belongsToMany關系？