Este foro ya no está activo, así que no puedes publicar nuevas preguntas ni responder a las preguntas existentes.

Obtener contenidos de una URL mediante JavaScript y jQuery

17 de mayo de 2015

Hola todos necesito ayuda por favor. Recién comencé con esto de JavaScript y HTML y me surge un problema: necesito leer la URL enviada por metodo GET que es la siguiente

http://localhost/Form/view/destino.htm?nombre=adasd&correo=asd%40asd.com
&sex=Masculino&carrera=ITI&fecha=05%2F17%2F2015&EstanciaI=on&EstanciaII=on

Y quiero leer los datos usando solo JavaScript y mostrarlos, pero no logro encontrar nada si me ayudan seria de lujo.

Más info: tengo un archivo llamado form.htm con el siguiente código:

<!-- código HTML -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../img/favicon.ico">
 
    <title>Formulario</title>
 
    <!-- Bootstrap core CSS -->
    <link href="../css/bootstrap-3.2.0-dist/css/bootstrap.min.css" rel="stylesheet">
 
    <!-- Custom styles for this template -->
    <link href="justified-nav.css" rel="stylesheet">
    <link href="../css/bootstrap-3.2.0-dist/css/theme.green.css" rel="stylesheet">
    <link href="../css/bootstrap-3.2.0-dist/css/jquery-ui.min.css" rel="stylesheet">
 
    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="../js/ie-emulation-modes-warning.js"></script>
 
    <script src="../js/jquery/jquery-2.1.1.min.js"></script>
    <script src="../js/jquery/jquery-ui.min.js"></script>
 
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
 
  <body>
 
    <div class="container">
 
        <script type="text/javascript"> 
$(document).ready(function(){
  $("#fecha").datepicker();
})
 
</script>
 
      <!-- Example row of columns -->
      <fieldset>
            <div><legend>Formulario</legend></div>
            <form action="destino.htm" name="form" method="GET" role="form">
            <div class="form-group">
            <label> Nombre </label>
            <input type="text" required class=form-control name="nombre" id="fnombre" placeholder="Escribe tu nombre completo">
            </div>
 
            <div class="form-group">
            <label for="femail"> Email </label>
            <input type="email" name="correo" class=form-control id= "femail" placeholder="Escribe tu correo electronico">
            <div class="form-group">
            <div>
 
          <div class="form-group">
            <div><label for = "fgenero"> Genero:</label></div>
 
            <input type="radio" name="sex" value="Masculino" checked>Masculino
            <br>
            <input type="radio" name="sex" value="Femenino">Femenino
            <br><br>
          </div>
 
            <div>
            <label for="fCarrera"> Carrera </label>
            <select id= "fCarrera" name="carrera" class="form-control">
              <option> ITI</option>
              <option> IE</option>
              <option> II</option>
              <option> IET</option>
            </select>
          </div>
          <div class="form-group">
          <label> Fecha </label>
          <input type="text" class=form-control id="fecha" name="fecha"/> 
          </div>
 
          <div class="form-group">
            <p> Estancias/Estadias terminadas:</p>
            <label for="EstanciaI">EstanciaI</label>
            <input type="checkbox" name="EstanciaI"><br>
            <label for="EstanciaII">EstanciaII</label>
            <input type="checkbox" name="EstanciaII"><br>
            <label for="Estadia">Estadia</label>
            <input type="checkbox"name="Estadia">
          </div>
 
             <br><button type="submit" value="enviar" class="btn btn-default"> Enviar </button>
             </div>
             </div>
           </form>
         </fieldset>
            </div>
 
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../js/ie10-viewport-bug-workaround.js"></script>
  </body>
</html>

Y el archivo destino.htm

<!-- código HTML -->
<!DOCTYPE html>
    <head>
        <script>
        function getVarsUrl()
        {
            var url= location.search.replace("?", "");
            var arrUrl = url.split("&");
            var urlObj={};
            for(var i=0; i<arrUrl.length; i++)
            {
                var x= arrUrl[i].split("=");
                urlObj[x[0]]=x[1]
            }
            return urlObj;
        }
        </script>
    </head>
    <body>
    </body>
</html>

Pero no he logrado mostrar los datos leídos en el archivo llamado Form.htm, notese que soy muy nuevo en esto y apenas se sobre el tema.


Respuestas

#1

En el archivo form.htm cuyo código nos has enseñado no hay ninguna instrucción dedicada a descargar la URL que indicas. Lo que tienes que hacer es utilizar los métodos para Ajax de jQuery. En tu caso, te bastaría con usar el método $.get():

<script type="text/javascript"> 
$(document).ready(function(){
  var url = 'http://localhost/Form/view/destino.htm?nombre=adasd&correo=asd%40asd.com&sex=Masculino&carrera=ITI&fecha=05%2F17%2F2015&EstanciaI=on&EstanciaII=on';
 
  $.get(url, function(respuesta) {
    console.log(respuesta);
  });
})
</script>

@javiereguiluz

17 mayo 2015, 22:22