1.向ajaxTest模板頁面傳資料

將Test表中的資料傳遞給ajaxTest模板

class User extends Controller
{
    public function ajaxShow () {
        $data = Test::all();
        return view('ajaxTest',compact('data'));
    }
}

2.控制器
取到提交過來的id，然後從資料庫中找到這條資料，並更新資料，最後返回一個

class indexCo extends Controller
{
     public function change (Request $request) {
        //   dd($request -> all()); 表單過來的所有資料
        $id = $request -> input('id');
        // 將post請求傳遞過來的id取出，並通過id主鍵 找到 這條資料 
        $obj  = Test::find($id);
        $obj -> score = $request -> input('score');
        $re = $obj -> save();
        if ($re) {
            $data = [
                'status' => 0,
                'msg' => '分數修改成功'
            ];
        } else {
            $data = [
                'status' => 1,
                'msg' => '分數修改失敗'
            ];
        }
        return  json_encode($data);
    }
}
 

3.ajaxTest.blade.php 模板檔案 接受傳過來的data並做渲染
引入layer彈框，根據不同狀態顯示不一樣的彈框icon。

<table class="add_tab" border="1" style="border-collapse:collapse;">
        <tr>
            <th>姓名</th>
            <th>分數</th>
            <th>科目</th>
            <th>改分數</th>
        </tr>
        
        @foreach($data as $v)
            <tr>           
                <td>{{$v -> name}}</td>
                <td id="a">{{$v -> score}}</td>
                <td>{{$v -> subject}}</td>
                <td style="padding:5px 20px;">
                    <input type="text" onchange="fn(this,{{$v -> id}})">
                </td>  
            </tr>     
        @endforeach
        
</table>


<script src="{{URL::asset('js/jquery.min.js')}}"></script>
<script src="{{URL::asset('js/layer.js')}}"></script>
<script>
    function fn(obj,id) {
        // 獲取到input框中輸入的值
        var newScore = obj.value
        // console.log(obj.value)
        $.ajax({
            type: 'POST',
            url:"{{url('change')}}",
            data: {
                "_token": "{{ csrf_token() }}",
                "id": id,
                "score": newScore
            },
            success: function (data) {
                console.log(data);
                var data  = JSON.parse(data)
                if (data.status == 0) {
                    layer.alert(data.msg,{icon:6}) 
                    // location.reload();
                } else {
                    layer.alert(data.msg,{icon:5}) 
                }                            
            },
            error: function (reject) {
                console.log(reject);
            }
        });
    }
</script>