PhP / MySQL / Javascript:基于MySQL查询(javascript?)更改URL并从此URL加载数据

Scenario: I have a MySQL database called Data. It contains 100 rows with columns: ID, URL, Title, UniqueKey. Each item is like this: ID: 353 URL: http://www.test.com Title: Test site UniqueKey: 3tA5gQ

The UniqueKey is randomly generated for each item and unique.

What I want:

A visitor visits my website: website.com/data/. I want them to click a BUTTON that loads a RANDOM item from the MySQL database into the page. It must show in the URL like this: webiste.com/data/3tA5gQ (in short, it must add the UniqueKey to the URL). - On Refresh, it should keep the item currently showing. - The URL is unique; when someone links the URL website.com/data/3tA5gQ to someone else, it should show the corresponding item in the MySQL database (based on the UniqueKey).

What I have so far:

on my index.hp in website.com/data/ I load my scripts up top:

include ('database.php');
include ('custom_search.php');

database.php

$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "data";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
$pietje = floatVal('0.'.rand(1, 9));

custom_search.php Based on $pietje, it will load data from the MySQL database:

if ($pietje < 0.9) {
    $sql = "SELECT * FROM data order by RAND()";
    $result = $conn->query($sql);
    $row = $result->fetch_assoc();
}

on my index.php I can load the data like this: $row['UniqueKey'];

With JavaScript, I can create a hash in the URL:

<script>
    parent.location.hash = "!<?php echo $row['UniqueKey']?>";
</script>

But now it looks like this: website.com/data/#3tA5gQ


My questions:

  • How can I most efficiently change the URL? Right now it shows a hash # due to the javascript, but I don't want the hash.
  • How can I load an item from the MySQL database ONLY by clicking a button?
  • If the URL shows website.com/data/3tA5gQ, how can I make sure that visitors can share this link and the data corresponding to the UniqueKey 3tA5gQ is shown to them as well? (so, the corresponding url/title/id)

    I have NO idea how to fix this. I'm lost in a jungle of code and google suggestions. Please help!