下拉值不使用 ajax 传递给控制器答案

【问题标题】：Drop down value isn't passed to the controller using ajax下拉值不使用 ajax 传递给控制器
【发布时间】：2022-01-17 12:40:45
【问题描述】：

我需要使用 ajax 将下拉列表中的值传递给控制器。但显然，它不起作用。该值显示为空。我需要将$kodeCabang 的值传递给控制器。我该如何做这份工作？

HTML代码如下：

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" id="btnDropDownCabang" name="btnDropDown" value="Pilih Salah Satu"
        type="button" data-bs-toggle="dropdown" aria-expanded="false" style="width:250px">
        Pilih Salah Satu
    </button>

    <ul class="dropdown-menu mh" style="max-height: 250px; overflow-y: auto;" id="dropDownMenu" aria-labelledby="dropdownMenuButton1" style="width:250px;">

        @foreach($cabang['data'] as $listCabang)
            <li>
                <a class="dropdown-item" href="#" data-kode="{{ $listCabang->cab_kodecabang }}"
                    data-nama="{{ $listCabang->cab_namacabang }}">
                    {{$listCabang->cab_kodecabang}} - {{$listCabang->cab_namacabang}}
                </a>
            </li>
        @endforeach
    </ul>

</div>

jQuery代码如下：

let kodeCabang = ""
let namaCabang = ""
$('body').on('click', '.dropdown-item', function () {
    namaCabang = $(this).attr('data-nama')
    $("#btnDropDownCabang").val($(this).attr('data-kode'))
    $("#btnDropDownCabang").html(kodeCabang + '-' + namaCabang + '&nbsp;<span class="caret"></span>');
    kodeCabang = $("#btnDropDownCabang").val()
    //alert(kodeCabang + namaCabang)
    //alert(kodeCabang)
})

ajax请求如下：

$.ajax({
    type: 'POST',
    url: 'monitoring_plano/public/laporan/test',
    data: {
        'btnDropDown': kodeCabang,
    },
    success: function (Response) {
        alert(Response)
    }
})

控制器如下：

public function test(Request $request)
{
    $kodeCabang = $request - > request - > get('btnDropDown');
    dd($kodeCabang);
}

【问题讨论】：

标签： javascript html jquery ajax web

【解决方案1】：

首先，您应该在代码中显示您的 ajax 请求

然后你可以在控制器中检索值

$request->input('btnDropDown');

let kodeCabang = ""
let namaCabang = ""
$('body').on('click', '.dropdown-item', function () {
                                kodeCabang = $(this).attr('data-kode')
                namaCabang = $(this).attr('data-nama')
                $("#btnDropDownCabang").val(kodeCabang)
                $("#btnDropDownCabang").html(kodeCabang + '-' + namaCabang + '&nbsp;<span class="caret"></span>');
                kodeCabang = $("#btnDropDownCabang").val()
                console.log(kodeCabang);
                //alert(kodeCabang + namaCabang)
                //alert(kodeCabang)
            })
            
$('#btnDropDownCabang').on('click' , function (){
    console.log(kodeCabang);
  // Ajax Call
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
        <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" id="btnDropDownCabang" name="btnDropDown"
                    value="Pilih Salah Satu" type="button"
                    data-bs-toggle="dropdown" aria-expanded="false" style="width:250px">
                Pilih Salah Satu
            </button>
            <ul class="dropdown-menu" id="dropDownMenu"
                >
                <li>
                        <a class="dropdown-item" href="#"
                           data-kode="abc"
                           data-nama="asd">
                            abc - asd
                        </a>
                      </li>
                      <li>
                        <a class="dropdown-item" href="#"
                           data-kode="def"
                           data-nama="zxc">
                            def - zxc
                        </a>
                        </li>
                        <li>
                        <a class="dropdown-item" href="#"
                           data-kode="qwe"
                           data-nama="tyu">
                            qwe - tyu
                        </a>
                    </li>
            </ul>
        </div>
    </body>

【讨论】：

我已经编辑了我的问题，我的 ajax 请求有什么问题吗？ @freddylauhk
尝试使用$request->input('btnDropDown');而不是$request->request->get('btnDropDown');或使用$request->post();获取所有帖子数据
是的，做到了。仍然为空
如何触发ajax调用，因为我可以在ajax调用之前读取kodeCabang值