时间戳

首页 > 解决方案 > 如何使用 AJAX 重新加载 Laravel @includes？

javascript - 如何使用 AJAX 重新加载 Laravel @includes？

问题描述

我在较大的应用程序中有一个单页应用程序，它将数据发送到数据库，并且还将显示同一个表的数据。目前，我有 AJAX 动态发送数据。但是，要让刚刚插入的数据出现在我想要的表中，我必须刷新。我整个早上都在尝试，但下面是目前的状态。

风景：

<html>
  <head>
    <!--I took some stuff out to make it easier to look at -->
  </head>
  <body onresize="resizeRecalc()">
    <div class="container-fluid">
      <div class="row header">
        <div class="col-12">
          <img src="{{ URL::asset('images/takeStatsLogo.png') }}" id="header-logo" />
        </div>
      </div>
      <div class="mainArea row">
        <div class="left col-8">
          <div onclick="playPause()" class="embed-responsive embed-responsive-16by9">
            <video id="gameFilm" src="{{ URL::asset('images/basketball.mp4') }}" preload="metadata"></video>
          </div>

          <div class="timebar">
            <span class="timeItem" id="timestamp"></span>
            <div onclick="changeVidTime()" onmousemove="moveLine(event)" onmouseout="REmoveLine()" id="outerBox"> <div id="progressBox"> <div id="placeMarker">
                </div></div></div>
            <span class="timeItem" id="duration-place"></span>
          </div>

          <!-- This is a key part -->
          <div id="statList">
              @include('partials.statList')
          </div>
        </div>

        <div id="right" class="right col-4">
          <!--Checking if we should make the user select starters. If we have them, no need to do that...-->
          @if ($game->starters != null)
              @include('partials.areStarters')
          @else
              @include('partials.noStarters')
          @endif
        </div>
      </div>
    </div>
    <script>
      //Add Stat Form
      //This part here will add the stats, but it won't refresh them!
      $('input#addStatButton').click( function() {
          $.post( '{{action("StatController@store")}}', $('form#new_stat').serialize(), function(data) {
                $('#statList').load('/take-stats/{{$game->id}}');
             },
             'json' // I expect a JSON response
          );
          clearStat();
      });
    </script>
    <script src="{{ URL::asset('js/takeStats/genJavascript.js') }}"></script>
    <script src="{{ URL::asset('js/takeStats/videoJS.js') }}"></script>
    <script src="{{ URL::asset('js/takeStats/dataJS.js') }}"></script>
  </body>
</html>

这是控制器方法：

public function loadStatList($id) {
    $userType = Auth::user()->user_type;
    if(Auth::check() && Game::where('id', '=', $id)->exists() && ($userType == 'statistician' || $userType == 'admin')) {
        $game = Game::find($id);
        $players = $game->team->users->where('user_type', 'player');
        $stats = Stat::orderBy('video_timestamp', 'desc')->where('game_id', $game->id)->get();
        $statMeta = Stat_Meta::all()->where('type', 'recorded');
        return view('partials.statList', compact('game', 'players', 'stats', 'statMeta'));
    } else {
        abort(404);
    }
}

我可能会遗漏一些东西，但我认为这会做我想要实现的目标。

标签： javascriptjqueryajaxlaravelmodel-view-controller

解决方案

我想通了！感谢@Get Off My Lawn 给了我一点提示，我不能只使用@include。我继续研究如何预渲染 HTML，然后将其引入。实际上并不难。这里的想法是使用 JQuery 函数在点击提交时执行 AJAX POST，然后使用 .done 获取新的完整网页。在你拥有之后（你可以 console.log 看看你当时正在使用什么，它将是整个网页）你可以从你执行的 .get 中获取你想要刷新的特定 div，然后坚持它在同一个div中。这是代码：

HTML/@包括：

<div id="statList">
   @include('partials.statList')
</div>

AJAX/JQuery：

$('input#addStatButton').click( function() {
    $.ajax({
      type: 'POST',
      url: '{{action("StatController@store")}}',
      data: $('form#new_stat').serialize(),
    })
    .done(function(refresh) {
      clearStat();
      $.get('{{action("StatController@show", [$game->id])}}', function(data) {
        var newData = $("#statList" , data)
        $( "#statList" ).html( newData );
        //console.log(newData);
      });
    });
  });

我很高兴你们！

推荐阅读