valor - pasar variable de javascript a php sin recargar

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

Question

Tengo una variable en PHP, y necesito su valor en mi código JavaScript. ¿Cómo puedo obtener mi variable de PHP a JavaScript?

Tengo un código que se ve así:

<?php
     ...
     $val = $myService->getValue(); // makes an api and db call
?>

Tengo un código JavaScript que necesita val y busca en las líneas de:

<script>
    myPlugin.start($val); // tried this, didn''t work
    <?php myPlugin.start($val); ?> // this didn''t work either
    myPlugin.start(<?=$val?> // this works sometimes, but sometimes it fails
</script>

Answer 1

Aquí está el truco:

1. Aquí está tu ''PHP'' para usar esa variable:

   <?php 
       $name = ''PHP variable'';
       echo ''<script>'';
       echo ''var name = '' . json_encode($name) . '';'';
       echo ''</script>'';
   ?>

2. Ahora tienes una variable JS llamada ''name'' , y aquí está tu ''Javascript'' para usar esa variable:

   <script>
        console.log("i am everywhere " + name);
   </script>

Answer 2

Aquí hay uno que no veo publicado como una opción. Es similar al uso de ajax, pero claramente diferente.

Primero, establezca la fuente de un script directamente en un archivo PHP.

<script type="text/javascript" src="url_to_your_php_file.php" /></script>

Incluso podría volver a pasar una variable al archivo PHP como este ejemplo:

<script type="text/javascript" src="url_to_your_php_file.php?var1=value1" /></script>

entonces en "your_php_file.php":

<?php
// THIS IS A SIMPLE EXAMPLE
// it demonstrates one method of using the src attribute to link
// to a PHP file which can generate javascripts dynamically
// and share data between PHP and javascript
// you may take this learning example and develop it further
// relying on your own coding skills for validating data
// and avoiding errors, of course
header( ''content-type: text/javascript'' );

// if you pass a $_GET variable from the javascript
// you should add code to validate your $_GET variable(s)

// you can add code to query a database
// using $_GET[''var1''] or some other criteria

// you can add simple variable assignments
$value = ''some value'';

// for the OP''s needs (assumes the class object has been defined)
$val = $myService->getValue();

?>
function name() {
    // pay attention because you need to use quotes properly
    // and account for possible quotes in the variable strings
    // to avoid both php and javascript errors
    // example assumes $val has been returned as a string
    // validate $val as needed using your method of choice
    var example1 = ''<?php echo ''"'' . $val . ''"''; ?>'';
    var example2 = ''<?php echo ''"'' . $value . ''"''; ?>'';
    var example3 = ''<?php echo ''"some other data"''; ?>'';
    alert( example1 + '' / '' + example2 );
}
<?php
// you may even want to include additional files (.php or .js, etc)
@include ''local_path_to_some_other_js_file.js'';
@include ''local_path_to_some_other_php_file.php'';

exit;
?>

Answer 3

Asumiré que los datos a transmitir son una cadena.

Como han comentado otros comentaristas, AJAX es una solución posible, pero las desventajas superan a las ventajas: tiene una latencia y es más difícil de programar (necesita el código para recuperar el valor del servidor y del cliente), cuando es más simple la función de escape debería ser suficiente.

Así que, estamos de vuelta para escapar. json_encode($string) funciona si primero codifica la cadena fuente como UTF-8 en caso de que no lo esté, porque json_encode requiere datos UTF-8. Si la cadena está en ISO-8859-1, entonces simplemente puede usar json_encode(utf8_encode($string)) ; De lo contrario, siempre puedes usar iconv para hacer la conversión primero.

Pero hay un gran gotcha. Si lo está utilizando en eventos, debe ejecutar htmlspecialchars() en el resultado para que sea el código correcto. Y luego debe tener cuidado de usar comillas dobles para encerrar el evento, o agregar siempre ENT_QUOTES a htmlspecialchars. Por ejemplo:

<?php
    $myvar = "I''m in /"UTF-8/" encoding and I have <script>script tags</script> & ampersand!";
    // Fails:
    //echo ''<body onload="alert('', json_encode($myvar), '');">'';
    // Fails:
    //echo "<body onload=''alert(", json_encode($myvar), ");''>";
    // Fails:
    //echo "<body onload=''alert(", htmlspecialchars(json_encode($myvar)), ");''>";

    // Works:
    //echo "<body onload=''alert(", htmlspecialchars(json_encode($myvar), ENT_QUOTES), ");''>";
    // Works:
    echo ''<body onload="alert('', htmlspecialchars(json_encode($myvar)), '');">'';

    echo "</body>";

Sin embargo, no se puede usar htmlspecialcharsen el código JS regular (código incluido en <script>... </script>etiquetas). Eso hace que esta función sea propensa a errores, olvidando htmlspecialcharsel resultado al escribir el código de evento.

Es posible escribir una función que no tenga ese problema, y ​​puede usarse tanto en eventos como en el código JS regular, siempre que incluya sus eventos siempre entre comillas simples o entre comillas dobles. Aquí está mi propuesta, requiriendo que estén entre comillas dobles (que yo prefiero):

<?php

// Optionally pass the encoding of the source string, if not UTF-8
function escapeJSString($string, $encoding = ''UTF-8'')
{
    if ($encoding != ''UTF-8'')
        $string = iconv($encoding, ''UTF-8'', $string);
    $flags = JSON_HEX_TAG|JSON_HEX_AMP|JSON_HEX_APOS|JSON_HEX_QUOT|JSON_UNESCAPED_SLASHES;
    $string = substr(json_encode($string, $flags), 1, -1);
    return "''$string''";
}

La función requiere PHP 5.4+. Ejemplo de uso:

<?php
    $myvar = "I''m in /"UTF-8/" encoding and I have <script>script tags</script> & ampersand!";
    // Note use of double quotes to enclose the event definition!
    echo ''<body onload="alert('', escapeJSString($myvar), '');">'';
    // Example with regular code:
    echo ''<script>alert('', escapeJSString($myvar), '');</script>'';
    echo ''</body>'';

Answer 4

Después de muchas investigaciones, encontré el método más fácil para pasar todo tipo de variables fácilmente.

En su script php, tiene dos variables, y está intentando enviarlas a sus scripts js:

$php_var1 ="Hello world;
$php_var2 ="Helloow";
echo ''<script>'';
echo ''var js_variable1= '' . json_encode($php_var1) . '';'';
echo ''var js_variable2= '' . json_encode($php_var2) . '';'';
echo ''</script>'';

En cualquiera de sus javascript llamados en su página, simplemente llame a las vars.

Espero haber ayudado a alguien!

Answer 5

Digamos que su variable es siempre entera, en ese caso esto es más fácil.

<?PHP
$number = 4;

echo ''<script>'';
echo ''var number = '' . $number . '';'';
echo ''alert(number);'';
echo ''</script>'';

?>

salida :

<script>var number = 4;alert(number);</script>

digamos que su variable no es un número entero, pero si prueba el método anterior obtendrá algo como esto:

<script>var number = abcd;alert(number);</script>

pero en javascript esto es un error de sintaxis.

así que en php tenemos una función llamada json_encode que codifica una cadena a un objeto json.

<?PHP
$number = ''abcd'';

echo ''<script>'';
echo ''var number = '' . json_encode($number) . '';'';
echo ''alert(number);'';
echo ''</script>'';

?>

desde abcd en json es "abcd" , por lo que se ve así:

<script>var number = "abcd";alert(number);</script>

Puedes usar el mismo método para arrays:

<?PHP
$details = [
''name'' => ''supun'',
''age'' => 456,
''weight'' => ''55''
];

echo ''<script>'';
echo ''var details = '' . json_encode($details) . '';'';
echo ''alert(details);'';
echo ''console.log(details);'';
echo ''</script>'';

?>

y su javascript se ve así:

<script>var details = {"name":"supun","age":456,"weight":"55"};alert(details);console.log(details);</script>

salida de consola

Answer 6

En realidad, hay varios enfoques para hacer esto. Algunos requieren más gastos generales que otros, y algunos se consideran mejores que otros.

En ningún orden en particular:

1. Use AJAX para obtener los datos que necesita del servidor.
2. Haga eco de los datos en la página en algún lugar, y use JavaScript para obtener la información del DOM.
3. Echo los datos directamente a JavaScript.

En esta publicación, examinaremos cada uno de los métodos anteriores y veremos los pros y los contras de cada uno, así como la forma de implementarlos.

1. Utilice AJAX para obtener los datos que necesita del servidor

Este método se considera el mejor, porque las secuencias de comandos del lado del servidor y del lado del cliente están completamente separadas .

Pros

• Mejor separación entre capas : si mañana dejas de usar PHP y quieres moverte a un servlet, a una API REST oa algún otro servicio, no tienes que cambiar gran parte del código JavaScript.
• Más legible : JavaScript es JavaScript, PHP es PHP. Sin mezclar los dos, obtienes un código más legible en ambos idiomas.
• Permite la transferencia asíncrona de datos : obtener la información de PHP puede ser costoso en tiempo / recursos. A veces, simplemente no desea esperar la información, cargar la página y tener acceso a la información en cualquier momento.
• Los datos no se encuentran directamente en el marcado . Esto significa que su marcado se mantiene limpio de cualquier información adicional, y solo JavaScript lo ve.

Contras

• Latencia : AJAX crea una solicitud HTTP y las solicitudes HTTP se transmiten a través de la red y tienen latencias de red.
• Estado : los datos obtenidos a través de una solicitud HTTP por separado no incluirán ninguna información de la solicitud HTTP que haya obtenido el documento HTML. Es posible que necesite esta información (por ejemplo, si el documento HTML se genera en respuesta a un envío del formulario) y, si lo hace, tendrá que transferirlo de alguna manera. Si ha descartado incrustar los datos en la página (que tiene si está utilizando esta técnica), entonces eso lo limita a cookies / sesiones que pueden estar sujetas a condiciones de carrera.

Ejemplo de implementación

Con AJAX, necesita dos páginas, una es donde PHP genera la salida, y la segunda es donde JavaScript obtiene esa salida:

get-data.php

/* Do some operation here, like talk to the database, the file-session
 * The world beyond, limbo, the city of shimmers, and Canada.
 * 
 * AJAX generally uses strings, but you can output JSON, HTML and XML as well. 
 * It all depends on the Content-type header that you send with your AJAX
 * request. */

echo json_encode(42); //In the end, you need to echo the result. 
                      //All data should be json_encode()d.

                      //You can json_encode() any value in PHP, arrays, strings,
                      //even objects.

index.php (o como se llame la página actual)

<!-- snip -->
<script>
    function reqListener () {
      console.log(this.responseText);
    }

    var oReq = new XMLHttpRequest(); //New request object
    oReq.onload = function() {
        //This is where you handle what to do with the response.
        //The actual data is found on this.responseText
        alert(this.responseText); //Will alert: 42
    };
    oReq.open("get", "get-data.php", true);
    //                               ^ Don''t block the rest of the execution.
    //                                 Don''t wait until the request finishes to 
    //                                 continue.
    oReq.send();
</script>
<!-- snip -->

La combinación anterior de los dos archivos alertará 42 cuando el archivo termine de cargarse.

Un poco más de material de lectura.

• Usando XMLHttpRequest - MDN
• Referencia de objeto XMLHttpRequest - MDN
• ¿Cómo devuelvo la respuesta de una llamada asíncrona?

2. Haga eco de los datos en la página en algún lugar, y use JavaScript para obtener la información del DOM

Este método es menos preferible a AJAX, pero aún tiene sus ventajas. Todavía está relativamente separado entre PHP y JavaScript en el sentido de que no hay PHP directamente en el JavaScript.

Pros

• Rápido : las operaciones de DOM son a menudo rápidas, y puede almacenar y acceder a una gran cantidad de datos de manera relativamente rápida.

Contras

• Marcado potencialmente sin importancia : por lo general, lo que sucede es que usa algún tipo de <input type=hidden> para almacenar la información, porque es más fácil obtener la información de inputNode.value , pero al hacerlo significa que tiene un elemento sin sentido en tu HTML HTML tiene el elemento <meta> para datos sobre el documento, y HTML 5 introduce atributos de datos data-* para datos específicamente para lectura con JS que pueden asociarse con elementos particulares.
• Se ensucia la fuente : los datos que PHP genera se envían directamente a la fuente HTML, lo que significa que obtienes una fuente HTML más grande y menos enfocada.
• Más difícil obtener datos estructurados : los datos estructurados tendrán que ser HTML válido, de lo contrario, tendrá que escapar y convertir las cadenas usted mismo.
• Juntar PHP firmemente a su lógica de datos - Debido a que PHP se utiliza en la presentación, no puede separar los dos de manera limpia.

Ejemplo de implementación

Con esto, la idea es crear algún tipo de elemento que no se mostrará al usuario, pero es visible para JavaScript.

index.php

<!-- snip -->
<div id="dom-target" style="display: none;">
    <?php 
        $output = "42"; //Again, do some operation, get the output.
        echo htmlspecialchars($output); /* You have to escape because the result
                                           will not be valid HTML otherwise. */
    ?>
</div>
<script>
    var div = document.getElementById("dom-target");
    var myData = div.textContent;
</script>
<!-- snip -->

3. Hacer eco de los datos directamente a JavaScript.

Este es probablemente el más fácil de entender y el más horrible de usar. No hagas esto a menos que sepas lo que estás haciendo.

Pros

• Muy fácilmente implementado : se necesita muy poco para implementar esto y comprender.
• Fuente no sucia : las variables se envían directamente a JavaScript, por lo que el DOM no se ve afectado.

Contras

• Inseguro : PHP no tiene funciones de escape de JavaScript triviales, y no son triviales de implementar. Especialmente cuando utiliza entradas de usuario, usted es extremadamente vulnerable a las inyecciones de segundo nivel. Disputado ver comentarios
• Juntar PHP firmemente a su lógica de datos - Debido a que PHP se utiliza en la presentación, no puede separar los dos de manera limpia.
• Los datos estructurados son difíciles : probablemente puedas hacer JSON ... un poco. Pero XML y HTML requerirán atención especial.

Ejemplo de implementación

La implementación es relativamente sencilla:

<!-- snip -->
<script>
    var data = <?php echo json_encode("42", JSON_HEX_TAG); ?>; //Don''t forget the extra semicolon!
</script>
<!-- snip -->

¡Buena suerte!

Answer 7

He salido con un método fácil para asignar variables de JavaScript usando PHP.

Utiliza atributos de datos HTML5 para almacenar variables de PHP y luego se asigna a JavaScript en la carga de la página.

El tutorial completo se puede encontrar here

Ejemplo:

<?php

$variable_1 = "QNimate";
$variable_2 = "QScutter";

?>
    <span id="storage" data-variable-one="<?php echo $variable_1; ?>" data-variable-two="<?php echo $variable_2; ?>"></span>
<?php

El suyo es el código JS.

var variable_1 = undefined;
var variable_2 = undefined;

window.onload = function(){
    variable_1 = document.getElementById("storage").getAttribute("data-variable-one");
    variable_2 = document.getElementById("storage").getAttribute("data-variable-two");
}

Answer 8

Me gusta bastante la forma en que Wordpress funciona con sus funciones de puesta en enqueue y localize , por lo que siguiendo ese modelo, escribí una clase simple para colocar los scripts en la página de acuerdo con las dependencias del script y para hacer disponibles datos adicionales para el script.

class mHeader {

    private $scripts = array();

    /**
     * @param string $id        unique script identifier
     * @param string $src   script src attribute
     * @param array  $deps      an array of dependencies ( script identifiers ).
     * @param array  $data      an array, data that will be json_encoded and available to the script.
     */
    function enqueue_script( $id, $src, $deps = array(), $data = array() ) {
        $this->scripts[$id] = array( ''src'' => $src, ''deps'' => $deps, ''data'' => $data );
    }

    private function dependencies( $script ) {
        if ( $script[''deps''] ) {
            return array_map( array( $this, ''dependencies'' ), array_intersect_key( $this->scripts, array_flip( $script[''deps''] ) ) );
        }
    }

    private function _unset( $key, &$deps, &$out ) {
        $out[$key] = $this->scripts[$key];
        unset( $deps[$key] );
    }

    private function flattern( &$deps, &$out = array() ) {

        foreach( $deps as $key => $value ) {            
            empty($value) ? $this->_unset( $key, $deps, $out ) : $this->flattern( $deps[$key], $out );
        }
    }   

    function print_scripts() {

        if ( !$this->scripts ) return;

        $deps = array_map( array( $this, ''dependencies'' ), $this->scripts );
        while ( $deps ) 
            $this->flattern( $deps, $js );

        foreach( $js as $key => $script ) {
            $script[''data''] && printf( "<script> var %s = %s; </script>" . PHP_EOL, key( $script[''data''] ), json_encode( current( $script[''data''] ) ) );
            echo "<script id=/"$key-js/" src=/"$script[src]/" type=/"text/javascript/"></script>" . PHP_EOL;
        }
    }
}

La función de llamada a enqueue_script() es para agregar un script, configurar la fuente y las dependencias de otros scripts, y datos adicionales necesarios para el script.

$header = new mHeader();

$header->enqueue_script( ''jquery-ui'', ''//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js'', array( ''jquery'' ) );
$header->enqueue_script( ''jquery'', ''//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'' );
$header->enqueue_script( ''custom-script'', ''//custom-script.min.js'', array( ''jquery-ui'' ), array( ''mydata'' => array( ''value'' => 20 ) ) );

$header->print_scripts();

Y, el método print_scripts() del ejemplo anterior enviará esta salida:

<script id="jquery-js" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script id="jquery-ui-js" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js" type="text/javascript"></script>
<script> var mydata = {"value":20}; </script>
<script id="custom-script-js" src="//custom-script.min.js" type="text/javascript"></script>

Independientemente del hecho de que el script ''jquery'' se encoja después del ''jquery-ui'', se imprime antes porque está definido en ''jquery-ui'' que depende de ''jquery''. Los datos adicionales para el ''script personalizado'' están dentro de un nuevo bloque de script y se colocan frente a él, contiene el objeto mydata que contiene datos adicionales, ahora disponibles para el ''script personalizado''.

Answer 9

Normalmente uso los atributos de datos en html.

<div class="service-container" data-service="<?php echo $myService->getValue(); ?>">

</div>

<script>
$(document).ready(function() {
    $(''.service-container'').each(function() {
        var container = $(this);
        var service = container.data(''service'');

        // service variable now contains the value of $myService->getValue();
    });
});
</script>

Este ejemplo utiliza jQuery pero puede adaptarse a otra biblioteca o Javascript de vainilla.

Puede leer más sobre la propiedad del conjunto de datos aquí: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset

Answer 10

Voy a intentar una respuesta más simple:

Explicación del problema

Primero, entendamos el flujo de eventos cuando una página es servida desde nuestro servidor:

• Primero se ejecuta PHP, genera el HTML que se sirve al cliente.
• Luego, el HTML se entrega al cliente, después de que PHP termine con él, me gustaría enfatizar que una vez que el código abandona el servidor, PHP termina con él y ya no puede acceder a él.
• Luego, el HTML con JavaScript llega al cliente, que puede ejecutar JS en ese html.

Entonces, lo más importante que debemos recordar aquí es que HTTP no tiene estado . Una vez que una solicitud salió del servidor, el servidor no puede tocarlo. Entonces, eso deja nuestras opciones para:

1. Enviar más solicitudes del cliente después de que se realiza la solicitud inicial.
2. Codifique lo que el servidor tenía que decir en la solicitud inicial.

Soluciones

Esa es la pregunta central que debe hacerse:

¿Estoy escribiendo un sitio web o una aplicación?

Los sitios web se basan principalmente en la página, y los tiempos de carga de la página deben ser lo más rápidos posible (por ejemplo, Wikipedia). Las aplicaciones web son más pesadas en AJAX y realizan muchos viajes de ida y vuelta para obtener información rápida para el cliente (por ejemplo, un panel de control de valores).

Sitio web

El envío de más solicitudes desde el cliente después de que se realiza la solicitud inicial es lento, ya que requiere más solicitudes HTTP que tienen una sobrecarga significativa. Además, requiere asincronía, ya que realizar una solicitud AJAX requiere un controlador para cuando esté completo.

No recomendaría realizar otra solicitud a menos que su sitio sea una aplicación para obtener esa información del servidor.

Desea tiempos de respuesta rápidos que tengan un gran impacto en los tiempos de conversión y carga. Hacer solicitudes ajax es lento para el tiempo de actividad inicial en este caso y no es necesario.

Tienes dos formas de abordar el problema.

• Establecer una cookie : las cookies son encabezados enviados en solicitudes HTTP que tanto el servidor como el cliente pueden leer.
• Codifique la variable ya que JSON : JSON se ve muy cerca de los objetos JavaScript y la mayoría de los objetos JSON son variables válidas de JavaScript.

Configurar una cookie realmente no es muy difícil, solo le asignas un valor:

setcookie("MyCookie", $value); // sets the cookie to the value, remember, do not
                               // set it with HTTP only to true.

Luego, puedes leerlo con JavaScript usando document.cookie :

Aquí hay un analizador de mano corto, pero la respuesta que vinculé justo arriba tiene mejores resultados:

var cookies = document.cookie.split(";").
    map(function(el){ return el.split("="); }).
    reduce(function(prev,cur){ prev[cur[0]] = cur[1];return prev },{});

cookies["MyCookie"] // value set with php.

Las cookies son buenas para un poco de datos. Esto es lo que suelen hacer los servicios de seguimiento.

Una vez que tengamos más datos, podemos codificarlos con JSON dentro de una variable JS en su lugar:

<script>
    var myServerData = <?=json_encode($value)?>; // don''t forget to sanitize 
                                                 //server data
</script>

Asumiendo que $value es json_encode capaz en el lado de PHP (generalmente lo es). Esta técnica es lo que hace con su chat, por ejemplo (solo usa .net en lugar de php).

Solicitud

Si está escribiendo una aplicación, de repente, el tiempo de carga inicial no siempre es tan importante como el rendimiento continuo de la aplicación y comienza a pagar la carga de datos y códigos por separado.

Mi respuesta here explica cómo cargar datos usando AJAX en JavaScript:

function callback(data){
    // what do I do with the response?
}

var httpRequest = new XMLHttpRequest;
httpRequest.onreadystatechange = function(){
    if (httpRequest.readyState === 4) {// request is done
        if (httpRequest.status === 200) {// successfully
            callback(httpRequest.responseText);// we''re calling our method
        }
    }
};
httpRequest.open(''GET'', "/echo/json");
httpRequest.send();

O con jQuery:

$.get("/your/url").done(function(data){
    // what do I do with the data?
});

Ahora, el servidor solo necesita contener un /your/url ruta / archivo que contenga código que capture los datos y haga algo con ellos, en su caso:

<$php
 ...
 $val = myService->getValue(); // makes an api and db call
 echo json_encode($val); // write it to the output
 $>

De esta manera, nuestro archivo JS solicita los datos y los muestra en lugar de solicitar el código o el diseño. Esto es más limpio y comienza a dar frutos a medida que la aplicación aumenta. También es una mejor separación de inquietudes y permite probar el código del lado del cliente sin ninguna tecnología del servidor involucrada, lo que es otra ventaja.

Posdata: debe ser muy consciente de los vectores de ataque XSS cuando inyecte algo desde PHP a JavaScript. Es muy difícil escapar de los valores correctamente y es sensible al contexto. Si no está seguro de cómo tratar con XSS o no lo sabe, lea este artículo de OWASP , este y esta pregunta .

Answer 11

prueba esto

<?php
    echo "<script> var x = ". json_encode($phpVariable)."</script>";
?>

-

-Después de intentar esto por un tiempo Aunque funciona, sin embargo, ralentiza el rendimiento. como PHP es un script del lado del servidor, mientras que JavaScript es un lado del usuario.

Answer 12

Simplemente use uno de los siguientes métodos.

<script type="text/javascript">
var js_variable  = ''<?php echo $php_variable;?>'';
<script>

O

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

Answer 13

Así es como lo hago (hay muchas maneras):

1. Convertir los datos en JSON
2. Llame a AJAX para recibir el archivo JSON
3. Convertir JSON en objeto Javascript

Ejemplo:

PASO 1

<?php

   $servername = "localhost";
   $username = "";
   $password = "";
   $dbname="";
   $conn = new mysqli($servername, $username, $password,$dbname);

   if ($conn->connect_error) {
      die("Connection failed: " . $conn->connect_error);
   } 

   $sql = "SELECT id, name ,image FROM phone";
   $result = $conn->query($sql);

   while($row =$result->fetch_assoc()){ 
      $v[]=$row;    
   }

  echo json_encode($v);

  $conn->close();
?>

PASO 2

function showUser(fnc) {
   var xhttp = new XMLHttpRequest();

   xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
         // STEP 3    
         var p=JSON.parse(this.responseText);}
       }
    }

Answer 14

Según su código

<$php
     $val = $myService->getValue(); // makes an api and db call
     echo ''<span id="value">''.$val.''</span>'';
$>

Ahora puede obtener valor utilizando DOM, usar innerHTML of span id, en este caso no necesita hacer ninguna llamada al servidor, ajax o cualquier otra cosa.

Su página lo imprimirá usando php, y javascript obtendrá valor usando DOM.

Answer 15

Para aquellos que tienen algún problema con el siguiente código y sigue apareciendo <?php echo $username?>o algo como esto. Vaya a editar httpd.conf en la sección mime_module agregando esta ''Aplicación AddType / x-httpd-php .html .htm'' porque puede deshabilitarse de forma predeterminada .

   <?php
        $username = 1;
    ?>

    <script type="text/javascript">
        var myData = <?php echo $username ?>;
        console.log(myData);
        alert(myData);
    </script>

Answer 16

    <?php 
    $your_php_variable= 22;
    echo "<script type=''text/javascript''>var your_javascript_variable = $your_php_variable;</script>";  
    ?>

y eso funcionará. Solo está asignando una variable javascript y luego pasando el valor de una variable php existente. Dado que php escribe las líneas javascript aquí, tiene el valor de la variable php y puede pasarla directamente.

Answer 17

<script>
  var jsvar = <?php echo json_encode($PHPVar); ?>;
</script>

json_encode () requiere:

• PHP 5.2.0 o más
• $PHPVar codificado como UTF-8, Unicode.

Answer 18

myPlugin.start($val); // tried this, didn''t work    

No funciona porque $val no está definido en lo que respecta a javascript, es decir. el php no dio salida a nada por $val . Intente ver la fuente en su navegador y esto es lo que verá:

myPlugin.start(); // tried this, didn''t work    

Y

<?php myPlugin.start($val); ?> // this didn''t work either

Esto no funciona porque php intentará tratar a myPlugin como una constante y cuando eso no funcione, intentará tratarla como la cadena ''myPlugin'' que intentará concatenar con la salida de la función php start() y, desde ese momento No está definido, producirá un error fatal.

Y

 myPlugin.start(<?=$val?> // this works sometimes, but sometimes it fails

Si bien es más probable que esto funcione, ya que el php está produciendo un javascript válido con los argumentos esperados, si falla, es probable que myPlugin no esté listo todavía. Revise su orden de ejecución.

También debes tener en cuenta que la salida de php es insegura y se debe filtrar con json_encode()

EDITAR

Porque no noté el paréntesis faltante en myPlugin.start(<?=$val?> : - /

Como @Second Rikudo señala, para que funcione correctamente, $val debería contener el paréntesis de cierre, por ejemplo: $val="42);"

Lo que significa que el php ahora producirá myPlugin.start(42); y funcionará como se espera cuando sea ejecutado por el javascript