Создание и выбор динамического URL с помощью JQuery

У меня есть страница, 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и они запрашивают определенный идентификатор, я хотел бы получить соответствующий ID из URL-адреса и отправить запрос AJAX на страницу PHP, которая получит соответствующую строку из моей таблицы на основе предоставленного идентификатора, это в настоящее время осуществляется.

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

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

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

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

1) archive-colour.html

2) single-colour.html

в файле 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 и извлекаю детали из базы данных с использованием запрошенного id и отображения в результате класса .

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

в single-colur.html? id = anynumber

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

и показать детали. [НО дело в том, что на сервере нет страницы color.name. Html . т.е. нет red.html , green.html , blue.html на сервере. Он должен быть создан jQuery. ]

javascript,php,jquery,dynamic-url,

1

Ответов: 3

1

Использовать 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

Таким образом, вы используете

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

объяснять

window.location.hostname

возвращает URL-адрес веб-сайта

0

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

  • Нагрузка на клик через 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>

JavaScript, PHP, JQuery, динамически URL,
Похожие вопросы
Яндекс.Метрика