Как я могу отобразить мою вставленную запись с ajax?

Question

Я только начинающий в laravel, я вставляю данные в свою базу данных, используя ajax, но время отображения почему-то ajax не работает, я просто хочу, чтобы я хотел вставлять и отображать данные, используя ajax.

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

это мой контроллер для вставки ликерного продукта

public function storeLiquorInventory(LiquorProductRequest $request)
    {
        $liquorInputs = $request->only($this->fillableLiquorItem);
        try{
            $liquorInputs['created_by'] = auth()->user()->id;
            $liquorInputs['updated_by'] = auth()->user()->id;
            $liquorInventory = StandLiquorInventory::create($liquorInputs);
            return response()->json(['type' => 'success']);
        }
        catch(Exception $ex) {
            return response()->json(['type' => 'error']);
        }
    }

Это метод для отображения данных

public function show($id)
    {
        $stand = Stand::with('standsLiquor', 'standsNonChargeable')->findOrFail($id);

        $standUserList = EventStandUser::select('user_id')->where('stand_id',$id)->with(['user'=>function($q){ return $q->selectRaw('id,concat(first_name," ",last_name) as fullname')->where('status','approved');}])->get()->map(function($cu){
            return ['id'=>$cu->user->id,'fullname'=>$cu->user->fullname];
        })->pluck('fullname','id');

        return view('admin.stand.index',compact('stand','standUserList'));
    }

Это мои маршруты

    Route::resource('stand-sheet', 'Admin\StandSheetController');
    Route::post('stand-sheet/store-liquor', 'Admin\StandSheetController@storeLiquorInventory');

Это мой код файла js

$(document).ready(function () {
    if($('stand_liquor_table').length > 0) {
            ajax: {
            url: "/stand-sheet",
            data: function (d) {
                    d.type = $('#stand_liquor_table select[name=type]').val();
                    d.brand = $('#stand_liquor_table select[name=brand]').val();
                    d.start = $('#stand_liquor_table select[name=start]').val();
                    d.xfer_in = $('#stand_liquor_table select[name=xfer_in]').val();
                    d.end = $('#stand_liquor_table select[name=end]').val();
                    d.used = $('#stand_liquor_table select[name=used]').val();
                },
            type: 'POST',
            dataSrc: function(json) {
                for (var i = 0; i < json.data.length; i++) {
                    json.data[i].type = json.data[i].type;
                    json.data[i].brand = json.data[i].brand;
                    json.data[i].start = json.data[i].start;
                    json.data[i].xfer_in = json.data[i].xfer_in;
                    json.data[i].end = json.data[i].end;
                    json.data[i].used = json.data[i].used;
                }
                return json.data;
            },

            columns: [
                { data: 'type', name: 'type' },
                { data: 'brand', name: 'brand' },
                { data: 'start', name: 'start' },
                { data: 'xfer_in', name: 'xfer_in' },
                { data: 'end', name: 'end' },
                { data: 'used', name: 'used' },
            ],
        }
    }

  });

   addLiquor = function (form) {
        registerAjaxCall('/stand-sheet/store-liquor', 'POST', $(form).serializeArray(), function (response) {
            if (response.type == 'success') {
                // console.log($(form).serializeArray());
                $('#addNewLiquorModel').modal('hide');
                toast('Success', 'Liquor Successfully Added', 'success');
            }else {
                toast('Error', 'Failed to add liquor', 'error');
            }
        });
        return false;
    };

Answer 1

Отправка ответа с помощью AJAX не означает, что страница HTML будет обновлена ​​сама по себе, единственный способ сделать это - использовать javascript и изменить код HTML.

Есть две основные проблемы, которые мы должны решить, чтобы вы могли получить ожидаемый результат:

1. отправьте обратно новую запись ликера в вашем ответе об успехе JSON.

2. обновить DOM, когда response.type имеет значение «success».

Итак, давайте сначала попробуем исправить бэкэнд. это довольно просто, нам просто нужно включить $liquorInventory в ответе JSON (в вашем методе storeLiquorInventory):

return response()->json(['type' => 'success' , 'newLiquor' => $liquorInventory ]);

Теперь, в части JS, мы должны изменить DOM, я не знаю, как выглядит ваше HTML-дерево, но я постараюсь дать вам идею. начните с редактирования функции addLiquor в вашем файле JS, где мы получим newLiquor из ответа, захватим список, в который мы хотим добавить наш новый ликер, с помощью jquery и добавим нужный DOM в дерево.

 if (response.type == 'success') {
                // console.log($(form).serializeArray());
                $('#addNewLiquorModel').modal('hide');
                toast('Success', 'Liquor Successfully Added', 'success');
                var LiquorList = $('#liquorList'); // select your list parent
                // include the HTML code that you want to add ( i'll use a separate function )
               liquorList.innerHTML = liquorList.innerHTML + createLiquorDOM(response.newLiquor)
}

функция createLiquorDOM примет ликер, полученный сервером в качестве параметра, и вернет HTML-код, который мы добавим в наш список

function createLiquorDOM( liquor ) {
return `<li>
          <p> name : ${liquor.name} </p> 
          <p>price : ${liquor.price}</p>
       </li>`;
}

конечно, это всего лишь пример, я не знаю, как выглядит ваш «ликворный» компонент.