如何使用 AJAX 从控制器中获取数据？

Question

我正在使用 Laravel，并在我的控制器中从外部 API 获取数据。 到目前为止，我可以成功获取数据并循环进入选择下拉菜单。

由于数据量大，我只想在用户单击特定单选按钮时获取此结果，而不是每次加载该页面时。

如何使用 AJAX 获取数据？

下面是我的代码：

结帐控制器：

public function offices(Request $request) {

  $url = Http::get('the_url_of_the_api', [
    'userName' => '123456',
    'password' => '345678',

  ]);
  $response = json_decode($url);
  $offices = $response->offices; // this is the variable I get successfully and I loop in the code bellow

}

查看

<select name="office" class="offices form-control">
  @foreach($offices as $office)
    <option value="{{ $office->name }}">{{ $office->name }}</option>
  @endforeach
</select>

现在我正在尝试使用 AJAX 获取该数据，因此我创建了一个路由和下面的 Javascript。

路线：

Route::get('/offices', 'App\Http\Controllers\CheckoutController@offices')->name('offices');

Javascript：

<script>
  $(document).ready(function(){

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

    $('input[name="radio"]').click(function(){

      $.ajax({
        type: "GET",
        url: "/offices",
        data: '',
        success: function() {
            // How can I fetch that variable offices from the controller and loop inside the select drop down box? 
        }
      });
    });

  });
</script>

Answer 1

首先我个人不会在 Laravel 中使用 Ajax，有太多更好的选择，我最喜欢的是 Laravel Livewire。

使用 AJAX 的问题是你必须解决 AJAX 不能直接与 Laravel 的 Blade 模板交互的事实。我可以想到两种方法来处理这个问题。

选项 1：从您的控制器返回一个 JSON 办公室列表

让您的 CheckoutController::offices() 方法以 JSON 形式返回办公室列表 return offices;。这样，您的 ajax 方法就有了操作 dom 所需的信息。 （这未经测试，但类似这样的方法可能有效）

success: function(results) {
  let officeSelect = document.getElementsByName('office');
  let offices = results.data;
  for (var i = 0; i < offices.length; i++) {
    // BIND DATA TO <select> ELEMENT.
    officeSelect.innerHTML = officeSelect.innerHTML +
    '<option value="' + offices[i].name+ '">' + offices[i].name+ '</option>';            
  }
}

选项 2：将整个 Blade 视图返回为 html 并将其插入正确的 dom 位置。 （再次未测试）

结帐控制器

public function offices(Request $request) {

  $url = Http::get('the_url_of_the_api', [
    'userName' => '123456',
    'password' => '345678',

  ]);
  $response = json_decode($url);
  $offices = $response->offices; 
  return view('offices', compact('offices')); // This view cannot extend another view.

}

Ajax 脚本

success: function(results) {
  document.getElementsByName('office-select-wrapper').innerhtml = results.data;    
}