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，那么所有数据都会被提取并显示在基于ID引用的name字段的新URL中。 single-colur.html?id=1会指向一个名为red.html的动态创建的文件，它显示colour表中该ID的数据吗？

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

编辑

目前我有两页。

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从数据库中获取详细信息，并显示在类 result 中。 >

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

in single-colur.html？id = anynumber

我必须用colour-name.html替换当前页面的网址

并显示详细信息。 [但是问题是 服务器中没有colour-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>

使用Jquery

3 个答案: