Crear Link ajax+php [ayuda!]

Prospero · 29 Jul 2014

Hola gente! resulta que estoy estudiando ajax y lo que quiero hacer es muy simple, pero no se como hacerlo.

Quiero un imput tipo text, que le coloque lo que sea y me genere la url en el momento, xx.com: The Leading Adult shopping/services Site on the Net

Insertar CODE, HTML o PHP:

<html>	<head>
		<script type="text/javascript">
		function ejecutarajax(){
			var conexion;
			if (window.XMLHttpRequest)			  {
			  conexion=new XMLHttpRequest();
			}else
			  {
			  conexion=new ActiveXObject("Microsoft.XMLHTTP");
			}
			conexion.onreadystatechange=function(){
				if(conexion.readyState==4 && conexion.status==200){
					document.getElementById("midiv").innerHTML=conexion.responseText;
				}
			}
			conexion.open("GET","ejemplo.txt",true);
			conexion.send();
		}
		</script>
	</head>
	<body>
		<div id="midiv"></div>
		<button type="button" onclick="ejecutarajax()">Ejecutar</button>
	</body>
</html>

solo logre hacer que el boton me traiga un texto... pero no logro comprender como poder hacer que por medio de imput me traiga una url por medio de php.

Prospero · 2014-08-01T16:53:24-0500

SOLUCIONADO..

Dejo como lo hice.

Calcular.php

Insertar CODE, HTML o PHP:

<?php

/* Indicar el tipo de contenido que tendrá la respuesta */

header('Content-type: text/html');  

try
{
    /* Obtener lo que viene del imput*/
    
    $operando1 = filter_var($_POST['operando1'], FILTER_SANITIZE_NUMBER_FLOAT);
    

    /* Verificar que los valores de los operadores correspondan
        con los tipos esperados */

    
    /* Obtener el valor del operador */

    $operador = $_POST['operador'];
    
    $resultado = 'El link se a generado correctamente <a href="http://forobeta.com/'.$operando1.'/">Ir al link</a>';

    /* Realizar la operación solicitada */

    
}
catch(Exception $e)            /* La operación produjo un error */
{
    /* Indica al navegador la condición de error */
    
    header("Status: 400 Bad Request", true, 400); 
    
    /* Despliega el mensaje de error para el usuario */
    
    echo $e -> getMessage();
    
    exit(1);
}

/* La operación se realizó exitosamente */

/* Indica al navegador la condición de éxito */

header("Status: 200 OK", true, 200); 

/* Despliega el resultado de la operación para el usuario */

echo $resultado;

exit(0);

?>

index.html

Insertar CODE, HTML o PHP:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <!-- Documento HTML con carácteres UTF8 -->
    
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    
        <title>Imprimir link by Prospero</title>
                
        <!-- Clases CSS internas -->
        
        <style type="text/css">
        
        #pagina                                                /* Envoltura general */
        {
            margin: auto;                                    /* Margenes (centrado) */
            width: 600px;                                    /* Ancho */
            text-align: center;                            /* Textos internos centrados */
            font-family: "arial, sans-serif";         /* Fuente del texto */
        }
        
        #mensaje                                            /* Mensaje de error */
        {
            width: 100%;                                    /* Ancho */
            margin-top: 20px;                            /* Margen superior */
            margin-bottom: 30px;                        /* Margen inferior */
            color: #ff0e0e;                                /* Color del texto (foreground) */
            font-size: 12px;                                /* Tamaño de la fuente */
        }
        
        #operando1, #operando2                    /* Campos de texto de los operandos */
        {
            font-size: 25px;                                /* Tamaño de la fuente */
            border-style: groove;                         /* Estilo del borde */
        }
        
        #operador                                            /* Selector del operador */
        {
            font-size: 25px;                                /* Tamaño de la fuente */
        }
        
        #igual                                                    /* Botón para realizar la operación */
        {
            font-size: 25px;                                /* Tamaño de la fuente */
        }
        
        #resultado                                            /* Campo de texto donde se despliega el resultado */
        {
            font-size: 25px;                                /* Tamaño de la fuente */
            font-style: italic;                                /* Atributo de fuente itálica o cursiva */
        }
        
        </style>

        <!-- Referencias a Javascripts externos -->

        <script src="http://www.google.com/jsapi"></script>
        <script>google.load("jquery", "1");</script>

        <!-- Código Javascript interno -->

        <script type='text/javascript'>

        /* Código a ejecutarse tan pronto como la
            página ha sido cargada por el navegador */

        $(document).ready(function () 
        {
            /* Asociar el evento de clic del botón 'igual'
                con la lógica del negocio de la aplicación */
            
            $('#igual').click(function() 
            { 
                procesar();
            });
        });
        
        function procesar()
        {
            $.ajax ({
                
                url:                 'calcular.php',                                /* URL a invocar asíncronamente */
                type:               'post',                                            /* Método utilizado para el requerimiento */
                data:             $('#formulario').serialize(),        /* Información local a enviarse con el requerimiento */

                /* Que hacer en caso de ser exitoso el requerimiento */

                success:     function(request, settings)
                {
                    /* Cambiar el color del texto a verde */
                    
                    $('#mensaje').css('color', '#0ab53a');
                    
                    /* Mostrar un mensaje informando el éxito sucedido */
                    
                    $('#mensaje').html("Operación realizada exitosamente");
                    
                    /* Mostrar el resultado obtenido del cálculo solicitado */
                    
                    $('#resultado').html(request);
                },
                
                /* Que hacer en caso de que sea fallido el requerimiento */
                
                error:     function(request, settings)
                {
                    /* Cambiar el color del texto a rojo */
                    
                    $('#mensaje').css('color', '#ff0e0e');
                    
                    /* Mostrar el mensaje de error */
                    
                    $('#mensaje').html('Error: ' + request.responseText);
                    
                    /* Limpiar cualquier resultado anterior */
                    
                    $('#resultado').html('Error');
                }                
            });
        }
        
        </script>

    </head>

    <body>
        <!-- Contenido del documento -->
        
        <div id='pagina'>
            <div id='mensaje'>&nbsp;</div>
            
            <form id='formulario' action='#' method='post'>
                <input type='text' id='operando1' name='operando1' value='' size='9' maxlength='9' />
                                
                
                <input type='button' id='igual' value='Precesar' />
                <br><br>
                <span id='resultado'>&nbsp;</span>
            </form>
        </div>
    </body>
</html>

Crear Link ajax+php [ayuda!]

Prospero

Prospero

Temas similares

Privacidad y transparencia

Privacidad y transparencia