2

Como puedo abrir la página a la que le pase parámetros por post usando javascript o jquery.

Página index.php:

En ella tengo imágenes y cada una tiene su id, cuando doy click en una imagen tomo su id y lo guardo en un array. Posteriormente tengo que enviar ese array por post a la página prueba_numeros.php la cual tengo que abrirla y mostrar el array que está recibiendo.

JavaScript:

<script>
var numeros = [];

function agregar(e)
{
 numeros.push(e.id);
}

function siguiente()
{
  var xhttp;

  if(window.XMLHttpRequest)
     xhttp = new XMLHttpRequest();
  else
     xhttp = new ActiveXObject("Microsoft.XMLHTTP");

  xhttp.onreadystatechange = function(){
    if(xhttp.readyState == 4 && xhttp.status == 200)
    {
        window.open("prueba_numeros.php");
    }
  } 

  xhttp.open("POST", "prueba_numeros.php");
  xhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xhttp.send("numeros=" + JSON.stringify(numeros));
}
</script>

HTML:

<table>
 <tr>
 <td>
 <img id="1" src="img/1.png" onClick="agregar(this);">
 </td>
   .
   .
 </tr>
   .
   .
</table>

<input type="button" value="Siguiente" onClick="siguiente();">

Página prueba_numeros.php:

En esta página tengo que mostrar el array que recibe de la página index.php por medio de post:

Números seleccionados: 1, 2, 3, etc.

Como pueden ver estoy usando puro javascript pero si tienen alguna solución usando jquery ó ajax también será bien recibida.

3 respuestas 3

0

Modifico completamente la respuesta para ajustar a lo que necesitas

Debes modificar de esta forma tu html, agregando un formulario y colocando un botón para realizar un submit, dentro del form hay un campo oculto que guardara los números que seleccionaste:

<form action="prueba_numeros.php" methood="post">
    <input type="hidden" name="hdnNumeros" id="hdnNumeros">
    <input type="submit" value="Siguiente">
</form>

y debes modificar tu función agregar para concatenar los números seleccionados y asignarlos al campo hdnNumeros oculto, ahora estarás enviado los datos por post a tu otra página

function agregar(e){
    numeros.push(e.id);
    $('#hdnNumeros').val( numeros.join(',') )
}

Luego en tu pagina prueba_numeros.php sólo debes hacer un echo de la variable $_POST['hdnNumeros']

4
  • De acuerdo pero como haria para abrir la página prueba_numeros.php que es a la que estoy enviando el array?? O sea una vez que ya se haya enviado el array se tiene que cerrar la página index y se tiene que abrir la página prueba_numeros mostrando el array que recibió. el 29 nov. 2018 a las 19:48
  • Re hice mi respuesta. Saludos!
    – nerdcoder
    el 29 nov. 2018 a las 20:14
  • Es de afuerza que tengo que usar un formulario, si no quisiera hacerlo así no se podría?? el 29 nov. 2018 a las 20:18
  • Para enviarlos por post a otra pagina que abres con javascript, no... por eso en mi respuesta anterior te indicaba que podías enviarlos a otra pagina pero para procesarlos, considerando que no estas conectado a ninguna base de datos donde eventualmente podrías hacer algo como enviarlos por ajax para procesarlos y una vez procesados redireccionas a otra pagina para ver tus datos procesados pero ya desde una base de datos
    – nerdcoder
    el 29 nov. 2018 a las 20:31
0

Realmente no tiene sentido enviar una consulta asincrona que luego vas a ver de forma sincrona. Las tecnologias asincronas, sobre todo en desarrollo web estan orientadas a enviar y recibir datos sin la necesidad de cargar otra pagina o la misma.

Lo que si puedes hacer es enviar una consulta asincrona desde index.php e indicarle al servidor que genere una respuesta. Esa respuesta generada por el servidor la vas a enviar a la misma pagina que el navegador tiene abierta, o sea index.php que es donde se genero la consulta asincrona.

Por ejemplo: prueba_numeros.php

//Esperando la solicitud del cliente
if(isset($_POST["id_arr"]))
{
     // Iteras sobre el array de IDs y lo concatenas 
     // si quieres para hacer una salida unica
     // luego has un echo a la variable con el arreglo concatenado
     // Tambien puede convertirlo a un objeto JSON e igualmente hacerle un echo

     echo "Respuesta";
     //Ceder el control para evitar que hallan mas salidas de datos.
     return;
}

Te recuerdo que las salidas que se hagan antes de las cabeceras HTML pueden generar resultados erroneos o lo que es lo mismo, inesperados. Por eso te recomiendo poner esta funcion antes de cualquier codigo HTML y que entregue el control luego de ser procesada usando RETURN;

Luego desde JS en el navegador utilizas la propiedad responseText para obtener la salida que dio el servidor. Aqui tienes info sobre como usarla. https://www.w3schools.com/xml/dom_httprequest.asp

De esa forma obtienes la salida, pero para agregarla en un contenedor HTML, puedes hacer varias cosas, entre ellas, otorgarle un id a un div y una vez obtenida la respuesta del servidor, obtienes el id del div con getElementById donde va a salir la respuesta y usas la propiedad del nodo llamada innerHTML y le asignas responseText

Aqui te dejo un ejemplo sencillo usando tus datos con una variable $nums = "2,4,6,8"; Obtienes desde index.php los datos que hay en prueba_numeros.php que seria los id que enviaste.

index.php

<button onclick = "ObtenerNumeros();">Solicitar Numeros</button>

<div id = "nums"></div>

<script>
    function ObtenerNumeros()
    {
        var xhttp;

      if(window.XMLHttpRequest)
         xhttp = new XMLHttpRequest();
      else
         xhttp = new ActiveXObject("Microsoft.XMLHTTP");

      xhttp.onreadystatechange = function(){
        if(xhttp.readyState == 4 && xhttp.status == 200)
        {
            var elm = document.getElementById("nums").innerHTML = this.responseText;
        }
      } 

      xhttp.open("POST", "prueba_numeros.php");
      xhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      xhttp.send("numeros=pares");
    }
</script>

prueba_numeros.php

$nums = "2,4,6,8";
if(isset($_POST["numeros"]) && $_POST["numeros"] == "pares")
{
    echo $nums;
    return;
}
0

En Base a la respuesta de David Figueras Tamate

he probado su trozo de código en conjunto con dos listas dependientes y me ocurre que se muestra el resultado pero a los pocos segundos se omite

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type = "text/javascript">
    $(document).ready(function(){
        $('#anno').on('change', function(){
                if($('#anno').val() == ""){
                    $('#marca').empty();
                    $('<option value = "">Selecciona Marca</option>').appendTo('#marca');
                    $('#marca').attr('disabled', 'disabled');
                }else{
                    $('#marca').removeAttr('disabled', 'disabled');
                    //$('#municipio').load('municipio_get.php?id_deparatamento=' + $('#id_deparatamento').val());
                    $('#marca').load('intermedio.php?anno=' + $('#anno').val());
                }
        });
        $('#marca').on('change', function(){
                 
                if($('#marca').val() == ""){
                    $('#modelo').empty();
                    $('<option value = "">Selecciona modelo</option>').appendTo('#modelo');
                    $('#modelo').attr('disabled', 'disabled');
                }else{
                    $('#modelo').removeAttr('disabled', 'disabled');
                    //alert('intermedio.php?anno=' + $('#anno').val()+'&marca='+ $('#marca').val());
                    //$('#municipio').load('municipio_get.php?id_deparatamento=' + $('#id_deparatamento').val());
                    $('#modelo').load('intermedio.php?anno=' + $('#anno').val()+'&marca='+ $('#marca').val());
                }
        });
        $('#modelo').on('change', function(){
                 
                 if($('#modelo').val() == ""){
                     $('#motor').empty();
                     $('<option value = "">Selecciona modelo</option>').appendTo('#motor');
                     $('#motor').attr('disabled', 'disabled');
                 }else{
                     $('#motor').removeAttr('disabled', 'disabled');
                     //alert('intermedio.php?anno=' + $('#anno').val()+'&marca='+ $('#marca').val()+'&modelo='+ $('#modelo').val());
                     //$('#municipio').load('municipio_get.php?id_deparatamento=' + $('#id_deparatamento').val());
                     $('#motor').load('intermedio.php?anno=' + $('#anno').val()+'&marca='+ $('#marca').val()+'&modelo='+ $('#modelo').val());
                 }
         });
    });
    function cargaBusqueda(){
        var xhttp;

        if(window.XMLHttpRequest){
            xhttp = new XMLHttpRequest();
        }else{
        xhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        xhttp.onreadystatechange = function(){
            if(xhttp.readyState == 4 && xhttp.status == 200)
            {
                var elm = document.getElementById("nums").innerHTML = this.responseText;
            }
        } 

        xhttp.open("POST", "intermedio.php");
        xhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhttp.send('buscar=s&motor=' + $('#motor').val()+ 'y search='+$('#search').val());
        //alert('buscar=s&motor=' + $('#motor').val()+ 'y search='+$('#search').val());
    
    }  
</script>
<body>
    <div class = "container-fluid"> 
        <div class = "row">
            <div class = "col-md-3"></div>
            <div class = "col-md-6 well">
                <h4 class = "text-primary">Busqueda</h4>
                <hr style = "border-top: 1px dotted #8c8b8b;"/>
                    <form class = "form-inline">
                        <div class  =  "form-group">
                            <label>Busqueda:</label>
                            <input type="text" id = "search" class = "form-control" name = "search" required = "required">
                            <input type="submit" class="btn btn-primary" name="enviar" value="enviar" onclick="cargaBusqueda()"> 
                            
                        </div>
                        <div class  =  "form-group">
                            <label>Año:</label>
                            <select id = "anno" class = "form-control" name = "anno" required = "required">
                                <option value = "">Selecciona un Año</option>
                                <?php
                                        $g_result = getYMMA();
                                    foreach ($g_result as $result){
                                ?>
                                    <option value = "<?php echo $result['anno']?>"><?php echo utf8_encode($result['anno'])?></option>
                                <?php
                                        }
                                ?>
                            </select>
                        </div>  
                        <div class = "form-group">
                            <label>marca:</label>
                            <select  id = "marca" name = "marca"  class = "form-control" disabled = "disabled" required = "required">
                                <option value = "">Selecciona Marca</option>
                            </select>
                        </div>
                        <div class = "form-group">
                            <label>Modelo:</label>
                            <select  id = "modelo" name = "modelo"  class = "form-control" disabled = "disabled" required = "required">
                                <option value = "">Selecciona Modelo</option>
                            </select>
                        </div>
                        <div class = "form-group">
                            <label>Motor:</label>
                            <select  id = "motor" name = "motor"  class = "form-control" disabled = "disabled" required = "required">
                                <option value = "">Selecciona motor</option>
                            </select>
                        </div>
                    </form>
            </div>
        </div>
    </div>  
    <div id="nums">

    </div>
</body>

y el código de ejecución es un echo

    if (isset($_POST['buscar']) and ($_POST['buscar']=='s')){
        echo "hola";
        return;
    }  

el "hola" se muestra pero a los segundos todo se borra

1
  • evita retornar en php null declara un tipo o retorna un void...
    – user46896
    el 12 ago. 2022 a las 18:03

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.