如何在首次加载页面时自动加载带有Ajax和jQuery的某个网页内容？

Question

When opening my webpage none of the Ajax content loads until one of the links is clicked then displaying the content connected to that link.

This is where the content is loaded into the main webpage at ext-content:

<main>
    <article class="ext-content">

    </article>
    </main>

This is the javascript which loads the content when one of the links is clicked:

$('section li').click(function() {
    $.ajax({
      type: 'GET',
      url: 'includes/ext-content/'+$(this).data('content')+'.html',
      dataType: 'html',
      success: function(response) {
        $('.ext-content').html(response);
      }
    });
  });

These are the links which then load the content into ext-content when clicked:

<section id="section-links">
      <p>Kies een van de onderstaande opties:</p>
      <ul id="componenten-links">
        <li data-content="cpu-shop">CPU's</li>
        <li data-content="moederbord-shop">Moederborden</li>
        <li data-content="geheugen-shop">Geheugen</a></li>
        <li data-content="hardschijf-shop">Harde schijven</a></li>
        <li data-content="grafischekaart-shop">Grafische kaarten</a></li>
        <li data-content="voeding-shop">Voedingen</a></li>
        <li data-content="behuizing-shop">Behuizingen</a></li>
      </ul>
    </section>

The code below will automatically load a specific webpage when the page loads, but this only works if I manually type in the webpage.html. Is there a way to make this code below work where it automatically takes one of the links listed above instead of me having to type in a specific webpage.html? Otherwise I would need a different script for each webpage.

 $('section li').ready(function() {
    $.ajax({
      type: 'GET',
      url: 'includes/ext-content/cpu-shop.html',
      dataType: 'html',
      success: function(response) {
        $('.ext-content2').html(response);
      }
    });
  });

Thanks for the help

Answer 1

Consider the following.

$(function(){
  $('.ext-content').load('includes/ext-content/' + $('section li').eq(0).data('content') + '.html');
  
  $('section li').click(function() {
    $('.ext-content').load('includes/ext-content/' + $(this).data('content') + '.html');
  });
});

See More: https://api.jquery.com/load/

When calling .load() using a URL without a suffixed selector expression, the content is passed to .html() prior to scripts being removed. This executes the script blocks before they are discarded. If .load() is called with a selector expression appended to the URL, however, the scripts are stripped out prior to the DOM being updated, and thus are not executed.

when the page is ready, this will load the first LI and collect it's data attribute.

Answer 2

$('section li').load(function() {
    $.ajax({
      type: 'GET',
      url: 'includes/ext-content/cpu-shop.html',
      dataType: 'html',
      success: function(response) {
        $('.ext-content2').html(response);
      }
    });
  });

Use the load method instead of ready.

Answer 3

you can use the document.ready for load data on page load.

$( document ).ready(function() {
$.ajax({
      type: 'GET',
      url: 'includes/ext-content/cpu-shop.html',
      dataType: 'html',
      success: function(response) {
        $('.ext-content2').html(response);
      }
    });
});