Создать и получить динамический URL с помощью Jquery - PullRequest
Новая
       37

Создать и получить динамический URL с помощью Jquery

0 голосов
/ 23 июня 2018

У меня есть страница single-colur.html, и она может принимать различные наборы строк запроса, как показано ниже: 

single-colur.html?id=1
single-colur.html?id=2
single-colur.html?id=3
single-colur.html?id=4

Выше id ссылается на таблицу colour, которая имеетследующие столбцы: 

id
name
content

Когда люди приходят на single-colur.html и запрашивают определенный идентификатор, я хотел бы получить соответствующий идентификатор из URL-адреса и отправить запрос AJAX на страницу PHP, которая будетполучить соответствующую строку из моей таблицы на основе предоставленного идентификатора, который в настоящее время реализован.

Мой вопрос: возможно ли, что если кто-то перейдет к single-colur.html?id=1, тогда все данные будут извлечены и отображены вновый URL на основе поля name, на которое ссылается идентификатор, например, single-colur.html?id=1 указывает на динамически создаваемый файл с именем red.html, и он показывает данные из таблицы colour для этого идентификатора?

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

РЕДАКТИРОВАТЬ

В настоящее время у меня есть две страницы.

1) архив цвета.html

2) single-colour.html

in archive-colour.html 

<div>

 <a href="single-colour.html?id=1">Red</a>
 <a href="single-colour.html?id=2">Green</a>
 <a href="single-colour.html?id=3">Blue</a>

</div>

в single-colur.html? id = anynumber 

<div class="result">

</div>

В single-colur.html я делаю ajax и извлекаю деталииз базы данных с использованием запрошенного идентификатора и отображения в классе результат .

Это текущий процесс.Но мне нужно

в single-colur.html? Id = anynumber

Мне нужно заменить URL текущей страницы на color-name.html

и показатьподробности .[НО * на сервере нет страницы color-name.html .т.е. на сервере нет red.html , green.html , blue.html .Это должно быть виртуально создано jquery.]

Ответы [ 3 ]

0 голосов
/ 23 июня 2018

Используйте Ajax: 

$.ajax({
  url: "my-colours.html",
  type: "get", //send it through get method
  data: { 
    id: //<Your id here >
  },
  success: function(response) {
    window.location.href = '/' + response.color + '.html' ;
  },
  error: function() {
    //Do Something to handle error
  }
});

Полагаю, это то, что вы ищете.Здесь динамическая ссылка будет создана ajax, и вы можете каждый раз давать динамическое значение Id.

0 голосов
/ 23 июня 2018

Этот пример настолько завершен, насколько это возможно в этой среде.

  • Загрузка по клику через ajax
  • Установка содержимого
  • Установить виртуальный URL 

$( 'a.virtual' ).click( function( e ) {
  var link = $(this);
  console.log( "Loading: " + link.attr('href') );
  $.ajax({
    url: link.attr('href'),
    type: "get",
    success: function(response) {
      // parse json or howerver data get transferred
      var result = parseJSON(response);
      var content = result['content'];
      var virtual_url = result['url'];

      // set content
      $('#content').html( content );

      // set virtual url
      window.history.pushState([], 'Title', virtual_url);
    }
  });
  
  // do not follow the link!
  e.preventDefault();
  return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a class="virtual" href="my-colours.html?id=1">Link A</a></li>
  <li><a class="virtual"  href="my-colours.html?id=2">Link B</a></li>
  <li><a class="virtual"  href="my-colours.html?id=3">Link C</a></li>
  <li><a class="virtual"  href="my-colours.html?id=4">Link D</a></li>
<ul>
<br/>
Content delivered via ajax:<br/>
<div id='content'>
</div>
0 голосов
/ 23 июня 2018

Итак, вы используете 

window.location = window.location.hostname + "here put the returned from ajax" + ".html";

Объясните 

window.location.hostname

возвращает URL сайта

...