让 AJAX 从 Laravel 控制器加载到 div答案

【问题标题】：Getting AJAX to load to a div from Laravel Controller让 AJAX 从 Laravel 控制器加载到 div
【发布时间】：2021-07-21 14:00:19
【问题描述】：

所以它只是一个带有id="calendar" 的 div，假设它会自动从控制器方法加载。有一个原因。由于各种原因，我需要在后端对其进行操作，但我什至无法通过测试将其加载到屏幕上。我对使用 AJAX 还很陌生。

这是我的 HTML/AJAX：

    <body>
<x-dispatch.header/>

<x-dispatch.nav/>

<div class="flex flex-col md:flex-row">

    {{-- <x-callCenter.ccSidebar/> --}}


     <div class="main-content flex-1 bg-gray-100 mt-12 md:mt-2 pb-24 md:pb-5">

        <div class="bg-gray-800 pt-3">
            <div class="rounded-tl-3xl bg-gradient-to-r from-blue-900 to-gray-800 p-4 shadow text-2xl text-white">
                <h3 class="font-bold pl-2">Calendar</h3>
            </div>
        </div>

    
<div class = "pl-8"id="container">
  <div id="header">
    <div id="monthDisplay"></div>
    <div>
      <button id="backButton">Back</button>
      <button id="nextButton">Next</button>
    </div>
  </div>

  <div id="weekdays">
    <div>Sunday</div>
    <div>Monday</div>
    <div>Tuesday</div>
    <div>Wednesday</div>
    <div>Thursday</div>
    <div>Friday</div>
    <div>Saturday</div>
  </div>

  <div id="calendar"></div>
</div>

<div id="newEventModal">
  <h2>Add New Service Time Slot</h2>

    <form action = "{{ route('addEvent') }}" method = "POST">
    @csrf
    <input id="eventTitleInput" placeholder="Service Type and Time Slot" />
    <input type="text" name="title" id="">
    <input type="text" name="time_slot" id="">
    <input class = "hidden" name="event_date" id="event_date" value="">
    <button id="saveButton" type = "submit">Save</button>
    <button id="cancelButton">Cancel</button>
  </form>
  </div>

<div id="deleteEventModal">
  <h2>Event</h2>

  <p id="eventText"></p>

  <button id="deleteButton">Delete</button>
  <button id="closeButton">Close</button>
</div>

<div id="modalBackDrop"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script>
   $(document).ready(function()
    {

              $.ajax
              ({
                  url:"calendar",
                  type:"GET",
                  
                  
                  success:function(data)
                  {
                      $('#calendar').html(data);
                  }
              });
          }
      
    });
</script>

这是我的控制器方法：

    public function getEvents(){
    $events = Event::all();
    
    $nav = 0;

    $output = '
    
    <p>hi</p>
    
    ';

    return $output;
}

这是我的路线：

Route::get('/callCenter/calendar','App\Http\Controllers\CallCenter\EventsController@getEvents');

【问题讨论】：

您是否在 DevTools 的“网络”面板中收到任何错误消息？你得到的 HTTP 状态码是什么？如果这没有帮助，dd($events) 的输出是什么？
dd($events) 可以很好地从数据库中吐出事件。它只显示从控制器到整个页面的输出，而不仅仅是在 id="calendar" 的 div 内。
能否请add在您的问题中将周围的代码添加到您的 div 中？
肯定有周围的html。
看起来不错。我看不到任何会导致用 AJAX 结果替换整个页面的内容。

标签： javascript php jquery ajax laravel

【解决方案1】：

路由定义与 API 调用不同。所以你要么

更改路由定义

Route::get('/calendar','App\Http\Controllers\CallCenter\EventsController@getEvents');

更改 API 调用

$(document).ready(function()
    {
        $.ajax
        ({
            url:"/callCenter/calendar", // if the route is defined in routes/api.php, you need to prefix it with api/
            type:"GET",
            
            
            success:function(data)
            {
                $('#calendar').html(data);
            }
        });
    });

【讨论】：

好建议。它仍然只是将控制器的输出显示到整个页面，而不仅仅是在 id="calendar" 的 div 内。控制器方法的输出占据整个屏幕，而不仅仅是在 div 中。

【解决方案2】：

return response()->json($output);

我相信这就是您所需要的。试试看。 JavaScript 会自动解析 json 对象。这是我的结果。它也应该对您有用，无需重新加载页面。随便玩玩，我试过不使用 reponse() 和 json() 助手，但我无法触发整个页面重新加载。可能问题出在您的 HTML 上

【讨论】：