ajax laravel 遇到一个非数字值

Question

我的表格是这样的

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

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

    <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) {
                $('.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(data) {
                    let html = '';
                    $.each(data, function (key, val) {
                        $('#data').append("<tr>"+
                            "<td>"+val.id+"</td>"+
                            "<td>"+val.employment_type+"</td>"+
                            "<td>"+val.start_date+"</td>"+
                            "<td>"+val.end_date+"</td>"+
                            "<td>"+val.state+"</td>"+
                            "<td>"+val.city+"</td>"+
                            "<td>"+
                            '<form action="{{ route('job.destroy',+'val.id') }}" method="post">'+
                            '@csrf'+
                            '@method('DELETE')'+
                            '<div class="btn-group">'+
                            '<a href="{{ route('job.edit',+'val.id') }}" class="btn btn-info btn-sm">Edit</a>'+
                            '<button type="submit" class="btn btn-danger btn-sm">Delete</button>'+
                            '</div>'+
                            '</form>'+
                            "</td>"+
                            "</tr>"
                        )});
                    $('#showJobs').append(html);
                }
            });
        </script>
    @endsection

控制器

<?php

namespace App\Http\Controllers;

use App\Http\Requests\JobRequest;
use App\Job;
use Illuminate\Http\Request;

class JobController extends Controller
{
    public function store(Request $request)
    {
        Job::create([
            'user_id' => auth()->id(),
            'employment_type' => $request->employment_type,
            'job_type' => $request->job_type,
            'post_title' => $request->post_title,
            'history' => $request->history,
            'state' => $request->state,
            'city' => $request->city,
            'start_date' => $request->start_date,
            'end_date' => $request->end_date,
        ]);
        return redirect()->back();
    }

    public function edit(Job $job)
    {
        return view('Home.edits.job', compact('job'));
    }

    public function update(Request $request, Job $job)
    {
        $data = [
            'employment_type' => $request->employment_type,
            'job_type' => $request->job_type,
            'post_title' => $request->post_title,
            'history' => $request->history,
            'state' => $request->state,
            'city' => $request->city,
            'start_date' => $request->start_date,
            'end_date' => $request->end_date,
        ];
        $job->update($data);
        return redirect()->route('home');
    }
    public function destroy(Job $job)
    {
        $job->delete();
        return redirect()->back();
    }
}

这是我的控制台

我收到此错误

Answer 1

最好为该文件创建视图并从控制器返回视图，而不是附加在 javascript 中

第一个控制器必须返回视图或 json 但它返回重定向。

  public function store(Request $request)
  {
       Job::create([
            'user_id' => auth()->id(),
            'employment_type' => $request->employment_type,
            'job_type' => $request->job_type,
            'post_title' => $request->post_title,
            'history' => $request->history,
            'state' => $request->state,
            'city' => $request->city,
            'start_date' => $request->start_date,
            'end_date' => $request->end_date,
        ]);
       $jobs= Job::get();
        return view('jobdetail',compact('jobs'));
   }

和工作细节刀片

@foreach($jobsas $key=>$value)
        <tr>
            <td>{{$value->id}}</td>
            <td>{{$value->employment_type}}</td>
            <td>{{$value->start_date}}</td>
            <td>{{$value->end_date}}</td>
            <td>{{$value->state}}</td>
            <td>{{$value->city}}</td>
            <td>
                <form action={{ route('job.destroy',$value->id) }} method=post>
                    @csrf
                    @method('DELETE')
                    <div class=btn-group>
                        <a href={{ route('job.edit',$value->id) }} class=btn btn-info btn-sm>Edit</a>
                        <button type=submit class=btn btn-danger btn-sm>Delete</button>
                    </div>
                </form>
            </td>
        </tr>
    @endforeach

在 JavaScript 中

 $.ajax({
       type:'POST',
       url,
       data:formData,
       cache:false,
       contentType: false,
       processData: false,
       success:function(data){
               $('#showJobs').html(data);
              },
       error: function(data){
                 console.log("error");
                 console.log(data);
              }
    });
     

另外，如果您想附加最后创建的作业详细信息，那么

public function store(Request $request)
      {
           $job=Job::create([
                'user_id' => auth()->id(),
                'employment_type' => $request->employment_type,
                'job_type' => $request->job_type,
                'post_title' => $request->post_title,
                'history' => $request->history,
                'state' => $request->state,
                'city' => $request->city,
                'start_date' => $request->start_date,
                'end_date' => $request->end_date,
            ]);
           
            return view('jobdetail',compact('job'));
       }

然后在查看jobdetail

<tr>
            <td>{{$job->id}}</td>
            <td>{{$job->employment_type}}</td>
            <td>{{$job->start_date}}</td>
            <td>{{$job->end_date}}</td>
            <td>{{$job->state}}</td>
            <td>{{$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>Edit</a>
                        <button type=submit class=btn btn-danger btn-sm>Delete</button>
                    </div>
                </form>
            </td>
        </tr>

在 JavaScript 中

 $.ajax({
        type:'POST',
        url,
        data:formData,
        cache:false,
        contentType: false,
       processData: false,
       success:function(data){
                $('#showJobs').append(data);
               },
       error: function(data){
               console.log("error");
               console.log(data);
              }
       });