首页 > 解决方案 > 将 ajax 数据发送到路由以调用控制器方法

问题描述

我正在尝试将 ajax 数据传递给带有参数的“settings/addsection/{class_id}”路由,以便调用控制器方法来登录 laravel 日志文件。但记录不起作用。所以ajax没有向路由发送数据。我该如何解决这个问题?.. 请注意,我传递给隐藏输入的 $class_id 具有我从数据库中查询的值。

JAVASCRIPT

<script>

    document.addEventListener('DOMContentLoaded' , function(){

       var add =  document.getElementById('addSection');
       add.addEventListener('submit' , function(e){
            e.preventDefault();
            var class_id = document.getElementById('class_id').value;
            var section = document.getElementById('name').value;
            var token = document.getElementsByName('_token')[0].value;

            var data = {
                name:section,
                _token:token
            }

            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'settings/addsection/' + class_id, true);
            xhr.setRequestHeader('Content-Type' , 'application/json');
            xhr.send(JSON.stringify(data));

       })
    })

</script>

HTML

form id = "addSection" method="POST" action=" {{ url('settings/addsection/' .$class_id)}}">
                                @csrf
                                <div class="form-group row">
                                    <label for="name" class="col-md-4 col-form-label text-md-right">{{ __('add section') }}</label>
                                    <div class="col-md-6">
                                       <input id="name" name="name" type="text" class="form-control @error('name') is-invalid @enderror" value="{{ old('name') }}"  autocomplete="name" autofocus placeholder="A,B,C...Z">
                                        <input type="hidden" id = "class_id" value = "{{$class_id}}">

                                        @error('name')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="form-group row mb-0">
                                    <div class="col-md-6 offset-md-4">
                                        <button type="submit" class="btn btn-primary btn-block">
                                            {{ __('Add add section') }}
                                        </button>
                                    </div>
                                </div>

                            </form>

这是路由所在的 web.php

Route::middleware(['auth' , 'admin'])->group(function(){
    Route::prefix('settings')->group(function(){
        Route::post('addsection/{class_id}' , 'SectionController@store');
    });

});

节控制器

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Log;
use App\Section;

class SectionController extends Controller
{
    public function store(Request $request , $class_id){
        //do stuff here
        Log::info(' it works');
    }
}

标签: ajaxlaravellaravel-5

解决方案


我通过改变这个来解决这个问题

xhr.open('POST', 'settings/addsection/' + class_id, true);

xhr.open('POST', "{{url('settings/addsection/')}}" + '/' +class_id, true);


推荐阅读