如何通过单击更改 url 的链接来更新块内容而无需重新加载页面？ [关闭]

Question

我有一个填充数组的块，这个数组被发送到一个树枝模板来绘制结果。在 twig 模板中创建了一个带有链接的表，当我们单击其中任何一个时，块的内容会更改并重新加载页面，因为 url 通过添加查询参数而更改。

我试图添加一个在我点击链接时运行的 javascript 文件。此文件更改 url 而不正确重新加载页面，但该块不会随时更改。我需要在 javascript 中添加一种在 url 更改时更新该块的方法。

树枝：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="awingu" id="awingu">
    {% if content_array.ruta is not empty %}
      <div class="miga" id="miga">

          {% for miga in content_array.ruta.miga %}
            <a class="miga-link" href="{{ miga.ruta }}" id="miga-link">{{ miga.nombre }} / </a>
          {% endfor %}
      </div>
    {% endif %}

  <div class="background_navegador" id="background_navegador">
  <table>
    {# <ul class="carpetas"> #}
      <th>Nombre</th>
      <th>Modificación</th>
      <th>Tamaño</th>
    {# </ul> #}

    <div id="array" value="content_array">
    {% for i in content_array.archivos %}
    
      {% if i.tipo == "dir_padre" %}
      <tr>
        <td><li class="carpetas"><button class="link" onclick="update(this)" value="{{ i.ruta }}" href="{{ i.ruta }}" style="color: black;">{{ i.nombre }}</button></td></li>
        <td>{{i.modified}}</td>
        <td>{{i.size}}</td>
      </tr>
      {% endif %}

JS:

function update(src){
    window.history.pushState({}, 'Title', src.value);
    $.ajaxSetup ({
        cache: false
    });

    // specify loading spinner
    var spinner = "<img src='http://i.imgur.com/pKopwXp.gif' alt='loading...' />";
    
    // specify the server/url you want to load data from
    var url = "http://localhost/Local_Intranet_PRE/group/2/navegador-awingu?path=/_Compartidas/";
    
    // on click, load the data dynamically into the #result div
    //$("#awingu").click(function(){
        $("#awingu").html(spinner).load(url);
    //});

    
}