使用Jquery创建和获取动态URL

Question

我有一个页面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获取相应的ID并将一个AJAX请求发送到PHP页面，该页面将根据提供的ID从我的表中获取相应的行，这是目前实施的。

我的问题是：如果有人去single-colur.html?id=1，那么有可能所有的数据被提取并显示在基于name字段的新URL中，该字段由ID引用，例如single-colur.html?id=1指向一个名为red.html的动态创建的文件，它显示colour表中此ID的数据？

我的限制是我必须动态创建新文件，而不能静态完成。

编辑

目前我有两页。

1）归档colour.html

2）单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-color.html？id =任何数字

<div class="result">

</div>

在single-colur.html中，我正在使用请求的id执行ajax并从数据库中获取详细信息并在类结果中显示。

这是当前的过程。但我需要的是

在single-color.html？id =任何数字

我必须用color-name.html替换当前页面的URL

并显示详细信息。 [但事情是服务器中没有color-name.html页面。即服务器中没有red.html，green.html，blue.html。它必须由jquery虚拟创建。 ]

Answer 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提供动态值。

Answer 2

所以你用

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

说明

window.location.hostname

返回网站网址

Answer 3

此示例与此环境中的示例一样完整。

• 通过ajax加载点击
• 设置内容
• 设置虚拟网址

$( '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>