如何在 Laravel 中使用 Ajax？

Question

我的控制器中有以下功能。

public function index()
{
    $number = DB::table('counters')->first();

    return view('app', compact('number'));
}

public function count()
{
    DB::table('counters')->where('id', 1)->increment('number');
}

路线

Route::get('/', 'CounterController@index');
Route::get('/count', 'CounterController@count');

查看

<a href="{{action('CounterController@count')}}">
    <div class="button lighter-blue" id="form-button-1" data-attribute="1">
    Ja
    </div>
</a>

count 函数有效，但我想用 Ajax 来做，因为我的视图中有数字。

<h3>Nummer: {{ $number->number }}</h3>

我想点击按钮，然后数字增加，它直接显示给我。我该怎么做？

Answer 1

我在这里没有看到任何异常 - 看起来只是一个标准的 ajax 响应。那里有很多很好的教程，例如this one

但是，要回答您的问题，首先将按钮设为按钮，以便 jQuery / js 可以接受该操作，而不必刷新页面。比如：

<button id = 'getCount'>Get Count</button>

这将替换上面的整个锚链接。

然后，用 id 在 js 中捕获它：

$("#getCount").on('click', function(){ 
    // AJAX HERE
}

然后您调用以获取上述 onClick 中的计数（可以简化更多，但这显示了一个清晰的 ajax 方法 - 您需要调整您的代码）：

$.ajax({
      url: APP_URL + "/count" ,
      type: "GET",
       success: function (countResult) {
          showResult(countResult)
       },
       error: function () {
         alert ('Problem');
       }
  });

为了清楚起见，我已经分解了显示。你可以给<h3>添加一个id来覆盖：

<h3 id='count'>Nummer: {{$number->number}}</h3>

那么，你的 show 方法就可以直接写在 count 里了：

function showResult(count){
    $("#count").text('Nummer '+count);
}

您需要进行调整，但这会让您到达您需要的位置。看看上面的教程，这将帮助您了解这是怎么回事，您最终可以简化它。