#利用Javascript進行Ajax前後端溝通

1.首先開啟web底下index.blade檔案,

設計一個按鈕,當按鈕執行時,進行確認資料庫數量是否足夠,並增加data-id={{$product->id}}將資料暫存

<tbody>
        @foreach ($products as $product)
        <tr>
            @if ( $product->id ==1)
            <td class="special-text">{{ $product ->title }}</td>
        @else 
            <td>{{ $product ->title }}</td>
        @endif
            <td>{{ $product ->content }}</td>
            <td>{{ $product ->price }}</td>
            <td><input class="check_product" type="button" value="確認商品數量" data-id="{{$product->id }}"></td>
        </tr> 
        @endforeach
    </tbody>

2.接著來到jQuery CDN

並使用minified,來引用jQuery,並貼在table之後

3.接著再新增一個<script>標籤來做Javascript邏輯及控制

<script>
$('.check_product').on('click',function(){
    $.ajax({
        method:'POST',
        url: '/products/check-product',
        data: {id: $(this).data('id')}
    })
    .done(function(response){
        if(response){
            alert('商品數量充足')
        }
        else{
            alert('商品數量不夠')
        }
    })

})
</script>

4.然後設定路由

Route::post('/products/check-product', 'ProductController@check-product');

5.設定好後來到ProductController設定相關函式

先建立一個變數$id,並透過前端傳來的$request撈到後端資料

public function checkProduct(Request $request){
        $id = $request->all();
        dd($id);
    }

6.利用網頁工具查看是否有獲取資料,打開F12,接著點擊按鈕利用NETWORK查看XHR

可以看到他打了一個Ajax出去而php回傳的狀況

7.接著成功取得$request後,繼續往下完整程式碼

public function checkProduct(Request $request){
        $id = $request->all()['id'];
        $product = Product::find($id);
        if($product->quantity > 0) {
            return response(true);
        }
        else{
            return response(false);
        }
    }