Question

我只是laravel的初学者，我正在使用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代码。

我们应该解决两个主要问题，以便获得您所期望的结果：

将新的酒记录发送回JSON成功响应。
当response.type为“成功”时更新DOM。

因此，首先，我们尝试修复后端。这很简单，我们只需要包含 JSON响应上的$liquorInventory（在您的storeLiquorInventory方法中）：

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

现在，在JS部分，我们应该更改DOM，我不知道您的HTML树是什么样子，但我会尽力给您一个想法。首先在您的JS文件上编辑addLiquor函数，在该函数中我们将从响应中检索newLiquor，捕获要在其中使用jquery添加新酒的List，然后将所需的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>`;
}

当然，这只是一个例子，我不知道您的“酒”成分是什么样子。

如何使用ajax显示插入的记录？

1 个答案: