Laravel中基于银行卡BIN码通过Ajax匹配分期数的实现求助

我学习Laravel已有4个月，非常喜欢这个框架，但目前遇到一个问题需要帮助。我已经能完成数据库查询获取全部记录，但需求是：当输入客户银行卡前6位（BIN码）时，在下拉选择框中显示数据库中该BIN码对应的分期数。

当前代码： #

HTML & JavaScript：

<input type="hidden" id="installments_url" value="{{ route('taksit.rastgele') }}">
<div class="field-container">
   <label for="installments_number" class="form-label">Taksit Sayısı</label>
   <select id="installments_number" class="form-select" name="installments_number" data-style="btn-default" required="true">
        <option value="" selected disabled hidden>Taksit Seçiniz</option>
        <option value="1">Tek Çekim</option>
   </select>
</div>

<script>
    // Get Installments
    function getInstallments() {
        var installments_url = $('#installments_url').val();
        var data = {
            '_token': $('meta[name="csrf-token"]').attr('content'),
        };
        var post = $.post(installments_url, data);
        post.done(function(xhr) {
            if (xhr.data.length > 0) {
                var optionsHtml = '<option value="" selected disabled hidden>Taksit Seçiniz</option>';
                xhr.data.forEach(function(item, index) {
                    optionsHtml += '<option value="' + item + '">' + item + '</option>';
                    $('#installments_number').html(optionsHtml);
                });
            }
        });
    }
</script>

Laravel 控制器方法：

public function rastgeleBinlist()
{
    $deneme = Binlist::where('installments_number')->orderByRaw('installments_number')->get();
    return response()->json([
        'data' => $deneme != null ? $deneme : []
    ]);
}

解决方案步骤： #

1. 添加BIN码输入框

在页面新增输入框用于接收银行卡前6位BIN码：

<div class="field-container">
    <label for="bin_code" class="form-label">银行卡BIN码（前6位）</label>
    <input type="text" id="bin_code" class="form-control" maxlength="6" placeholder="输入前6位BIN码">
</div>

2. 修改JavaScript逻辑，传递BIN码并触发请求

更新函数以接收BIN码参数，绑定输入事件触发动态请求：

function getInstallments(binCode) {
    var installments_url = $('#installments_url').val();
    var data = {
        '_token': $('meta[name="csrf-token"]').attr('content'),
        'bin_code': binCode
    };
    var post = $.post(installments_url, data);
    post.done(function(xhr) {
        var optionsHtml = '<option value="" selected disabled hidden>Taksit Seçiniz</option>';
        optionsHtml += '<option value="1">Tek Çekim</option>';
        
        if (xhr.data.length > 0) {
            xhr.data.forEach(function(item) {
                optionsHtml += `<option value="${item.installments_number}">${item.installments_number} 期</option>`;
            });
        }
        $('#installments_number').html(optionsHtml);
    }).fail(function() {
        $('#installments_number').html('<option value="" selected disabled hidden>Taksit Seçiniz</option><option value="1">Tek Çekim</option>');
    });
}

// 输入6位后触发请求，长度不足时重置下拉框
$('#bin_code').on('input blur', function() {
    var bin = $(this).val().trim();
    bin.length === 6 ? getInstallments(bin) : 
    $('#installments_number').html('<option value="" selected disabled hidden>Taksit Seçiniz</option><option value="1">Tek Çekim</option>');
});

3. 修正控制器查询逻辑

根据前端传递的BIN码筛选对应分期数，确保模型存在bin_code字段：

use Illuminate\Http\Request;

public function rastgeleBinlist(Request $request)
{
    $request->validate([
        'bin_code' => 'required|digits:6'
    ]);
    
    $installments = Binlist::where('bin_code', $request->bin_code)
        ->select('installments_number')
        ->distinct()
        ->orderBy('installments_number')
        ->get();
    
    return response()->json([
        'data' => $installments
    ]);
}

4. 确认路由配置

确保路由为POST请求并绑定对应方法：

Route::post('/taksit/rastgele', [YourController::class, 'rastgeleBinlist'])->name('taksit.rastgele');

内容的提问来源于stack exchange，提问作者Nihad KELEŞ