javascript - 通过 jquery 或 action="" 混淆调用路由

Question

我有一个我没有正确理解的问题。让我试着解释一下。当我通过它调用路线时，href="{{route=('name_of_route')}}"它确实有效。当我通过它调用相同的路线时，jQuery on sumbit它也可以工作，但它的行为不同。一些代码片段没有像dd();（现在不在代码中）compact和return view('CV_Test.excel',compact('like_values'));. 该变量未传递给视图。数据库部分并将请求传递给控制器​​都很好。有人可以解释为什么吗？这是我的代码。我试着举两个例子。我希望现在可以，我在问我的问题。提前致谢。

查看示例 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()
        },
    });
});

查看不带 Jquery 的示例 2

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'));
}

标签： javascriptphpjquerylaravel

Answer 1

所以问题与通过 jquery 调用路由需要控制器的响应由Ajax的“成功”部分 处理的事实有关。控制器必须将 json 格式的数据发送到视图。为了以所需的方式呈现 html，我必须使用.prepend方法来操作我的 html。这是我的代码，以防有人感兴趣。

JS

    $('#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