Comment puis-je transmettre des données via un lien en utilisant simplement javascript et HTML?

Question

J'ai un site Web où j'ai une liste de noms et j'ai besoin d'ouvrir une nouvelle page quand un nom est cliqué. J'ai besoin de cette page pour afficher les données du nom cliqué, donc je vais avoir besoin de transmettre des données via le lien. Cela pourrait être fait avec PHP, mais puis-je le faire avec HTML et Javascript? Il doit y avoir un moyen de gérer le contenu dynamique sans logique côté serveur.

EDIT: Je tiens à préciser que le but de ce site Web est d'utiliser l'API d'un site existant de manière plus simple. Je veux juste modifier leur configuration et en tant que telle la logique du serveur d'écriture semble excessive, car je n'ai pas besoin de données persistantes (utilisez l'API pour cela). Cette question concerne la façon dont je devrais transmettre les données API autour des différentes pages de ce front-end personnalisé.

Answer 1

Vous pouvez définir les paramètres uri en ligne comme ceci:

<a href="example.com?name=sarah"> Sarah</a>// add a '?' followed by any number of parameters in the format of 'key=value' 

Vous utilisez un point d'interrogation pour représenter le début de variables, alors vous pouvez en ajouter autant que vous le souhaitez (avec une limite mais son assez élevé)

example.com?key1=value1+key2=value2 ...

Answer 2

Jetez un oeil à cette méthode:

Vous pouvez transmettre les données dans la chaîne de requête comme:

http://www.yourwebsite.com?name=About

Vous pouvez utiliser cette fonction pour obtenir des données de la chaîne de requête:

function getUrlVars() 
{ 
    var vars = [], hash; 
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); 
    for(var i = 0; i < hashes.length; i++) 
    { 
     hash = hashes[i].split('='); 
     vars.push(hash[0]); 
     vars[hash[0]] = hash[1]; 
    } 
    return vars; 
} 

La fonction getUrlVars() retournera:

{ 
    "Name" : "About" 
} 

Maintenant, vous pouvez l'imprimer n'importe où en utilisant javascript comme:

document.getElementById('p').innerHTML(getUrlVars()["name"]); 

ou

document.write(getUrlVars()["name"]); 

Answer 3

Il y a quelques options, mais en général croire que vous pouvez changer ce que le serveur envoie vers le bas sans logique côté serveur est illogique. Quelle logique le serveur utiliserait-il pour apporter des modifications?

Toutefois, si vous êtes au service de la même page mais en changeant simplement les noms, une chose que vous pouvez faire est de rendre la page envoyer vers le bas contenu statique sans noms partout et simplement mis

<span class='name-of-linked-user'></span> 

où la le nom devrait apparaître. À ce stade, avoir le lien pour John Doe aller à "page.html? Name = john% 20doe" et ajouter un peu de jquery statique à la page. De http://www.jquerybyexample.net/2012/06/get-url-parameters-using-jquery.html copiez le get code du paramètre url de:

function GetURLParameter(sParam) 
{ 
var sPageURL = window.location.search.substring(1); 
var sURLVariables = sPageURL.split('&'); 
for (var i = 0; i < sURLVariables.length; i++) 
{ 
    var sParameterName = sURLVariables[i].split('='); 
    if (sParameterName[0] == sParam) 
    { 
     return sParameterName[1]; 
    } 
} 
}​ 

puis d'une simple boucle de jquery passe par le contenu statique rendant 'dynamique'

$('.name-of-linked-user').each(function(){ 
    $(this).text(GetURLParameter('name')); 
});