Переход от страницы к другой в php с использованием ajax и jquery

Question

У меня есть эта панель навигации, и я хотел бы открывать новые страницы без необходимости загружать весь браузер, как это обычно делают настройки по умолчанию.

Как использовать ajax или jquery, чтобы сделать это

<div class="ms_top_right">
     <div class="ms_top_btn">
          <a href="upload" class="ms_btn upload">upload</a>
           <a href="javascript:;" class="ms_admin_name">{{ Auth::user()->username }}<span class="ms_pro_name">ns</span>                                                       </a>
          <ul class="pro_dropdown_menu">
        <li><a class="mobile-link" href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">Log Out</a>
    <form id="logout-form" action="{{ route('logout') }}" method="POST">
        @csrf
    </form>
</li>
</ul>
</div>
</div>

сделал это

<script>
    $('.ms_top_btn').click(function (event) {
    // Avoid the link click from loading a new page
    event.preventDefault();

    // Load the content from the link's href attribute
    $('.upload').load($(this).attr('href'));
});
</script>

но это не сработало

Answer 1

в вашем меню добавьте событие onclick

<ul class="pro_dropdown_menu">
    <li onclick="load_content('profile.html','Profile');" >Profile</li>
    <li onclick="load_content('manage_acc.html','Setting');" >Setting</li>
    <li><a class="mobile-link" href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">Log Out</a>
        <form id="logout-form" action="{{ route('logout') }}" method="POST">
              @csrf
        </form>
    </li>
</ul>

и вызовите эту функцию

function load_content(url, new_title) { 
  $.ajax({
    url: url,
    type: 'GET',
    success: function (data) {
      $('#your_content_div_id').html(data); // load html
      history.pushState('',new_title, url); // change url
   }
  });
}

или вы можете создать событие click, а затем вызвать по имени класса и получить URL-адрес из списка. и загрузить его. но это проще.

или вы можете использовать load

  <ul class="pro_dropdown_menu">
  <li onclick="$('#your_content_div_id').load('profile.html');" >Profile</li>
  <li onclick="$('#your_content_div_id').load('manage_acc.html');" >Setting</li>
  ...

html должен содержать только содержимое, без нижнего колонтитула или меню

для изменения URL без перезагрузки используйте следующее, вы можете поместить его в ajax

history.pushState('', 'New Page Title', new_url);

я надеюсь, что это работает