怎么在Laravel中利用AJAX動態刷新部分頁面

怎么在Laravel中利用AJAX動態刷新部分頁面？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

首先在view中增加一個meta tag：

<meta name="csrf-token" content="{{ csrf_token() }}">

然后在我們的my-ajax-add-tea-consumption.js中，加上：

$.ajaxSetup({
 headers: {
  'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
 }
});

這樣就可以了。然后我們開始添加ajax函數（首先是增加模塊）：

$('button[name="btn-add"]').click( function() {
 //route format: /orders/{id}/add-tea-consumption
 $.post('/orders/' +　$('input[name="order_id"]').val() 　+　'/add-tea-consumption'), function( html ) {
  $('.tea-consumption').append( html );
 });
});

看起來很簡單吧，但是要注意的幾個地方有：

Button的type一定要寫為button，而缺省的話默認type=”submit”，這樣一旦button被點擊頁面就會跳轉。

post的url我們填的是laravel中的route（稍后在routes中我們還會敘述）

callback function中的數據html是由controller函數中使用某個view所返回的html代碼

好了，那么現在我們的$.post() call會后臺訪問/orders/{id}/add-tea-consumption這樣形式的路徑，所以我們在\routes\web.php中加上我們的路徑名和處理方式：

route::post('/orders/{id}/add-tea-consumption', 'RoomOrdersController@add_tea_consumption');

即我們希望由RoomOrdersController這個控制器中的add_tea_consumption函數來處理我們的ajax請求。那么我們一起來看一下這個函數到底有些什么內容：

<?php   //RoomOrdersController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\RoomOrder;
use App\RoomTeaConsumption;

class RoomOrdersController extends Controller
{
 ...

 /**
 * Return view fragments in html form
 *
 * @param $order_id
 * @return \Illuminate\Http\Response
 */
 public function add_tea_consumption ( $order_id ) {
  $consumption = RoomTeaConsumption::create([
   'room_order_id' => $order_id
   /* more fields omitted */
  ]);

  return view('partials.tea_consumption')->with([
   'tea_consumption' => $consumption
   /* more fields omitted */
  ]);
 }
}

其實跟平時我們controller中的函數并沒有什么區別，因為我們需要返回的本來就是html代碼，而調用view()的時候，Laravel已經幫我們生成好了。

這樣一來，當ajax call成功返回時，$('.tea-consumption').append( html );就會將view生成的html代碼插入我們指定的DOM中，從而動態刷新頁面。

值得注意的是，如果你發現你的ajax call返回internal 500錯誤，那么首先請檢查你的csrf是否已經設置好，如果確認沒有問題，那么請檢查你的view template文件，只要其中有錯誤，那么就無法返回html，從而造成錯誤。

要刪除模塊，其實是差不多的，但是要注意的是，我們的listener不能使用.click()來注入，因為當模塊被刪除后，.click()注入的listener就會失效，我們需要使用parent的.on()函數：

('.tea-consumption').on('click', '#my-button', function() {
 $.ajax({
  method: 'DELETE',
  url: '/teas/consumption/' +　$('this').next('input').val() + '/delete',
  success: function( id ) {
   var sel = $('#tea-card-' + id);
   sel.remove();
  }
 });
});

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。