Laravel 中通过 AJAX 获取的数据未按预期以 HTML 形式显示

Question

HTML代码：

<div class="col-lg-8">
  <input id="searchInput" type="search" class="form-control" placeholder="Search doctors here">
</div>

<div class="col-lg-12 pt-5">
  <div class="row" id="doctorsContainer">
  </div>
</div>

Ajax 代码：

$(document).ready(function () {
  function fetchDoctorsData() {
    $.ajax({
      url: "{{ url('get_doctor') }}",
      type: 'GET',
      dataType: 'json',
      success: function (response) {
        console.log(response);
        displayDoctors(response.data);
      },
      error: function (xhr, status, error) {
        console.error(xhr.responseText);
      },
    });
  }

  function displayDoctors(doctors) {
    var doctorsHtml = '';
    if (doctors && doctors.length > 0) {
      doctors.forEach(function (doctor) {
        var doctorHtml = `
          <div class="col-lg-4">
              <div class="card">
                  <div class="card-body">
                      <div class="row">
                          <div class="col-lg-4">
                              <img src="{{ asset('/uploads/doctor/') }}/${doctor.doctor_image}" alt="user-avatar" class="img-fluid rounded" />
                          </div>
                          <div class="col-lg-8">
                              <h6 class="text-muted text-uppercase"><i class="fa-solid fa-shield-halved"></i>&nbsp;${doctor.doctor_speciality}</h6>
                              <p class="text-muted">
                                  <span class="badge bg-${doctor.doctor_status == 0 ? 'danger' : 'success'} rounded"><i class="fa-solid fa-bolt" style="color: #ffff;"></i>&nbsp;${doctor.doctor_status == 0 ? 'InActive' : 'Active'}</span>
                              </p>
                          </div>
                          <div class="text-center pt-4">
                              <p class="docname">${doctor.doctor_prefix}.${doctor.doctor_name}</p>
                          </div>
                          <div class="d-flex justify-content-around gap-4">
                              <a href="tel:${doctor.doctor_phone}" class="btn btn-link text-decoration-none" data-bs-toggle="tooltip" title="${doctor.doctor_phone}">
                                  <i class="fas fa-phone fa-xl"></i>
                              </a>
                              <a href="mailto:${doctor.doctor_email}" class="btn btn-link text-decoration-none" data-bs-toggle="tooltip" title="${doctor.doctor_email}">
                                  <i class="fas fa-envelope fa-xl"></i>
                              </a>
                          </div>
                          <div class="pt-2"></div>
                          <button class="btn btn-primary w-100">View Details</button>
                      </div>
                  </div>
              </div>
          </div>`;
        doctorsHtml += doctorHtml;
      });
    } else {
      doctorsHtml = '<p>No doctors found.</p>';
    }
    $('#doctorsContainer').html(doctorsHtml);
  }

  fetchDoctorsData();
  $('#searchInput').on('input', function () {
    var query = $(this).val().trim();
    if (query.length >= 3) {
      searchDoctors(query);
    } else {
      fetchDoctorsData();
    }
  });

  function searchDoctors(query) {
    $.ajax({
      url: "{{ url('search') }}",
      type: 'GET',
      dataType: 'json',
      data: { query: query },
      success: function (response) {
        displayDoctors(response.data);
      },
      error: function (xhr, status, error) {
        console.error(xhr.responseText);
      },
    });
  }
});

当我在 #searchInput 字段中输入搜索查询时，就会出现问题。尽管 AJAX 请求已发送到服务器并且响应数据已记录到控制台，但搜索结果并未显示在 #doctorsContainer div 中。

控制器：

public function search(Request $request)
{
    $id = Session::get('USERID');
    $clientId = Crypt::decrypt($id);

    $keyword = $request->input('query');
    Log::info('Search keyword: ' . $keyword); 

    $doctors = Doctor::where('client_id', $clientId)
        ->where(function ($query) use ($keyword) {
            $query->where('doctor_name', 'like', '%' . $keyword . '%');
        })
        ->get();

    return response()->json(['doctors' => $doctors]);
}

我已确保用于获取搜索结果的服务器端逻辑正常运行，并返回与匹配的医生预期的 JSON 响应。

任何有关如何排查和解决此问题的见解或建议将不胜感激。谢谢！

Answer 1

在您的

searchDoctors function

中，您期待response.data，但根据控制器的响应，数据实际上位于

response.doctors

改变你的Ajax成功回调

success: function(response) {
    displayDoctors(response.doctors); // Changed from response.data to response.doctors
},