вызов маршрута через jquery или действие="" путаница

ProgramBox

вызов маршрута через jquery или действие=»» путаница

Post author:admin
Запись опубликована:18 января, 2022
Post category:Вопросы по программированию

#javascript #php #jquery #laravel

Вопрос:

У меня есть проблема, которую я не понимаю должным образом. Позвольте мне попытаться объяснить. Когда я вызываю маршрут, href="{{route=('name_of_route')}}" он действительно работает. Когда я вызываю один и тот же маршрут, jQuery on sumbit он тоже работает, но ведет себя по-другому. Некоторые фрагменты кода не выполняются, как dd(); (сейчас их нет в коде) и compact часть return view('CV_Test.excel',compact('like_values')); . Переменная не передается в представление. Часть базы данных и передача запроса контроллеру-все в порядке. Может кто-нибудь объяснить, почему? Вот мой код. Я попытался привести 2 примера. Надеюсь, теперь все в порядке, я задаю свой вопрос. Заранее спасибо.

Посмотреть пример 1

 @extends('layouts.app')

@section('content')
    <center>
        <div class="col-md-12">
            <h3>xlsx, xls, ods, csv to Text</h3>
            <form  id="xlsForm"  enctype="multipart/form-data">
                @csrf
                <input type="file" name="excelfile" />
                <input id="excelSubmit" type="submit"/>
            </form>
        </div>
    </center>
    <div class ="row">
        <div class ="col-md-3">
            <div class="container mt-5">
                <h2 id="words" class="mb-4">Skills found</h2>
            </div>
            @if(isset($like_values))
                <form id="xlsFormUpdate"  enctype="multipart/form-data">
                    @csrf
                    @foreach($like_values as $values)
                        <input type="checkbox" id="skillChoice" name="skills" checked>
                        <label for="skillChoice">{{$values}}</label><br>
                    @endforeach
                    <input id="skillSubmit" type="submit"/>
                </form>
            @endif
        </div>
        <div class ="col-md-9">
            @include('layouts.partials.datatable')
        </div>
    </div>   
@endsection

JS относится к примеру 1

 $('#xlsForm').submit(function uploadFile(event){
    event.preventDefault();
    $.ajax({
        url: "{{route('ExcelToArray')}}",
        method: "POST",
        data: new FormData(this),
        dataType: 'JSON',
        contentType: false,
        cache: false,
        processData: false,
        complete: function () {
            load_data()
        },
    });
});

Просмотрите пример 2 без Jquery

 extends('layouts.app')

@section('content')
    <center>
        <div class="col-md-12">
            <h3>xlsx, xls, ods, csv to Text</h3>
            <form href={{route('ExcelToArray')}} method ="post" id="xlsForm" enctype="multipart/form-data">
                @csrf
                <input type="file" name="excelfile" />
                <input id="excelSubmit" type="submit"/>
            </form>
        </div>
    </center>
    <div class ="row">
        <div class ="col-md-3">
            <div class="container mt-5">
                <h2 id="words" class="mb-4">Skills found</h2>
            </div>
            @if(isset($like_values))
                <form id="xlsFormUpdate"  enctype="multipart/form-data">
                    @csrf
                    @foreach($like_values as $values)
                        <input type="checkbox" id="skillChoice" name="skills" checked>
                        <label for="skillChoice">{{$values}}</label><br>
                    @endforeach
                    <input id="skillSubmit" type="submit"/>
                </form>
            @endif
        </div>
        <div class ="col-md-9">
            @include('layouts.partials.datatable')
        </div>
    </div>   
@endsection

Маршрут

 Route::post('/excel', [ExcelController::class , 'ExcelToArray'])->name('ExcelToArray');

Контроллер

 public function ExcelToArray (Request $excelFile) {
    $excelFile->validate([    
        'excelfile' => 'required|mimes:xlsx,xls,csv,html,ods',
    ]);
    $excelimport = new ExcelImport();

    Excel::import($excelimport, $excelFile->file('excelfile'));
    $clean_text = $excelimport->clean_text;
    $like_values = $this->get_matched_words_as_array($clean_text);
    DB::table('results')->truncate();

    foreach ($like_values as $key => $like_value) {
        $out = DB::Table('employees')->where('skills', 'like', '%' . $like_value . '%')->get();
        foreach ($out as $out_value) {
            $hit = $this->check_frequency($like_value,$out_value->skills);
            DB::Table('results')->insert([
                'skills' => $out_value->skills,
                'team' => $out_value->team,
                'email' => $out_value->email,
                'first_name' => $out_value->first_name,
                'last_name' =>$out_value->last_name,
                'hit' => $hit,
                'word' => $like_value,
            ]);
        }
    }
    return view('CV_Test.excel',compact('like_values'));
}

1. Является ли javascript в файле js или в вашем блейде? Посмотрите на источник в вашем браузере и убедитесь, что URL-адрес печатается правильно.

2. Привет @айнбер. Это в моем клинке. Как я уже сказал, это называется маршрутом. Я почти уверен, что с источником все в порядке.

3. Проверьте, какие параметры и значения на самом деле отправляются в каждом экземпляре, вы можете легко сделать это, проверив запрос в инструментах разработки браузера, на панели «Сеть».

4. Что же load_data() делать?

5. Привет @CBroe, хорошо, я внимательно посмотрю. Спасибо за ваш совет.

Ответ №1:

Таким образом, проблема была связана с тем фактом, что вызов маршрута через jquery требует, чтобы ответ контроллера обрабатывался «успешной» частью Ajax. Контроллер должен отправить данные в формате json в представление. Чтобы отобразить html желаемым образом, мне пришлось использовать метод .prepend для управления моим html. Вот мой код на случай, если кто-то заинтересуется.

     $('#xlsForm').submit(function uploadFile(event){
        event.preventDefault();
        $.ajax({
            url: "{{route('ExcelToArray')}}",
            method: "POST",
            data: new FormData(this),
            dataType: 'JSON',
            contentType: false,
            cache: false,
            processData: false,
            success:function (response) //<<<<<<<<added part begin
            {

               $("#inner").empty();
                $.each(response,function(index,value){
                    $("#inner").prepend('<input type="checkbox" id="skillChoice" name="skills"  checked>    <label for="skillChoice">' value '</label><br> ');
                });
            },                                //<<<<<<<<added part end
            complete:function ()
            {
                load_data()
            },
        });

контроллер

      public function ExcelToArray (Request $excelFile)

{
     $excelFile->validate([

        'excelfile' => 'required|mimes:xlsx,xls,csv,html,ods',

         ]);

    $excelimport = new ExcelImport();
    Excel::import($excelimport, $excelFile->file('excelfile'));
    $clean_text = $excelimport->clean_text; // Anforderung
    $like_values = $this->get_matched_words_as_array($clean_text); // Wörter die in Anfoderngsdokument gefunden wurden.
    DB::table('results')->truncate();
    //dd($like_values);

    foreach ($like_values as $key => $like_value) {

        $out = DB::Table('employees')->where('skills', 'like', '%' . $like_value . '%')->get();

        foreach ($out as $out_value)
        {
            $hit = $this->check_frequency($like_value,$out_value->skills);
            DB::Table('results')->insert([
                'skills' => $out_value->skills,
                'team' => $out_value->team,
                'email' => $out_value->email,
                'first_name' => $out_value->first_name,
                'last_name' =>$out_value->last_name,
                'hit' => $hit,
                'word' => $like_value,
            ]);

        }


    }

    return response()->json($like_values); //<<<<<< changed part 


    }

лезвие

     @extends('layouts.app')

    @section('content')

    <center>
        <div class="col-md-12">
        <h3>xlsx, xls, ods, csv to Text</h3>
        <form id="xlsForm"  enctype="multipart/form-data">
            @csrf
            <input type="file" name="excelfile" />
            <input id="excelSubmit" type="submit"/>
        </form>
    </div>
    </center>

    <div class ="row">
        <div class ="col-md-3">
            <div class="container mt-5">
                <h2 id="words" class="mb-4">Skills found</h2>
            </div>
                <form id="xlsFormUpdate"  enctype="multipart/form-data">
                    @csrf

                    <div id="inner">   <!--div to manipulate-->
                    </div>

                    <input id="skillSubmit" type="submit"/>
                </form>

        </div>
    <div class ="col-md-9">
    @include('layouts.partials.datatable')
    </div>

    </div>


@endsection

Метки: вызов маршрута через jquery или действие=»» путаница

Вопрос:

Комментарии:

Ответ №1:

Вам также может понравиться

kotlin DSL sql builder с объектами даты

Почему эта программа работает, когда число «угадай» генерируется случайным образом, но не тогда, когда оно основано на среднем значении верхней и нижней границы?

Cocoapods Traceback не удалось найти ‘json’ (> = 1.5.1) среди 41 общего количества драгоценных камней (Gem:: MissingSpecError)