javascript - 让 AJAX 从 Laravel 控制器加载到 div

问题描述

所以它只是一个 div id="calendar"，假设自动从控制器方法加载。有一个原因。由于各种原因，我需要在后端对其进行操作，但我什至无法通过测试将其加载到屏幕上。我对使用 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');

标签： javascriptphpjqueryajaxlaravel

javascript - 让 AJAX 从 Laravel 控制器加载到 div

问题描述

解决方案

推荐阅读