it-swarm.com.de

Get variable from PHP to JavaScript

Ich möchte eine PHP in JavaScript verwenden. Wie ist das möglich?

46
praveenjayapal

Sie können die Variable PHP in Ihr Javascript drucken, während Ihre Seite erstellt wird.

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

Dies gilt natürlich für einfache Variablen und nicht für Objekte.

62
Gary Willoughby

Sie können PHP Variablen an Ihr JavaScript übergeben, indem Sie es mit PHP generieren:

<?php
$someVar = 1;
?>

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

Ich denke, der einfachste Weg ist es, die JavaScript-Bibliothek jQuery in Ihre Webseiten aufzunehmen und dann JSON als Format zu verwenden, um Daten zwischen den zu übertragen zwei.

In Ihren HTML-Seiten können Sie Daten aus den PHP Skripten wie folgt anfordern:

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

In bar.php können Sie dies tun:

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

Dies wird normalerweise als AJAX bezeichnet. Es ist hilfreich, Webseiten dynamischer und desktopähnlicher zu gestalten (Sie müssen nicht die gesamte Seite aktualisieren, um mit PHP zu kommunizieren).

Andere Techniken sind einfacher. Wie andere vorgeschlagen haben, können Sie die variablen Daten einfach aus Ihrem PHP Skript generieren:

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

Die meisten Webseiten verwenden heutzutage eine Kombination aus beiden.

15
csl

Dies hängt davon ab, welche Art von PHP - Variable Sie in Javascript verwenden möchten. Beispielsweise können ganze PHP - Objekte mit Klassenmethoden in Javascript nicht verwendet werden. Sie können Verwenden Sie jedoch die integrierten PHP JSON (JavaScript Object Notation) -Funktionen, um einfache PHP -Variablen in JSON-Darstellungen. Weitere Informationen finden Sie unter den folgenden Links:

Sie können die JSON-Darstellung Ihrer PHP) -Variablen generieren und sie dann beim Laden der Seite in Ihren Javascript-Code drucken. Beispiel:

<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;
?>

Dies ist der einfachste Weg, eine PHP-Variable ohne Ajax an Javascript zu übergeben.

Sie können auch so etwas verwenden:

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

Dies gilt als sicherer oder sicherer. Ich glaube

7
dk396

Update: Ich habe diese Antwort komplett umgeschrieben. Der alte Code befindet sich immer noch unten, aber ich kann ihn nicht empfehlen.


Es gibt zwei Möglichkeiten, wie Sie auf GET Variablen zugreifen können:

  1. Über das PHP-Array $_GET (Assoziatives Array).
  2. Über das Objekt location von JavaScript.

Mit PHP können Sie einfach eine "Vorlage" erstellen, die ungefähr so ​​aussieht:

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

Ich denke jedoch, dass die Mischung der Sprachen hier schlampig ist und nach Möglichkeit vermieden werden sollte. Ich kann mir sowieso keine guten Gründe vorstellen, Daten zwischen PHP und JavaScript zu mischen.

Es läuft wirklich darauf hinaus:

  • Wenn die Daten über JavaScript abgerufen werden können, verwenden Sie JavaScript.
  • Wenn die Daten nicht über JavaScript abgerufen werden können, verwenden Sie AJAX.
  • Wenn Sie ansonsten mit dem Server kommunizieren müssen, verwenden Sie AJAX.

Da es sich hier um $_GET Handelt (oder zumindest von mir angenommen wurde , als ich die ursprüngliche Antwort geschrieben habe), sollten Sie dies erhalten es über JavaScript.

In der ursprünglichen Antwort hatte ich zwei Methoden, um die Abfragezeichenfolge abzurufen, aber sie war zu unübersichtlich und fehleranfällig. Diese sind jetzt am Ende dieser Antwort.

Wie auch immer, ich habe eine nette kleine "Klasse" entworfen, um die Abfragezeichenfolge abzurufen (eigentlich ein Objektkonstruktor, siehe den entsprechenden Abschnitt aus dem OOP Artikel):

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;
}

JSFiddle-Demo

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>

Es ist viel robuster, verlässt sich nicht auf reguläre Ausdrücke, kombiniert die besten Teile der beiden vorherigen Ansätze und validiert Ihre Eingaben. Sie können ihm andere als die in der URL angegebenen Abfragezeichenfolgen geben, und es schlägt laut fehl, wenn Sie eine falsche Eingabe machen. Darüber hinaus kennt oder kümmert es sich wie ein gutes Objekt/Modul nicht um etwas außerhalb der Klassendefinition, sodass es mit irgendetwas verwendet werden kann.

Der Konstruktor füllt automatisch seine interne Tabelle und decodiert jeden String so, dass ...?foo%3F=bar%20baz&ampersand=this%20thing%3A%20%26 Beispielsweise intern wird:

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

Die gesamte Arbeit wird bei der Instanziierung für Sie erledigt.

So verwenden Sie es:

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

Das ist viel besser. Wenn Sie den URL-Teil dem Programmierer überlassen, kann dies in Umgebungen ohne Browser verwendet werden (getestet in node.js Und a browser) Und ermöglicht ein Szenario, in dem Sie möglicherweise vergleichen möchten zwei verschiedene Abfragezeichenfolgen.

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

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

Wie ich oben sagte, gab es zwei chaotische Methoden, auf die in dieser Antwort verwiesen wird. Ich behalte sie hier, damit die Leser nicht die Änderungshistorie durchsuchen müssen, um sie zu finden. Hier sind sie:

1) Direct parse by function. Dadurch wird nur die URL erfasst und direkt mit RegEx analysiert

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

Einfach einfach, wenn die Abfragezeichenfolge ?ducksays=quack&bearsays=growl Ist, sollte $_GET('ducksays')quack und $_GET('bearsays')growl zurückgeben.

Jetzt werden Sie wahrscheinlich sofort bemerken, dass die Syntax aufgrund der Funktion anders ist. Anstelle von $_GET[key] Steht $_GET(key). Naja, daran habe ich gedacht :)

Hier kommt die zweite Methode:


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]
    }
}

Erblicken! $ _GET ist jetzt ein Objekt, das einen Index für jedes Objekt in der URL enthält. Dies ist also jetzt möglich:

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

UND das ist möglich

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

Dies ist mit der Funktion definitiv nicht möglich .


Auch diesen alten Code empfehle ich nicht. Es ist schlecht geschrieben.

5
Braden Best