index.php # отличается от index.php

Question

В моем коде, который использует загрузку, у меня возникла проблема.

Я использую код JS, показанный ниже.

$("li:eq(1)").click(function() { 
      $.get("./test.php") 
       .done(function(data) { 
        $('#middle').html(data); 
      }); 

Это контроль дива.

<div class="container" id=header-nav> 
      <a class="brand" href="index.php"></a> 
      <div class="nav-collapse collapse" > 
       <ul class="nav"> 
        <li class="active"><a href="#">Home</a></li> 
        <li><a href="test.php">test</a></li> 
....... 
<div class="container" id="middle"> </div> 

При нажатии на кнопку тестирования, ссылка изменится на test.php#, но ничего изменить. Нажмите еще раз, он может загрузиться в test.php.

Проблема в том, что ссылка test.php, код не работает. когда test.php#, это работа. И я хотел бы знать, почему.

Большое спасибо.

Answer 1

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

$("li:eq(1) a").click(function(e) { 
    e.preventDefault(); 
    $.get("./test.php") 
     .done(function(data) { 
      $('#middle').html(data); 
     }); 
}); 

preventDefault() прекращает поведение по умолчанию ссылки, то есть ваш запрос AJAX запускается на выполнение по мере необходимости.

Answer 2

, так как вы хотите использовать $.get (AJAX), вы не должны дать URL для <a> элемента внутри <li> элемента,

вы должны дать атрибут href внутри <a> элемента это значение: javascript:void(0) Или #,

ваш html код будет:

<div class="container" id=header-nav> 
      <a class="brand" href="index.php"></a> 
      <div class="nav-collapse collapse" > 
       <ul class="nav"> 
        <li class="active"><a href="#">Home</a></li> 
        <li><a href="#">test</a></li> 
....... 
<div class="container" id="middle"> </div> 

или вы должны предотвратить действие по умолчанию для элемента, чтобы предотвратить перегрузку url, добавив: event.preventDefault() в вас onclick событие и ваш js код будет:

$("li:eq(1)").click(function(e) { 
event.preventDefault(); 
      $.get("./test.php") 
       .done(function(data) { 
        $('#middle').html(data); 
      });