ajax 错误 - laravel - crud - 此路由不支持 GET 方法。支持的方法：POST

Question

我想实现这个视图，其中只有几个字段被加载，很多...使用“Asignar”按钮我提取我需要填写表格字段的数据。 .. 问题是当更改数据并点击“Enviar IP”进行更新时，出于某种原因我收到错误“此路由不支持 GET 方法。支持的方法：POST。”但是这条路由配置为POST.

来自 index.blade 视图的脚本

function updateData(){
    var id = $('#id').val();
    var estado = $('#estado').val();
    var modalidad = $('#modalidad').val();
    var inspector = $('#inspector').val();
    var lugar = $('#lugar').val();

    $.ajax({
        type: "post",
        dataType: "json",
        data: {estado:estado, modalidad:modalidad, inspector:inspector, lugar:lugar},
        url: "/inspecciones/update/"+id,
        success: function(data){
            

            console.log('pericia asignada');
        }
    })


}

控制器

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Siniestro;
use App\Models\User;

class InspeccionController extends Controller
{
    public function index()
    {

        $users = User::all();
        $data = Siniestro::all();

        return view('inspecciones.index', compact('users','data'));
    }

    public function allData()
    {
        $data = Siniestro::orderBy('id', 'DESC')->get();
        return response()->json($data);
    }

    public function editData($id)
    {
        $data = Siniestro::findOrFail($id);
        return response()->json($data);
    }

    public function updateData(Request $request)
    {
        $data = Siniestro::findOrFail($id)->update([
            "inspector" => $request->siniestro,
            "estado" => $request->estado,
            "modalidad" => $request->modalidad,
            "lugar" => $request->lugar,
        ]);

        return response()->json($data);
    }
}

web.php - 路线

Route::POST('/inspecciones/update/{id}', [InspeccionController::class, 'updateData']);

index view

这里是mi HTML

@extends('layouts.app')

@section('content')
    <section class="section">
        <div class="section-header">
            <h3 class="page__heading">Derivar IP</h3>
        </div>
        <div class="section-body">
            <div class="row">
                <div class="col-sm-9">
                    <div class="card">
                        <div class="card-header">                          
                                Inspecciones coordinadas                        
                        </div>
                        <div class="card-body">
                            <table class="table table-sm m-1 p-1 table-bordered table-hover table-striped tablita" style="width:100%">
                                <thead>
                                    <tr>
                                        <th scope="col">Id</th>
                                        <th scope="col">Siniestro</th>
                                        <th scope="col">Fecha IP</th>
                                        <th scope="col">Estado</th>                                    
                                        <th scope="col">Modalidad</th>
                                        <th scope="col">Dirección</th>
                                        <th scope="col">Localidad</th>

                                        <th scope="col">Inspector</th>
                                        <th scope="col">Lugar</th>
                                        
                                        <th scope="col">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="card">
                    <div class="card-header">                          
                                <span id="asignarT">Asignar a perito</span>
                                <span id="enviarT">Enviar IP</span>                         
                        </div>
                        <div class="card-body">
                                    <div class="col-xs-12 col-sm-12 col-md-12">
                                        <div class="form-group">
                                            <label for="siniestro">Siniestro</label>
                                            <input type="text" name="siniestro" class="form-control"  id="siniestro" for="siniestro" >
                                        </div>
                                    </div>

                                    <div class="form-group">
                                    <label for="">Perito</label>
                                        <select class="form-select col-xs-12 col-sm-12 col-md-12" aria-label="Default select example" id="inspector"´for="inspector" name="inspector"">
                                                    <option selected value="">--seleccionar--</option>
                                                    @foreach ($users as $user)
                                                    <option value="{{ $user->id}}">{{ $user->name }}</option>
                                                    @endforeach
                                        </select>
                                    </div>
                                    <div class="form-group">
                                    <label for="estado">Estado</label>
                                    <select class="form-select col-xs-12 col-sm-12 col-md-12" aria-label="Default select example" id="estado" for="estado" name="estado">
                                            <option selected></option>
                                            <option value="Coordinado">Coordinado</option>
                                            <option value="Ausente">Ausente</option>
                                            <option value="Peritando">Derivado a inspector</option>
                                            <option value="Baja">Baja</option>
                                        </select>
                                    </div>
                                    <div class="col-xs-6 col-sm-6 col-md-6">
                                        <div class="form-group">
                                            <label for="fechaip">Fecha de IP</label>
                                            <input type="text"  class="form-control"  id="fechaip" for="fechaip" name="fechaip">
                                        </div>
                                    </div>
                                    <div class="col-xs-6 col-sm-6 col-md-6">
                                        <div class="form-group">
                                            <label for="direccion">Direccion</label>
                                            <input type="text"  class="form-control"  id="direccion" for="direccion" name="direccion">
                                        </div>
                                    </div>
                                    <div class="col-xs-6 col-sm-6 col-md-6">
                                        <div class="form-group">
                                            <label for="localidad">Localidad</label>
                                            <input type="text" name="localidad" class="form-control"  id="localidad" for="localidad" name="localidad">
                                        </div>
                                    </div>
                                    <div class="form-group">    
                                    <label for="modalidad">Tipo de inspeccion</label>
                                    <select class="form-select col-xs-12 col-sm-12 col-md-12" aria-label="Default select example" id="modalidad" for="modalidad" name="modalidad">
                                            <option selected></option>
                                            <option value="presencial">Presencial</option>
                                            <option value="videollamada">Videollamada</option>
                                            <option value="foto y presupuesto">Por foto y presupuesto</option>
                                            <option value="foto">Por foto</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label for="lugar">Lugar de inspección</label>
                                        <select class="form-select col-xs-12 col-sm-12 col-md-12" aria-label="Default select example" id="lugar" for="lugar" name="lugar">
                                            <option selected></option>
                                            <option value="TH">Taller homologado</option>
                                            <option value="Taller del asegurado">Taller del asegurado</option>
                                            <option value="Domicilio particular">Domicilio particular</option>
                                            
                                        </select>
                                    </div>

                                    <input type="hidden" id="id">
                                    <button type="submit" id="asignarButton" class="btn btn-primary btn-sm">Asignar a perito</button>
                                    <button type="submit" id="enviarButton" onclick="updateData()" class="btn btn-primary btn-sm">Enviar IP</button>
                                                      
                                                        
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

Answer 1

尝试使用 type="button" 或阻止默认操作

<button type="button" id="enviarButton" onclick="updateData()" class="btn btn-primary btn-sm">Enviar IP</button>

或

<button type="submit" id="enviarButton" onclick="updateData(event)" class="btn btn-primary btn-sm">Enviar IP</button>

并在 updateData(event) 函数中

//accept the event as parameter
function updateData(event){
    //prevent the default action
    event.preventDefault();

    var id = $('#id').val();
    var estado = $('#estado').val();
    var modalidad = $('#modalidad').val();
    var inspector = $('#inspector').val();
    var lugar = $('#lugar').val();

    $.ajax({
        type: "post",
        dataType: "json",
        data: {estado:estado, modalidad:modalidad, inspector:inspector, lugar:lugar},
        url: "/inspecciones/update/"+id,
        success: function(data){
            

            console.log('pericia asignada');
        }
    })

}

ajax 错误 - laravel - crud - 此路由不支持 GET 方法。支持的方法：POST

error with ajax - laravel - crud - The GET method is not supported for this route. Supported methods: POST

php

ajax

crud

laravel