在ajax laravel中添加数据后如何显示数据？

Question

我的表格是这样的

我正在做一个项目，我想知道在使用 Laravel 或 jQuery 的结构之间必须在具有复杂结构 HTML 的数据库上插入记录之后，哪种是显示数据的最佳方式。

我正在建立一个工作系统。当用户写帖子并发布它时，调用 ajax 会触发函数 Laravel 并将信息插入到数据库中。直到这里一切正常，但是我必须在用户的墙上显示消息插入，所以没有工作。

<form id="job-store" method="post">
    <input type="hidden" value="{{ route('job.store') }}" name="url" />
    @csrf
    <div class="row">
        <div class="col-md-6 mb-3">
            <label for="employment_type">نوع استخدام</label>
            <select class="form-control selectpicker" title="چیزی انتخاب نشده است" id="employment_type" name="employment_type">
                <option value="حق التدریس">حق التدریس</option>
                <option value="رسمی">رسمی</option>
                <option value="پیمانی">پیمانی</option>
                <option value="قراردادی">قراردادی</option>
            </select>
        </div>
        <div class="col-md-6 mb-3">
            <label for="job_type">عنوان شغلی</label>
            <select class="form-control selectpicker" title="چیزی انتخاب نشده است" id="job_type" name="job_type">
                <option value="مربی درون سازمانی">مربی درون سازمانی</option>
                <option value="مربی حق التدریس">مربی حق التدریس</option>
                <option value="صنعتکار">صنعتکار</option>
                <option value="مدرس دانشگاه">مدرس دانشگاه</option>
                <option value="استادکار مهارتی">استادکار مهارتی</option>
                <option value="سایر">سایر</option>
            </select>
        </div>
        <div class="col-md-6 mb-3">
            <label for="history">سابقه (سال)</label>
            <input type="text" class="form-control" id="history" name="history">
        </div>
        <div class="col-md-6 mb-3">
            <label for="post_title">عنوان پست</label>
            <input type="text" class="form-control" id="post_title" name="post_title">
        </div>
        <div class="col-md-6 mb-3">
            <label for="state">استان محل خدمت</label>
            <input type="text" class="form-control" id="state" name="state">
        </div>
        <div class="col-md-6 mb-3">
            <label for="city">شهر محل خدمت</label>
            <input type="text" class="form-control" id="city" name="city">
        </div>
        <div class="col-md-6 mb-3">
            <label for="start_date">تاریخ شروع به كار</label>
            <date-picker type="date" id="start_date" name="start_date"></date-picker>
        </div>
        <div class="col-md-6 mb-3">
            <label for="end_date">تاریخ خاتمه كار</label>
            <date-picker type="date" id="end_date" name="end_date"></date-picker>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 mb-3">
            <button type="submit" class="btn btn-success job-store"><i class="fas fa-plus fa-xs"></i> افزودن</button>
        </div>
    </div>
</form>
<div class="table-responsive">
    <table class="table table-striped">
        <thead>
        <tr>
            <th>ردیف</th>
            <th>نوع استخدام</th>
            <th>تاریخ شروع کار</th>
            <th>تاریخ خاتمه کار</th>
            <th>استان محل خدمت</th>
            <th>شهر محل خدمت</th>
            <th>اکشن</th>
        </tr>
        </thead>
        <tbody id="showJobs">

        </tbody>
    </table>
</div>

@section('script')
    <script>
        $(document).ready(function (e) {
            showJobs();
            function showJobs() {
                let html = '' +
                    '@foreach(auth()->user()->jobs as $job)'+
                    '<tr>'+
                    '<td class="fw-normal">{{ $job->id }}</td>'+
                    '<td class="fw-normal">{{ $job->employment_type }}</td>'+
                    '<td class="fw-normal">{{ $job->start_date }}</td>'+
                    '<td class="fw-normal">{{ $job->end_date }}</td>'+
                    '<td class="fw-normal">{{ $job->state }}</td>'+
                    '<td class="fw-normal">{{ $job->city }}</td>'+
                    '<td>'+
                    '<form action="{{ route('job.destroy', $job->id) }}" method="post">'+
                    '@csrf'+
                    '@method('DELETE')'+
                    '<div class="btn-group">'+
                    '<a href="{{ route('job.edit', $job->id) }}" class="btn btn-info btn-sm">ویرایش</a>'+
                    '<button type="submit" class="btn btn-danger btn-sm">حذف</button>'+
                    '</div>'+
                    '</form>'+
                    '</td>'+
                    '</tr>'+
                    '@endforeach';
                $('#showJobs').append(html);
            }
        });
    </script>
@endsection

另外，没有错误

Answer 1

您必须将 showJobs() 放入成功回调中，并且返回的数据将循环映射到其中

 $(document).ready(function (e) {
        $('.job-store').on('click',(function(e) {
            e.preventDefault();
            var formData = new FormData($('#job-store')[0]);
            let url = $('#job-store :input')[0].getAttribute('value');
            $.ajax({
                type:'POST',
                url,
                data:formData,
                cache:false,
                contentType: false,
                processData: false,
                success:function(data){
                    console.log("success");
                    console.log(data);                    
                     showJobs(data);
                },
                error: function(data){
                    console.log("error");
                    console.log(data);
                }
            });
        }));
       
        function showJobs(jobs) {
            let html = jobs.map(job=>{
             return   '<tr>'+
                '<td class="fw-normal">{{ '+job.id+' }}</td>'+
                // Some logic herer
                '</td>'+
                '</tr>'+
            })
               
          
            $('#showJobs').append(html);
        }
    });

你还弄乱了 Laravel 刀片和 ajax，你不能在 js 中使用刀片方法，你必须使用正确的 URL 进行重定向。

Answer 2

替代您可以使用刀片文件来返回 ajax 调用，这消除了复杂性。 这里我展示了 3 个文件。

调用 ajax 的刀片

$("#branch").change(function (e){
        var branchId = $(this).val()
        var target = e.target;

        $.ajax({
            method: 'GET',
            url: target.dataset.url,
            data: {'branchId': branchId},
            success: function (result) {
                $('#department_parent').removeAttr('hidden');
                $('#department').empty().append(result);
                $('.select-2').select2();
            }
        })
    })

在 ajax 调用工作的控制器中

public function getDepartment(Request $request)
    {
        $departments = Department::where('branch_id', $request['branchId'])->get();

        return view('admin.employee_requisition._department_selection',[
            'departments' => $departments
        ]);
    }

我在 ajax 响应而不是数据中返回的 balde 文件：

@if(count($departments) > 0)
    <option selected>Select department</option>
    @foreach($departments as $department)
        <option value="{{$department->id}}">{{$department->name}}</option>
    @endforeach
@else
    <option value="">No Department found for this branch</option>
@endif