Laravel 5 和 AJAX答案

【问题标题】：Laravel 5 and AJAXLaravel 5 和 AJAX
【发布时间】：2023-03-22 09:59:01
【问题描述】：

我想在选择客户端名称时使用 ajax 显示部分表单。到目前为止，我已经设法使用以下方法从数据库中获取数据：

<script>
  $('#client').change(function(){
    var client = $(this).val();
    var host = "{{URL::to('/')}}";
    var url = host + '/newinvoice/' + client;
    $.ajax({
      url: url,
      type: 'GET',
      beforeSend: function(){
        $('.client_services').html('Loading...');
      },
      success: function(data){
        $('.client_services').html(data);
      }
    });

    return false;
  });
</script>

这是我的控制器。

public function getClientServices(Client $client) {
  return json_encode($client->client_service()->get());
}

因此，我想根据该特定客户端的可用服务数量来显示文本输入，而不是 $('.client_services').html(data);。

我不知道该怎么做。

上面的 sn-p 返回结果如下：

[{"id":1,"client_id":1,"service_id":1,"frequency":90,"deleted_at":null,"created_at":"2015-04-15 10:20:33","updated_at":"2015-04-15 12:22:48"},{"id":2,"client_id":1,"service_id":1,"frequency":0,"deleted_at":null,"created_at":"2015-04-15 13:10:41","updated_at":"2015-04-15 13:24:41"},{"id":3,"client_id":1,"service_id":1,"frequency":180,"deleted_at":null,"created_at":"2015-04-15 13:58:39","updated_at":"2015-04-15 15:34:46"}]

我只对 id 感兴趣。

之后我想做的是为该特定客户输入该特定服务的费用。

我希望我很清楚。

【问题讨论】：

我不确定我是否跟随。 .client_services 你想究竟做什么？什么是.client_services？是<div>，<select>，什么？
对此感到抱歉。这是一个div。将显示文本输入的 div
听起来你做错了。我建议在 Laravel 中构建视图并返回它。返回信息 (json) 以便构建 HTML 客户端通常不是一个好主意。

标签： ajax html laravel laravel-5

【解决方案1】：

使用您要注入的最终 html 结构构建局部视图“_clientservice”。

在您的控制器中：

public function getClientServices(Client $client)()
{
    $clientService = $client->clientService()->get();
    return \Response::json(['html' => view('_clientservices', compact('clientService'))->render()]);
}

然后：

<script>
  $('#client').change(function(){
    var client = $(this).val();
    var host = "{{URL::to('/')}}";
    var url = host + '/newinvoice/' + client;
    $.ajax({
      url: url,
      type: 'GET',
      beforeSend: function(){
        $('.client_services').html('Loading...');
      },
      success: function(data){
        $('.client_services').html(data.html);
      }
    });

    return false;
  });
</script>

【讨论】：