Javascript Url Paramètre d'analyse

Donc, j'ai vraiment besoin d'aide. J'ai fait des recherches approfondies, et certaines des solutions que j'ai trouvées sont super mais ne fonctionnent pas pour moi, alors voici ...Javascript Url Paramètre d'analyse

Quand quelqu'un vient sur mon site, il va cliquer sur un lien qui passera une URL à "recipes.html" ... Par exemple, si ils ont cliqué sur "Ancho Chili Sauce", l'URL serait:

blahblahblah.com/recipes.html?r=Ancho-Chile -Sauce

ce paramètre est en fait le nom d'un JPEG dans le dossier « Recettes », bien sûr avec le « .jpg » extension

Je dois prendre ce paramètre dans une chaîne et ajouter « Rec ipes/"avant et" .jpg "après, puis modifiez la source d'une balise d'image dans mon document html pour afficher la nouvelle image de recette appelée dynamiquement. Je pensais que j'avais fait cela, mais rien ne semble fonctionner. Il y a évidemment quelque chose que je fais de mal dans mon Javascript, parce que mon balisage fonctionne bien et l'URL avec le paramètre est passée.

Voici mon code:

<!DOCTYPE html> 
<html> 
<head> 
<title>Recipes</title> 
<link href="mobi-styles.css" rel="stylesheet" /> 
<script type="text/javascript"> 
function getParam (sname) 
{ 
    var params = location.search.substr(location.search.indexOf("?")+1); 
    var sval = ""; 
    params = params.split("&"); 
    // split param and value into individual pieces 
    for (var i=0; i<params.length; i++) 
     { 
     temp = params[i].split("="); 
     if ([temp[0]] == sname) { sval = temp[1]; } 
     } 
    return sval; 
} 
window.onload = changePic(); 
var param = getParam("r"); 
var recipeName = "Recipes/"+param+".jpg"; 
function changePic() { 
document.getElementById("recipe").src=recipeName; 
} 
</script> 
</head> 

<body> 
<img class"resizer" id="recipe" src="" /> 
</body> 
</html>

S'il vous plaît aider! Je t'aime depuis longtemps!

Source

2012-05-15 Spartacus

quel est le problème? Y a-t-il une erreur? Essayez de coder en dur dans l'attribut "src" de votre image "recette" en insérant un extrait de "recipeName" – Sebas

supprimez le (). Lorsque vous associez des événements, vous affectez une fonction, pas le résultat d'un appel de fonction. Ce que vous avez fait a été appelez changePic(), renvoyé sval et affecté la valeur de sval à window.onload - c'est faux.

window.onload = changePic; 
         ^---remove()

Et déplacer window.onload = changePic en bas de sorte JSLint ne sera pas fou. Il est préférable de déclarer les fonctions avant de les utiliser, même en cas de levage.

Source

2012-05-15 22:16:41 Joseph

Sacré s --- !!! Ça l'a fait! Merci beaucoup! J'ai travaillé sur cette fonction pendant 5 heures ... Difficile de croire que c'était quelque chose de si simple ... Pouvez-vous dire que je suis toujours un noob à la programmation? Ha! – Spartacus

@Spartacus chaque personne bien informée a commencé comme un noob à un moment donné: D – Joseph

touche ... Encore une fois, merci beaucoup! – Spartacus

Modifier ceci:

if ([temp[0]] == sname) { sval = temp[1]; }

à ceci:

if (temp[0] == sname) { sval = temp[1]; }

Source

2012-05-15 22:13:32 robrich

C'est ce que j'utilise pour collecter des variables d'URL:

JQUERY EXTENSION

$.extend({ 
    getUrlVars: function(){ 
    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; 
    }, 
    getUrlVar: function(name){ 
    return $.getUrlVars()[name]; 
    } 
});

Et vous pouvez l'utiliser comme ceci:

// blahblahblah.com/recipes.html?r=Ancho-Chile-Sauce 

var r = $.getUrlVar('r'); 

alert(r); // outputs 'Ancho-Chile-Sauce' 

function changePic() { 
    $('#recipe').attr("src", r); 
}

Si vous n'utilisez pas Jquery, une seule solution Javascript serait:

function getQueryVariable(variable) 
{ 
    var query = window.location.search.substring(1); 
    var vars = query.split("&"); 
    for (var i=0;i<vars.length;i++) { 
    var pair = vars[i].split("="); 
    if(pair[0] == variable){return pair[1];} 
    } 
    return(false); 
}

Et peut être utilisé comme ceci:

var r = getQueryVariable("r"); 

alert(r); // outputs 'Ancho-Chile-Sauce' 

function changePic() { 
    document.getElementById("recipe").src = r; 
}

Source

2012-05-15 22:13:33 Zuul

Dois-je simplement remplacer toute ma fonction existante? Et puis comment pourrais-je utiliser la sortie dans mon document.getElementByID ???? – Spartacus

Juste édité les deux options pour montrer comment vous pouvez passer la valeur 'r' à' src' de '# recette'. – Zuul

J'ai écrit un petit script qui me donne accès à l'url paramater dans le passé et cela peut être très efficace. il s'exécute au début du fichier afin que vous puissiez y accéder à tout moment.

GET = (function() { 
    var get = { 
     push:function (key,value){ 
      var cur = this[key]; 
      if (cur.isArray){ 
       this[key].push(value); 
      }else { 
       this[key] = []; 
       this[key].push(cur); 
       this[key].push(value); 
      } 
     } 
    }, 
    search = document.location.search, 
    decode = function (s,boo) { 
     var a = decodeURIComponent(s.split("+").join(" ")); 
     return boo? a.replace(/\s+/g,''):a; 
    }; 
    search.replace(/\??(?:([^=]+)=([^&]*)&?)/g, function (a,b,c) { 
     if (get[decode(b,true)]){ 
      get.push(decode(b,true),decode(c)); 
     }else { 
      get[decode(b,true)] = decode(c); 
     } 
    }); 
    return get; 
})();

Maintenant, vous pouvez accéder aux paramètres souhaités:

blahblahblah.com/recipes.html?r=Ancho-Chile-Sauce 

GET['r']; // will print: Ancho-Chile-Sauce

GET.r;

si le paramètre est répété plusieurs fois puis il est stocké sous forme de tableau;

example.com/test?name=John&name=Smith

la propriété du nom devient un tableau

GET.name[1] ; // Smith

J'espère que cela peut vous aider à

Source

2012-05-15 22:31:34 Ibu

Super, remplacez simplement regexpt par/\ ?? (?: ([^ = &] +) =? ([^ &] *) &?)/G afin qu'il accepte également les valeurs vides sans = – fantastory

parseURLparameters(string) { 
    let parsed = {}; 
    (string.split('?')[1] || string).split('&') 
            .map((item) => { 
             return item.split('='); 
            }) 
            .forEach((item) => { 
             parsed[item[0]] = item[1]; 
            }); 
    return parsed; 
}

vous pouvez donc passer une toute chaîne:

'?asd' 
'?asd=123' 
'asd=&kjnwer=13'

et ainsi sur ...

Source

2018-02-07 12:52:06 philbv

Javascript Url Paramètre d'analyse

Répondre

Questions connexes