web-dev-qa-db-fra.com

Récupère une variable de PHP en JavaScript

Je veux utiliser une variable PHP en JavaScript. Comment est-ce possible?

phpjavascript
46
praveenjayapal

Vous pouvez imprimer la variable PHP dans votre javascript pendant la création de votre page.

<script type="text/javascript">
    var MyJSStringVar = "<?php Print($MyPHPStringVar); ?>";
    var MyJSNumVar = <?php Print($MyPHPNumVar); ?>;
</script>

Bien sûr, ceci est pour simple variables et non objets.

62
Gary Willoughby

Vous pouvez passer PHP Des variables à votre JavaScript en le générant avec PHP:

<?php
$someVar = 1;
?>

<script type="text/javascript">
    var javaScriptVar = "<?php echo $someVar; ?>";
</script>
42
Karsten

Je pense que la solution la plus simple consiste à inclure la bibliothèque javascript jQuery dans vos pages Web, puis à utiliser JSON pour transmettre les données entre les fichiers. deux.

Dans vos pages HTML, vous pouvez demander des données aux scripts PHP comme ceci:

$.getJSON('http://foo/bar.php', {'num1': 12, 'num2': 27}, function(e) {
    alert('Result from PHP: ' + e.result);
});

Dans bar.php, vous pouvez faire ceci:

$num1 = $_GET['num1'];
$num2 = $_GET['num2'];
echo json_encode(array("result" => $num1 * $num2));

C'est ce qu'on appelle habituellement AJAX, et il est utile de donner aux pages Web un aspect plus dynamique et semblable à un bureau (vous n'avez pas besoin d'actualiser la page pour communiquer avec PHP).

D'autres techniques sont plus simples. Comme d'autres l'ont suggéré, vous pouvez simplement générer les données variables à partir de votre script PHP:

$foo = 123;
echo "<script type=\"text/javascript\">\n";
echo "var foo = ${foo};\n";
echo "alert('value is:' + foo);\n";
echo "</script>\n";

De nos jours, la plupart des pages Web utilisent une combinaison des deux.

15
csl

Cela dépend du type de variable PHP que vous voulez utiliser en Javascript. Par exemple, des objets entiers PHP avec des méthodes de classe ne peuvent pas être utilisés en Javascript. Vous pouvez Cependant, utilisez les fonctions intégrées PHP JSON (JavaScript Object Notation)) pour convertir des fichiers simples PHP variables dans les représentations JSON Pour plus d'informations, veuillez lire les liens suivants:

Vous pouvez générer la représentation JSON de votre variable PHP), puis l'imprimer dans votre code Javascript lors du chargement de la page. Par exemple:

<script type="text/javascript">
  var foo = <?php echo json_encode($bar); ?>;
</script>
14
William Brendel
<?php 
$j=1;
?>
<script>
var i = "<?php echo $j; ?>";
//Do something
</script>
<?php
echo $j;
?>

C'est le moyen le plus simple de passer une variable php à javascript sans Ajax.

Vous pouvez également utiliser quelque chose comme ceci:

var i = "<?php echo json_encode($j); ?>";

Cela dit être plus sûr ou plus sécurisé. je pense

7
dk396

Mise à jour: j'ai complètement réécrit cette réponse. L'ancien code est toujours là, en bas, mais je ne le recommande pas.

Vous pouvez obtenir des variables d’accès GET de deux manières principales:

  1. Via le tableau $_GET De PHP (tableau associatif).
  2. Via l'objet location de JavaScript.

Avec PHP, vous pouvez simplement créer un "modèle", qui ressemble à ceci:

<script type="text/javascript">
var $_GET = JSON.parse("<?php echo json_encode($_GET); ?>");
</script>

Cependant, je pense que le mélange de langues ici est bâclé et devrait être évité autant que possible. De toute façon, je ne vois aucune bonne raison de mélanger des données entre PHP et JavaScript).

Cela se résume vraiment à ceci:

  • Si les données peuvent être obtenues via JavaScript, utilisez JavaScript.
  • Si les données ne peuvent pas être obtenues via JavaScript, utilisez AJAX.
  • Si vous devez autrement communiquer avec le serveur, utilisez AJAX.

Puisque nous parlons de $_GET Ici (ou du moins je supposais nous étions quand j'ai écrit la réponse originale), vous devriez obtenir il via JavaScript.

Dans la réponse initiale, j'avais deux méthodes pour obtenir la chaîne de requête, mais celle-ci était trop compliquée et sujette aux erreurs. Ceux-ci sont maintenant au bas de cette réponse.

Quoi qu'il en soit, j'ai conçu une jolie "classe" pour récupérer la chaîne de requête (en fait, un constructeur d'objet, voir la section pertinente à partir de MDN OOP article):

function QuerystringTable(_url){
    // private
    var url   = _url,
        table = {};

    function buildTable(){
        getQuerystring().split('&').filter(validatePair).map(parsePair);
    }

    function parsePair(pair){
        var splitPair = pair.split('='),
            key       = decodeURIComponent(splitPair[0]),
            value     = decodeURIComponent(splitPair[1]);

        table[key] = value;
    }

    function validatePair(pair){
        var splitPair = pair.split('=');

        return !!splitPair[0] && !!splitPair[1];
    }

    function validateUrl(){
        if(typeof url !== "string"){
            throw "QuerystringTable() :: <string url>: expected string, got " + typeof url;
        }

        if(url == ""){
            throw "QuerystringTable() :: Empty string given for argument <string url>";
        }
    }

    // public
    function getKeys(){
        return Object.keys(table);
    }

    function getQuerystring(){
        var string;

        validateUrl();
        string = url.split('?')[1];

        if(!string){
            string = url;
        }

        return string;
    }

    function getValue(key){
        var match = table[key] || null;

        if(!match){
            return "undefined";
        }

        return match;
    }

    buildTable();
    this.getKeys        = getKeys;
    this.getQuerystring = getQuerystring;
    this.getValue       = getValue;
}

démo JSFiddle

function main(){
    var imaginaryUrl = "http://example.com/webapp/?search=how%20to%20use%20Google&the_answer=42",
        qs = new QuerystringTable(imaginaryUrl);

    urlbox.innerHTML = "url: " + imaginaryUrl;
    
    logButton(
        "qs.getKeys()",
        qs.getKeys()
        .map(arrowify)
        .join("\n")
    );
    
    logButton(
        'qs.getValue("search")',
        qs.getValue("search")
        .arrowify()
    );
    
    logButton(
        'qs.getValue("the_answer")',
        qs.getValue("the_answer")
        .arrowify()
    );
    
    logButton(
        "qs.getQuerystring()",
        qs.getQuerystring()
        .arrowify()
    );
}

function arrowify(str){
    return "  -> " + str;
}

String.prototype.arrowify = function(){
    return arrowify(this);
}

function log(msg){
    txt.value += msg + '\n';
    txt.scrollTop = txt.scrollHeight;
}

function logButton(name, output){
    var el = document.createElement("button");
    
    el.innerHTML = name;
    
    el.onclick = function(){
        log(name);
        log(output);
        log("- - - -");
    }
    
    buttonContainer.appendChild(el);
}

function QuerystringTable(_url){
    // private
    var url = _url,
        table = {};

    function buildTable(){
        getQuerystring().split('&').filter(validatePair).map(parsePair);
    }

    function parsePair(pair){
        var splitPair = pair.split('='),
            key       = decodeURIComponent(splitPair[0]),
            value     = decodeURIComponent(splitPair[1]);

        table[key] = value;
    }

    function validatePair(pair){
        var splitPair = pair.split('=');

        return !!splitPair[0] && !!splitPair[1];
    }

    function validateUrl(){
        if(typeof url !== "string"){
            throw "QuerystringTable() :: <string url>: expected string, got " + typeof url;
        }

        if(url == ""){
            throw "QuerystringTable() :: Empty string given for argument <string url>";
        }
    }

    // public
    function getKeys(){
        return Object.keys(table);
    }

    function getQuerystring(){
        var string;

        validateUrl();
        string = url.split('?')[1];

        if(!string){
            string = url;
        }

        return string;
    }

    function getValue(key){
        var match = table[key] || null;

        if(!match){
            return "undefined";
        }

        return match;
    }

    buildTable();
    this.getKeys        = getKeys;
    this.getQuerystring = getQuerystring;
    this.getValue       = getValue;
}

main();
#urlbox{
    width: 100%;
    padding: 5px;
    margin: 10px auto;
    font: 12px monospace;
    background: #fff;
    color: #000;
}

#txt{
    width: 100%;
    height: 200px;
    padding: 5px;
    margin: 10px auto;
    resize: none;
    border: none;
    background: #fff;
    color: #000;
    displaY:block;
}

button{
    padding: 5px;
    margin: 10px;
    width: 200px;
    background: #eee;
    color: #000;
    border:1px solid #ccc;
    display: block;
}

button:hover{
    background: #fff;
    cursor: pointer;
}
<p id="urlbox"></p>
<textarea id="txt" disabled="true"></textarea>
<div id="buttonContainer"></div>

Il est beaucoup plus robuste, ne repose pas sur regex, combine les meilleures parties des deux approches précédentes et validera votre saisie. Vous pouvez lui donner des chaînes de requête autres que celle de l'URL, et l'échec sera fort si vous donnez une mauvaise entrée. De plus, comme un bon objet/module, il ne sait rien ni ne se soucie de rien en dehors de la définition de classe, il peut donc être utilisé avec n'importe quoi.

Le constructeur remplit automatiquement sa table interne et décode chaque chaîne de sorte que ...?foo%3F=bar%20baz&ampersand=this%20thing%3A%20%26, Par exemple, devienne:

{
    "foo?"      : "bar baz",
    "ampersand" : "this thing: &"
}

Tout le travail est fait pour vous lors de l'instanciation.

Voici comment l'utiliser:

var qst = new QuerystringTable(location.href);
qst.getKeys()        // returns an array of keys
qst.getValue("foo")  // returns the value of foo, or "undefined" if none.
qst.getQuerystring() // returns the querystring

C'est beaucoup mieux. Et laisser la partie url au programmeur permet à la fois de l’utiliser dans des environnements autres que les navigateurs (testé à la fois node.js Et a browser), Et permet un scénario dans lequel vous voudrez peut-être comparer deux chaînes de requête différentes.

var qs1 = new QuerystringTable(/* url #1 */),
    qs2 = new QuerystringTable(/* url #2 */);

if (qs1.getValue("vid") !== qs2.getValue("vid")){
    // Do something
}

Comme je l'ai dit plus haut, cette réponse fait référence à deux méthodes compliquées. Je les garde ici pour que les lecteurs n'aient pas à parcourir l'historique des révisions pour les trouver. Les voici:

1) Direct parse by function. Cela ne fait que saisir l’URL et l’analyser directement avec RegEx

$_GET=function(key,def){
    try{
        return RegExp('[?&;]'+key+'=([^?&#;]*)').exec(location.href)[1]
    }catch(e){
        return def||''
    }
}

Peasy facile, si la chaîne de requête est ?ducksays=quack&bearsays=growl, Alors $_GET('ducksays') devrait renvoyer quack et $_GET('bearsays') devrait renvoyer growl

Maintenant, vous remarquerez probablement instantanément que la syntaxe est différente du fait qu’elle est une fonction. Au lieu de $_GET[key], Il s'agit de $_GET(key). Eh bien, j'ai pensé à ça :)

Voici la deuxième méthode:

2) Object Build by Loop

onload=function(){
    $_GET={}//the lack of 'var' makes this global
    str=location.search.split('&')//not '?', this will be dealt with later
    for(i in str){
        REG=RegExp('([^?&#;]*)=([^?&#;]*)').exec(str[i])
        $_GET[REG[1]]=REG[2]
    }
}

Voir! $ _GET est maintenant un objet contenant un index de chaque objet dans l'URL, c'est donc maintenant possible:

$_GET['ducksays']//returns 'quack'

ET c'est possible

for(i in $_GET){
    document.write(i+': '+$_GET[i]+'<hr>')
}

Ceci est certainement pas possible avec la fonction.

Encore une fois, je ne recommande pas cet ancien code. C'est mal écrit.

5
Braden Best