Аякс просит удваивать - PullRequest
Новая
       7

Аякс просит удваивать

0 голосов
/ 29 ноября 2018

У меня есть веб-сайт, где на главной странице есть раздел контента, и контент переключается с помощью ajax.Каждый раз, когда я переключаюсь между разными страницами, мне кажется, что ajax продолжает удваивать количество запросов.Вот код, управляющий переключением страниц: 

$(document).on('click','#sideNav a',function(e){ 
    e.preventDefault();
    var url = $(this).attr('href'); //get the link you want to load data from

    $.ajax({ 
     type: 'GET',
     url: url,
     success: function(data) { 
        $("#content").empty();
        $("#content").html(data); 
    } 
   }); 
   //window.history.pushState('object', 'New Title', url);
 });
});

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

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

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

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

ОБНОВЛЕНИЕ Каким-то образом я это исправил, не совсем точно как, но вот что я сделал:Я добавил .off('click','#sideNav a') к своей функции и также поместил функцию в отдельный файл .js.Я чувствую, как будто он снова загружал скрипт, опять же не совсем уверен, что именно это исправило, надеюсь, это кому-нибудь поможет.

Ответы [ 2 ]

0 голосов
/ 29 ноября 2018

Ваш скрипт работает отлично.Проверьте это plunk :

Html: 

<!DOCTYPE html>
<html>
  <head>
    <script data-require="jquery@3.2.1" data-semver="3.2.1" src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>
  <body>
    <h1>Ajax request</h1>
    <div id="sideNav">
      <a href="https://jsonplaceholder.typicode.com/comments/1">Link 1</a>
      <a href="https://jsonplaceholder.typicode.com/comments/2">Link 2</a>
    </div>
    <div id="content">
      Some Content Goes Here
    </div>
  </body>
</html>

Javascript: 

$(document).on('click', '#sideNav a', function(e) {
  e.preventDefault();
  var url = $(this).attr('href'); //get the link you want to load data from

  $.ajax({
    type: 'GET',
    url: url,
    success: function(data) {
      console.log(data)
      $("#content").empty();
      html = `<p><b>Name:</b> ${data.name}</p>
        <p><b>Email:</b> ${data.email}</p>
        <p><b>body:</b> ${data.body}</p>`
      $("#content").html(html);
    }
  });
  // window.history.pushState('object', 'New Title', url);
});

Оформите эту проблему для другихпричины, по которым ваши запросы могут быть удвоены.

0 голосов
/ 29 ноября 2018

В качестве решения этой проблемы вы можете использовать off() для отсоединения события щелчка (если оно есть) перед присоединением: 

$(document).off('click','#sideNav a').on('click','#sideNav a',function(e){ 
    e.preventDefault();
    var url = $(this).attr('href'); //get the link you want to load data from
    $.ajax({ 
     type: 'GET',
     url: url,
     success: function(data) { 
        $("#content").empty();
        $("#content").html(data); 
    } 
   }); 
   //window.history.pushState('object', 'New Title', url);
 });
});

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...