在表单提交上获取空输入

Question

我正在尝试实现搜索 function，目前，我正在实现一个搜索字段，但将来会有更多。

问题是当我提交表单以搜索数据时，它提交了一个 null 值，正如我在结果查询中看到的那样。 和console.log()也会打印else 块，即使我在输入字段中有输入也是如此。 有什么问题，我觉得一切都很好，有人可以指出问题吗？

刀

<form id="studSearchForm" autocomplete="off" method="GET" enctype="multipart/form-data">
@csrf
<div class="searchBox">
Search Student
<div class="searchContainer">
    <div class="input-group">
        <input id="studfnameSearch" name="studfnameSearch" type="text" class="form-control"  placeholder="student first name">            
        <div class="input-group-append">
            <div class="input-group">
                <button type="submit" class="btn btn-secondary">                    
                Search
                </button>
            </div>
        </div>
    </div>
</div>

<script>
    $("#studSearchForm").submit(function(e) {
    e.preventDefault();
    const fd = new FormData(this);
    var _url = '{{ route('student.fetch.route') }}';
    $.ajax({
        url: _url,
        method: 'GET',
        data: fd,
        cache: false,
        contentType: false,
        processData: false,
        dataType: 'json',
        success: function(response) {
            console.log(response);            
        }
    });
});    
</script>

web 路线

Route::get('student-fetch', [StudentRegController::class, 'fetchStudent'])->name('student.fetch.route');

controller

public function fetchStudent(Request $request) {
    $fnameQuery = $request->input('studfnameSearch');    
    if (!empty($fnameQuery)) {
        $studSearch = DB::table('school_students')->where('student_first_name', 'LIKE', "%{$fnameQuery}%")
            ->get('student_first_name');
        return response()->json($studSearch);
    } else {
        return response()->json("empty search");

    }
}

Answer 1

FormData用于生成多部分表单数据请求主体。

它与 GET 请求不兼容，GET 请求不能有请求主体并期望将数据放在查询字符串中。

通常我会建议使用URLSearchParams生成查询字符串，但我不知道 jQuery 是否足够现代以支持它。 改为考虑 jQuery serialize 。