Могу ли я использовать AJAX для загрузки кода из другого файла / представления / страницы, чтобы я мог сделать что-то похожее на SPA?

Question

Короче говоря, я считаю, что то, что я пытаюсь сделать, очень похоже на одностраничное приложение, но в очень маленьком масштабе.Моя цель - сделать панель администратора моего сайта менее загроможденной информацией, разделив эту информацию на вкладки.То, что я представляю, выглядело бы так:

Моя административная панель:

<div class="admin-container">
    <ul>
    <li>Tab 1</li>
    <li>Tab 2</li>
    <li>Tab 3</li>
    </ul>
    <div>This empty div will be populated with the code from the loaded file </div>
</div>

Код, который находится в другом файле, который я хотел бы загрузить в пустой div, когда я нажимаю наПервая вкладка:

        @if(!empty($categories) && count($categories) > 0)
            <form method="POST" action="{{ route('deleteCategories') }}">
            @foreach($categories as $category)
                <div class="categories-flexbox">
                    <img class='profile-picture' src='{{ url("storage/uploads/categories/thumbnails/".$category->image_file_name) }}' alt='Random image' />
                    <p>{{ $category->name }}</p>
                    <input type="checkbox" name="categories[]" value="{{ $category->id }}">
                    <input type="hidden" name="categoryFiles[]" value="{{ $category->image_file_name }}">
                </div>
            @endforeach
            <button class='delete-btn' type="submit">Delete</button>
            {{ csrf_field() }}
            {{ method_field('delete') }}
            </form>
        @endif

Очевидно, что это будет не единственный файл, который будет использоваться для загрузки.Должен быть соответствующий файл для вкладки 2 и вкладки 3. Страница панели администратора не должна обновляться, когда я нажимаю на любую из вкладок, однако содержимое пустого элемента div должно быть изменено на код на другой странице /view.

Достигается ли то, что я описал, с помощью AJAX или я должен искать другие способы?Я уже использовал AJAX для вставки и удаления содержимого в / из базы данных, а затем изменил HTML в случае успеха, но эта вкладка кажется более сложной.

Answer 1

Да, вы можете сделать что-то похожее на это.

function createTabComponent(wrapper){
        $wrapper = $(wrapper);
        $buttons = $wrapper.find('> ul > li');

        $divs = $wrapper.find('> div');
        $divs.hide();

        $urlsLoaded = $buttons.map(function(){ return false; });

        $wrapper.find('>ul').on('click', 'li', function(){
            var $this = $(this);

            $buttons.removeClass('active');
            $this.addClass('active');
            $divs.hide();

            var index = $buttons.index($this[0]);
            $divs.eq(index).show();

            if(!$urlsLoaded[index]) {
              var url = $this.data('url');
              $.get({
                  url: '/' + url,
                  success: function(html){
                    $urlsLoaded[index] = true;
                    $divs.eq(index).html(html);
                  },
                  error: function(){
                    $urlsLoaded[index] = true;
                    $divs.eq(index).html('Error loading url: '+ url);
                  }
              });
            }
        
        });

        var activeTab = $buttons.filter('active');
        if(activeTab[0]){
            activeTab.trigger('click');
        }else{
            $buttons.eq(0).trigger('click');
        }
    }

    createTabComponent('.admin-container');

  .active{
    background: orange;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="admin-container">
  <ul>
    <li data-url='file1Url'>Tab 1</li>
    <li data-url='file2Url'>Tab 2</li>
    <li data-url='file3Url'>Tab 3</li>
  </ul>
  <div></div>
  <div></div>
  <div></div>
</div>

Answer 2

Технически, вы можете изменить содержимое вкладки с помощью AJAX, отправив содержимое HTML через ответ AJAX.Но, на мой взгляд, гораздо лучше использовать интегрированный фреймворк / библиотеку, например Vue, чтобы справиться с этим.

Вы также можете предварительно отрендерить весь HTML, но скрыть их, а затем использовать JS для условного изменения их видимости.