Как перенаправить страницу на ссылку href при клике без загрузки страницы, используя jQuery - PullRequest
Новая
       4

Как перенаправить страницу на ссылку href при клике без загрузки страницы, используя jQuery

0 голосов
/ 06 февраля 2020

Я пытаюсь перенаправить мою php страницу на другую php страницу без загрузки страницы.

И эти jQuery методы, которые я пробовал

1.Это возвращает мне предупреждение но не перенаправляя на страницу 

<script type="text/javascript">
  
$('a').click(function (event) 
{ 
   event.preventDefault(); 

   var url = $(this).attr('href');
 
   $.get(url, function(data) {
     alert(data);

    });

 });
</script>
<!DOCTYPE html>
<html>
<head>
	<title>AJax</title>
	<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
</head>
<body>


<a href="http://localhost:8001/Test/redirect.php"><h1>Click Here</h1></a>

</body>
</html>

2.Этот метод перенаправляет на страницу, но получает загрузку 

$('a').click(function (event) 
{ 
   event.preventDefault(); 

   var url = $(this).attr('href');
   $.get(url, function(data) {
window.location.href="http://localhost:8001/Test/redirect.php"
    });

 });

Я хочу простое решение для перенаправления моей страницы без загрузки, используя jQuery и AJAX. Направь меня, чтобы достичь этого:)

Ответы [ 2 ]

0 голосов
/ 06 февраля 2020

если вы имеете в виду изменить URL без обновления, вы можете попробовать это: 

window.history.pushState('data','title','/test')
0 голосов
/ 06 февраля 2020

Ваш вопрос не очень ясен о том, чего вы хотите достичь, но, как я понял,

  • Вы хотите загрузить данные на страницу без изменения страницы
  • Вы хотите измените URL в адресной строке браузера, не загружая другую страницу

Если я прав в отношении ваших намерений, вам придется

  1. . Использовать AJAX, чтобы получить данные (например, $.get(): https://api.jquery.com/jquery.get/)
  2. Использование window.history.pushstate() (подробнее об этом: https://developer.mozilla.org/en-US/docs/Web/API/History/pushState)

Таким образом, реализация его с помощью ваших функций может выглядеть следующим образом: 

$('a').click(function (event) { 
   event.preventDefault(); 

   var url = $(this).attr('href');

   $.get(url, function(data) {
     // alert(data);
      window.history.pushState('stateObject', 'New Title', '/newpage')

      // code to display/render your new page content
      // supposing data holds valid HTML
      document.getElementById('content-container').innerHTML = data
    });
 });

В некотором смысле вы хотели бы создать router, который загружает ваши данные, поэтому я бы указал вам на использование jQuery маршрутизатор : https://www.npmjs.com/package/jqueryrouter

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

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

...