ajax или jquery не показывает данные Laravel - PullRequest
Новая
       35

ajax или jquery не показывает данные Laravel

1 голос
/ 11 марта 2020

Я добавил поле поиска, чтобы показать мои данные в реальном времени, но ничего не работает, когда я заполняю это поле. Я создал маршрут под названием retour.action , и он находится в моем контроллере, поэтому при попытке console.log ('test') я вижу test в моей консоли на моем браузере, но остальная часть кода, который я сделал, не работает, и я также не получаю ошибку

вот мой контроллер 

public function action(Request $request)
    {
        if ($request->ajax()) {
            $output = '';
            $query = $request->get('query');
            if ($query != '') {
                $retours = Returnorder::all()
                    ->where('firmaname', 'like', '%' . $query . '%')
                    ->orWhere('ordernumber', 'like', '%' . $query . '%')
                    ->orWhere('status', 'like', '%' . $query . '%')
                    ->get();

            } else {
                $retours = Returnorder::latest('id')->paginate(15);
            }
            $total_row = $retours->count();
            if ($total_row > 0) {
                foreach ($retours as $retour) {
                    $output .= '
        <tr>
         <td>' . $retour->firmaname . '</td>
         <td>' . $retour->ordernumber . '</td>
         <td>' . $retour->status . '</td>
        </tr>
        ';
                }
            } else {
                $output = '<tr>
        <td align="center" colspan="5">Geen data gevonden</td>
       </tr>
       ';
            }
            $retours = array(
                'table_data' => $output,
            );

            echo json_encode($retours);
        }
    }

И это мой скрипт 

$(document).ready(function(){

    fetch_customer_data();

    function fetch_customer_data(query = '')
    {
        $.ajax({
            url:"{{ route('retour.action') }}",
            method:'GET',
            data:{query:query},
            dataType:'json',
            success:function(retours)
            {
                $('tbody').html(retours.table_data);
            }
        })
    }

    $(document).on('keypress', '#search', function(){
        let query = $(this).val();
        fetch_customer_data(query);
    });
});

А HTML это 

@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="mTop">
            <div class="row justify-content-center">
                <div class="col-md-10">
                    @if(session('message'))
                        <div class="alert alert-success" role="alert">
                            {{session('message')}}
                        </div>
                    @endif
                    <div class="card">
                        <div class="card-header">Retourmeldingen</div>
                        <div class="card-body">
                            <div class="form-group" >
                                <label for="search" hidden>Zoeken</label>
                                <input type="text" name="search" id="search" class="form-control"
                                       placeholder="Typ hier uw zoekopdracht in"/>
                            </div>
                            <table class="table table-hover">
                                <thead>
                                <tr>
                                    <th scope="col">Firmanaam</th>
                                    <th scope="col"></th>
                                    <th scope="col"></th>
                                    <th scope="col">Ordernummer</th>
                                    <th scope="col">Status</th>
                                    <th scope="col">Verwerkingstijd</th>
                                    <th scope="col">Inzenddatum</th>
                                    <th scope="col"></th>
                                </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

Помогите мне пожалуйста

1 Ответ

1 голос
/ 11 марта 2020

Я думаю, что сначала вам нужно убедиться, что то, что вы печатаете, на самом деле отправляется обратно на маршрутизатор. Вы можете получить значение того, что вы печатаете, используя это: 

$(function() {
  $('#search').on('keyup', (e) => {
    console.log(e.target.value);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="search" type="text" name="search" />
...