欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

在Laravel中實(shí)現(xiàn)使用AJAX動(dòng)態(tài)刷新部分頁(yè)面

 更新時(shí)間：2019年10月15日 09:58:11   作者：EagleMaze  
今天小編就為大家分享一篇在Laravel中實(shí)現(xiàn)使用AJAX動(dòng)態(tài)刷新部分頁(yè)面，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

AJAX相信大家都不陌生，有很多不同的Javascript Frameworks可以用來(lái)快速實(shí)現(xiàn)AJAX功能。那么今天我們一起來(lái)看一下如何在使用了PHP Frameworks的網(wǎng)站中使用AJAX來(lái)刷新頁(yè)面的一小部分。

這里我使用的是jQuery + Laravel（當(dāng)然如果使用了其他框架，基本的概念也是不變的）。如圖，假設(shè)我們制作了一個(gè)頁(yè)面來(lái)管理客戶的茶葉消耗：

我們想制作一個(gè)模塊來(lái)動(dòng)態(tài)為每一個(gè)新的茶葉消耗增加一個(gè)消耗選擇區(qū)，即點(diǎn)擊新增消耗后，會(huì)動(dòng)態(tài)增加一個(gè)新的茶葉消耗區(qū)域：

另外，當(dāng)點(diǎn)擊刪除該消耗時(shí)，該消耗區(qū)域會(huì)動(dòng)態(tài)刪除。

要實(shí)現(xiàn)這樣的功能，我們的基本思路如下（MVC Pattern）：

使用AJAX POST call來(lái)調(diào)用Controller的函數(shù)

Controller返回我們所需的View中的HTML代碼片段

調(diào)用AJAX callback函數(shù)動(dòng)態(tài)將HTML代碼片段插入到頁(yè)面中

那么首先我們先創(chuàng)建我們的js文件，在這里我新建了一個(gè)叫my-ajax-add-tea-consumption.js的文件，并放在了/public/js文件夾中。我們?cè)趘iew模板中使用<script></script>調(diào)用：

<!DOCTYPE html>
<html lang="en">
...
<body>
...
 <input type="hidden" name="order_id" value="{{ $order->id }}">
 <div class="tea-consumption">
  <div class="card" id="tea-card-{{ $tea_consumption->id }}>
   <div class="card-header">
    <span>茶葉消耗</span>
    <button type="button">刪除該消耗</button>
    <input type="hidden" value="{{ $tea_consumption->id }}">
   </div>
   <div class="card-block">
    <!-- 其他inputs -->
   </div>
  </div>
 </div>
 <button type="button" name="btn-add">新增消耗</button>

 <script src="/js/my-ajax-add-tea-consumption.js"></script>

</body>
</html>

由于 Laravel的Middleware會(huì)自動(dòng)檢查CSRF，所以如果使用POST，DELETE等方法的時(shí)候我們需要全局設(shè)置一下AJAX的header，這樣在每次發(fā)送AJAX的時(shí)候，都會(huì)自動(dòng)發(fā)送相應(yīng)的csrf token，只有Laravel檢查與相應(yīng)session中的token匹配后，才會(huì)調(diào)用相應(yīng)的Controller函數(shù)。所以在我們首先在view中增加一個(gè)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函數(shù)（首先是增加模塊）：

$('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 );
 });
});

看起來(lái)很簡(jiǎn)單吧，但是要注意的幾個(gè)地方有：

Button的type一定要寫為button，而缺省的話默認(rèn)type=”submit”，這樣一旦button被點(diǎn)擊頁(yè)面就會(huì)跳轉(zhuǎn)。

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

callback function中的數(shù)據(jù)html是由controller函數(shù)中使用某個(gè)view所返回的html代碼

好了，那么現(xiàn)在我們的$.post() call會(huì)后臺(tái)訪問(wèn)/orders/{id}/add-tea-consumption這樣形式的路徑，所以我們?cè)赲routes\web.php中加上我們的路徑名和處理方式：

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

即我們希望由RoomOrdersController這個(gè)控制器中的add_tea_consumption函數(shù)來(lái)處理我們的ajax請(qǐng)求。那么我們一起來(lái)看一下這個(gè)函數(shù)到底有些什么內(nèi)容：

<?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 */
  ]);
 }
}

其實(shí)跟平時(shí)我們controller中的函數(shù)并沒(méi)有什么區(qū)別，因?yàn)槲覀冃枰祷氐谋緛?lái)就是html代碼，而調(diào)用view()的時(shí)候，Laravel已經(jīng)幫我們生成好了。

這樣一來(lái)，當(dāng)ajax call成功返回時(shí)，$('.tea-consumption').append( html );就會(huì)將view生成的html代碼插入我們指定的DOM中，從而動(dòng)態(tài)刷新頁(yè)面。

值得注意的是，如果你發(fā)現(xiàn)你的ajax call返回internal 500錯(cuò)誤，那么首先請(qǐng)檢查你的csrf是否已經(jīng)設(shè)置好，如果確認(rèn)沒(méi)有問(wèn)題，那么請(qǐng)檢查你的view template文件，只要其中有錯(cuò)誤，那么就無(wú)法返回html，從而造成錯(cuò)誤。

要?jiǎng)h除模塊，其實(shí)是差不多的，但是要注意的是，我們的listener不能使用.click()來(lái)注入，因?yàn)楫?dāng)模塊被刪除后，.click()注入的listener就會(huì)失效，我們需要使用parent的.on()函數(shù)：

('.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();
  }
 });
});

AJAX需要細(xì)心，因?yàn)殄e(cuò)誤比較難debug，所以在開發(fā)的時(shí)候一定要注意，出現(xiàn)問(wèn)題了多查閱一下相關(guān)API。

以上這篇在Laravel中實(shí)現(xiàn)使用AJAX動(dòng)態(tài)刷新部分頁(yè)面就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論