Estoy confundido acerca de los requisitos de mis deberes: necesitamos poner código JS, HTML y PHP en el mismo archivo xxx.php.

Hay un formulario en HTML, y una vez que envío el formulario, necesito enviar una solicitud (XMLHTTPRequest) a myPHP.php con las entradas del formulario (usando POST para transferir los datos del formulario PHP). El archivo PHP recuperará las entradas del formulario, lo reformateará a la sintaxis de la API y lo enviará a la API de Google para obtener el objeto JSON.

Soy un principiante en PHP y JS, y no sé cómo combinarlos en el mismo archivo y hacer la tarea según los requisitos. Como, cómo enviar el objeto JSON obtenido en PHP a Javascript.

Aquí está el marco de mi código (myPHP.php):

<html>
<head>

    <script type="text/javascript">

        // show the result
        function show() {
            var xmlhttpreq = new XMLHttpRequest();
           
            var keyword = document.getElementById("keyword").value;
            var post_data = "keyword=" + keyword;

            xmlhttpreq.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    var jsonObj = JSON.parse(this.responseText);
                    createTable(jsonObj);
                }
            };

            xmlhttpreq.open("POST", "myPHP.php", true);
            xmlhttpreq.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xmlhttpreq.send(post_data);
        }

        function createTable(object) {
            var out = "xxx";
            document.getElementById("display").innerHTML = out;
        }
    </script>
</head>
<body>
<div id="display"></div>

<form action="myPHP.php" name="myForm" method="POST">
    <b>Keyword </b><input type="text" id="keyword" name="keyword">
    <br>
    
    <button type="submit" onclick="show()" name="search">Search</button>
</form>


<?php
if (isset($_POST["search"])) {
    // extract the form data
    $keyword = $_POST["keyword"];

    // geocode the address
    $location = urlencode($location);
    // google map geocode api url
    $url = "xxxxxxxx";
    $res_json = file_get_contents($url);
    echo $res_json;
}
?>

</body>
</html>
0
Jing Han 24 feb. 2018 a las 12:09

2 respuestas

La mejor respuesta

Puedes probar algo como esto:

<?php
if (isset($_POST["search"])) {
    // extract the form data
    $keyword = $_POST["keyword"];

    // geocode the address
    $location = urlencode($location);
    // google map geocode api url
    $url = "xxxxxxxx";
    echo file_get_contents($url);
} else {
    echo '<html>
    <head>
        <script type="text/javascript">
            // show the result
            function show() {
                var xmlhttpreq = new XMLHttpRequest();

                var keyword = document.getElementById("keyword").value;
                var post_data = "keyword=" + keyword;

                xmlhttpreq.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        var jsonObj = JSON.parse(this.responseText);
                        createTable(jsonObj);
                    }
                };

                xmlhttpreq.open("POST", "myPHP.php", true);
                xmlhttpreq.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                xmlhttpreq.send(post_data);
            }

            function createTable(object) {
                var out = "xxx";
                document.getElementById("display").innerHTML = out;
            }
        </script>
    </head>

    <body>
        <div id="display">
            <?php echo $result; ?>
        </div>

        <form action="myPHP.php" name="myForm" method="POST">
            <b>Keyword </b><input type="text" id="keyword" name="keyword">
            <br>

            <button type="submit" onclick="show()" name="search">Search</button>
        </form>
    </body>
    </html>';
}
?>
0
Thắng Trần Xuân 24 feb. 2018 a las 10:02

Primero tienes que probar en myPHP.php si hay algún envío de datos. Si es así, el formulario ya se ha mostrado y el navegador está devolviendo los datos del formulario. De lo contrario, es la primera vez que se carga la página php y puede mostrar html y javascript.

Así que:

<?php
//test if there is data from the form
if( isset( $_POST['some-form-variable'] ) ){
   // YES
   // process data an display something
}
else{
   // NO DATA
   // display form and javascript
}
0
Michel 24 feb. 2018 a las 09:56