valor - save php variable in javascript

Obtener variable de PHP a JavaScript

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Cómo pasar variables y datos de PHP a JavaScript? 17 respuestas

Quiero usar una variable PHP en JavaScript. ¿Como es posible?

Answer 1

Actualización: reescribí completamente esta respuesta. El código anterior todavía está allí, en la parte inferior, pero no lo recomiendo.

Hay dos formas principales para obtener acceso a las variables GET :

1. A través de la matriz $_GET PHP (matriz asociativa).
2. A través del objeto de location de JavaScript.

Con PHP, puede hacer una "plantilla", que es más o menos así:

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

Sin embargo, creo que la mezcla de idiomas aquí es descuidada y debería evitarse siempre que sea posible. Realmente no puedo pensar en ninguna buena razón para mezclar datos entre PHP y JavaScript de todos modos.

Realmente se reduce a esto:

• Si los datos se pueden obtener a través de JavaScript, use JavaScript.
• Si los datos no se pueden obtener a través de JavaScript, use AJAX.
• Si necesita comunicarse con el servidor, use AJAX.

Ya que estamos hablando de $_GET aquí (o al menos asumí que éramos cuando escribí la respuesta original), debe obtenerlo a través de JavaScript.

En la respuesta original, tenía dos métodos para obtener la cadena de consulta, pero era demasiado complicada y propensa a errores. Esos ahora están en la parte inferior de esta respuesta.

De todos modos, diseñé una pequeña y agradable "clase" para obtener la cadena de consulta (en realidad, un constructor de objetos, consulte la sección correspondiente del artículo OOP de MDN):

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

Demostración de 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>

Es mucho más robusto, no se basa en expresiones regulares, combina las mejores partes de los enfoques anteriores y validará su entrada. Puede darle cadenas de consulta que no sean la de la url, y fallará si da una mala entrada. Además, como un buen objeto / módulo, no sabe ni le importa nada fuera de la definición de la clase, por lo que se puede usar con cualquier cosa.

El constructor completa automáticamente su tabla interna y decodifica cada cadena de manera que ...?foo%3F=bar%20baz&ampersand=this%20thing%3A%20%26 , por ejemplo, se convertirá internamente en:

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

Todo el trabajo está hecho para ti en instanciación.

He aquí cómo usarlo:

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

Eso está mucho mejor. Y dejar la parte de la url al programador permite que esto se use en entornos que no sean de navegador (probados tanto en node.js como en a browser ), y permite un escenario donde es posible que desee comparar dos cadenas de consulta diferentes.

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

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

Como dije antes, hubo dos métodos desordenados a los que se hace referencia en esta respuesta. Los mantengo aquí para que los lectores no tengan que buscar en el historial de revisiones para encontrarlos. Aquí están:

1) Direct parse by function . Esto simplemente toma la URL y la analiza directamente con RegEx

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

Easy peasy, si la cadena de consulta es ?ducksays=quack&bearsays=growl , entonces $_GET(''ducksays'') debería devolver quack y $_GET(''bearsays'') debería devolver growl

Ahora probablemente notes de inmediato que la sintaxis es diferente como resultado de ser una función. En lugar de $_GET[key] , es $_GET(key) . Bueno, pensé en eso :)

Aquí viene el segundo método:

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

¡Mirad! $ _GET ahora es un objeto que contiene un índice de cada objeto en la url, por lo que ahora esto es posible:

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

Y esto es posible

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

Esto definitivamente no es posible con la función.

De nuevo, no recomiendo este código antiguo. Está mal escrito.

Answer 2

Creo que la ruta más fácil es incluir la biblioteca jQuery javascript en sus páginas web, luego usar JSON como formato para pasar datos entre los dos.

En sus páginas HTML, puede solicitar datos de los scripts PHP de esta manera:

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

En bar.php puedes hacer esto:

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

Esto es lo que generalmente se llama AJAX, y es útil para darle a las páginas web una sensación más dinámica y de escritorio (no es necesario que actualice toda la página para comunicarse con PHP).

Otras técnicas son más simples. Como otros han sugerido, simplemente puede generar los datos variables de su script PHP:

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

La mayoría de las páginas web hoy en día usan una combinación de ambas.

Answer 3

Depende del tipo de variable de PHP que quiera usar en Javascript. Por ejemplo, objetos enteros de PHP con métodos de clase no se pueden usar en Javascript. Sin embargo, puede utilizar las funciones incorporadas de PHP JSON (JavaScript Object Notation) para convertir variables PHP simples en representaciones JSON. Para obtener más información, lea los siguientes enlaces:

• PHP JSON Manual
• json_encode PHP json_encode
• json_decode PHP json_decode

Puede generar la representación JSON de su variable PHP y luego imprimirla en su código JavaScript cuando se carga la página. Por ejemplo:

<script type="text/javascript">
  var foo = <?php echo json_encode($bar); ?>;
</script>

Answer 4

Puede imprimir la variable de PHP en su javascript mientras se crea su página.

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

Por supuesto, esto es para variables simples y no objetos.

Answer 5

Puede pasar variables de PHP a su JavaScript generándolo con PHP:

<?php
$someVar = 1;
?>

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

Answer 6

<?php 
$j=1;
?>
<script>
var i = "<?php echo $j; ?>";
//Do something
</script>
<?php
echo $j;
?>

Esta es la forma más fácil de pasar una variable php a javascript sin Ajax.

También puedes usar algo como esto:

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

Esto se dice que es más seguro o más seguro. creo