【问题标题】:Ajax Response not showing in blade LaravelAjax 响应未显示在刀片​​ Laravel 中
【发布时间】:2020-08-17 22:10:54
【问题描述】:

我的代码有点问题。

我的表单中有一个下拉字段。我在它上面应用了 onclick 事件。 Onclick,我正在向控制器发送 ajax 调用,在那里我调用我的查询以获取所有年份列表并将其返回给刀片作为响应。

我的代码正在运行,我可以在“网络”选项卡下的预览中看到 ajax 响应,但问题是这些值没有显示在刀片​​上的下拉列表中。

刀片

   <div class="form-group">
      <select id="regist_year" data-dependent="registration">
             <option selected value=""></option>
       </select>
   </div>

Javascript

$('#regist_year').on('click', function(e){
    e.preventDefault();
    var _token = $('input[name="_token"]').val();
    var all_years = $(this).data('dependent');

    $.ajax({
        url:"{{ route('getAllyears') }}",
        method:"POST",
        data:{_token:_token,all_years:all_years},

        success:function(result)
        {
             $('#'+all_years).html(result);
        }
    });
});

控制器

public function getAllyears(Request $request)
{

    $all_years = $request->get('all_years');

    $years = DB::table('auto_databases_one')
        ->select('year')
        ->distinct()
        ->orderBy('year', 'ASC')
        ->get();

    $get_years = '<option value="">Select ' . ucfirst($all_years) . '</option>';
    foreach ($years as $row) {
        $get_years .= '<option value="' . $row->year . '">' . $row->year . '</option>';
    }
    echo $get_years;
}

【问题讨论】:

  • id="registration"的元素吗?没有显示。在&lt;select&gt; 上使用点击事件也不是一个好主意,因为它会在打开和选择时触发
  • @N69S 正如我上面写的,我可以看到响应是网络选项卡中的完整下拉列表,但它没有显示在我的刀片中的下拉列表中。
  • @charlietfl 你建议用什么来选择?
  • @charlietfl 我的值正在显示,但是当我选择下拉列表的值时,它被更改为再次选择!
  • 将新选项放在刚刚习惯的选择中是不正常的。你需要更换它们吗?更常见的方法是让选择填充另一个元素。如果它们在同一个选项中,用户怎么会知道您更改了选项?

标签: javascript php laravel


【解决方案1】:

好吧,你将 hyml 放入 $('#'+all_years) 至极 $('#regist_year').data('dependent'); 导致 $('#registration') 并且你没有具有该 ID 的 dom

改成

$('#regist_year').html(result);

此外,在单击选择时阻止默认设置可能会产生不良后果。比如下拉菜单没有打开和选项不能被鼠标选择

【讨论】:

  • 我的价值现在正在显示,但还有另一个问题。我刚刚删除了阻止默认值,但是当我选择 nay 值时,它消失了!!!
  • @Shaan yop,这是为了让点击事件触发
  • 我自己解决了。 $('#select_id').focus(function() 为我工作!!!!!!感谢您的宝贵时间。
猜你喜欢
  • 2019-06-28
  • 2016-06-26
  • 2023-04-08
  • 1970-01-01
  • 2020-09-13
  • 2018-12-12
  • 1970-01-01
  • 2019-01-15
  • 2019-10-14
相关资源
最近更新 更多