Hola; en este post veremos como recoger los datos de un formulario con jquery y enviar una petición con ajax a un servidor php.
El servidor php envia un json como resultado y finalmente ajax recibe ese resultado y lo lanza en un alert.
1. Creamos el fichero "index.html" con un formulario.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="conexionServidor.js"></script>
</head>
<body>
<form id="formulario_prueba_ajax">
<input type="text" id="nombre">
<input type="submit" value="Enviar">
</form>
</body>
</html>
2. Creamos el fichero "conexionServidor.js" que contiene la recogida de datos del formulario y la petición ajax al servidor y muestra los mensajes que este devuelve.
$(document).ready(function() {
// Al pulsar el botón submit del formulario
$('#formulario_prueba_ajax').submit(function() {
// Obtengo los valores de los input de mi formulario
var nombre = $('#nombre').val();
var datos = {
'nombre' : nombre
}
// Hacemos la petición ajax
$.ajax({
type : 'POST',
url : 'servidor.php',
data : datos,
dataType : 'json',
success : success,
error : error
});
function success(data) {
var valor = data.mensaje;
alert(valor);
alert(data.saludo);
};
function error(){
alert("error");
}
// detiene el submit por defecto
return false;
});
});
3. Creamos el fichero servidor.php que recibirá lo que le mandamos por ajax y devuelve un json que será porcesado en la función success de conexionServidor.js
<?php
$nombre = $_POST['nombre'];
$data = array();
/ / aqui se hace cualquier procesamiento con la base de datos por ejemplo o cualquier otra cosa
$data['mensaje'] = $nombre." se ha conectado.";
$data['saludo'] = "Que disfrutes ".$nombre;
echo json_encode($data);
?>
Listo hemos terminado. Un saludo....hasta el próximo post.
Mostrando entradas con la etiqueta Desarrollo Web Cliente. Mostrar todas las entradas
Mostrando entradas con la etiqueta Desarrollo Web Cliente. Mostrar todas las entradas
martes, 2 de septiembre de 2014
viernes, 15 de agosto de 2014
JSON y PHP : Leer y devolver JSON
Manos a la obra:
Para esta "receta" necesitamos:
1. Un servidor xamp, wamp o lamp dependiendo del gusto del "chef"
1. Un fichero JSON
2. Un programa PHP que haga que deseamos.
1. Fichero JSON ( usuarios.json )
--------------------------------
[{"usuario":"yo","contrasenia":"si"}]
--------------------------------
<?php
$parametroRecibidoUsuario =$_GET['usuario']; $parametroRecibidoPass =$_GET['contrasenia']; // Guardo el contenido del fichero de usuarios $ficheroUsuarios = file_get_contents('usuarios.json'); // Decodifico el fichero JSON en un array
$datosJSON = json_decode($ficheroUsuarios,true); // Construyo mi array de mensajes para los resultados $resultados = array(); // Recorro los elementos del array JSON ($datosJSON) foreach($datosJSON as $obj){ // Por cada elemento del array obtengo el usuario y contraseña $usuario = $obj['usuario']; $contrasenia = $obj['contrasenia']; // Creo un array para los mensajes $mensajes = array(); // Comparo los datos envidos con los datos leídos if($usuario == $parametroRecibidoUsuario && $contrasenia == parametroRecibidoPass){ // Creo el elemento 'mensajeok' en el array 'mensajes' $mensajes['mensaje'] = 'Hola '.$usuario; // Aqui se pueden introducir muchos mas campos; de momento solo uno // Meto en array de mensajes en el array 'resultados' array_push($resultados, $mensajes); }else{ $mensajes['mensaje'] = 'No te has podido conectar'; array_push($resultados, $mensajes); } } /* Finalmente convierto los resultados a formato json*/ $resultadosJson = json_encode($resultados); /* Devuelvo el json */ echo $resultadosJson; ?>
¡¡¡ Listo !!! para probar si funciona haremos los siguiente:
http://nombredemidominio.com/servidor.php?usuario=yo&contrasenia=si
¿Quieres descargar el código?.... has click aqui
domingo, 8 de junio de 2014
CANVAS - Figuras, Texto, Degradado y Transformaciones
Hola en este post veremos como usar la etiqueta <canvas></canvas> en HTML5.
En todo los casos se siguen los siguientes pasos:
1. Creamos la etiqueta canvas en html
En HTML usamos la etiqueta canvas y definimos su ancho y altura:
<canvas id="id_del_canvas" width="" heigth=""></canvas>
2. Dibujamos en el canvas con javascript
En JavaScript obtenemos el canvas y dibujamos:
var canvas = document.getElementById("id_del_canvas");
var dibujo = canvas.getContext("2d");
..... dibujamos con las funciones definidas para canvas
Vamos con los ejemplos:
// DIBUJAR RECTÁNGULOS
Vamos con los ejemplos:
// DIBUJAR RECTÁNGULOS
function dibujarRectangulo(){
var canvas = document.getElementById("el_canvas"); // declarmos el canvas
var dibujo = canvas.getContext("2d"); // se usará gráficos en dos dimensiones
dibujo.rect(10,10,20,20); // definimos el rectangulo
dibujo.fill(); // creamos o mostramos el rectángulo
}
- Para definir el rectángulo se
utilizan las coordenadas x (horizontal) e y (vertical), 10 píxeles y 10
píxeles, contados a partir del ángulo superior izquierdo del elemento
canvas, con un ancho de 200 píxeles y una altura de 100 píxeles (
dibujo.rect(10,10,200,100)).
-
La cuarta línea solicita que se cree o se muestre el rectángulo definido mediante:
dibujo.fill().
- Aunque, también se podría haber usado el método
fillRect()para definir y dibujar el rectángulo en una sola sentencia.
// DIBUJAR CÍRCULOS
function dibujarCirculo(){
var canvas = document.getElementById("el_canvas");
var dibujo = canvas.getContext("2d");
dibujo.fillStyle="rgb(0,255,127)";
dibujo.arc(50,50,40,0,2*Math.PI,true);
dibujo.fill();
}
Para dibujar un arco o un círculo en la posición (x,y), se utiliza la función
arc(x, y, radio, ángulo inicio, ángulo final, dirección) donde sus parámetros son:-
x: coordenada horizontal calculada a partir del centro del óvalo.
-
y: coordenada vertical calculada a partir del centro del óvalo.
-
radio: radio del óvalo.
-
ángulo inicio: punto de partida del arco en radianes.
- ángulo final: punto de llegada del arco en radianes.
- direccción: alor boleano que indica que el arco será dibujado en el sentido de las agujas del reloj (valor true) o al contrario (valor false).
// DIBUJAR TRAZADOS
function dibujarTrazados(){
var canvas_trazado = document.getElementById("canvas_trazado");
var dibujo = canvas_trazado.getContext("2d");
dibujo.beginPath(); // Inicio el trazado
dibujo.moveTo(150,50); // Coordenadas de inicio
dibujo.lineTo(200,120); // Dibuja una línea desde el punto
// anterior hasta el punto 200,120
dibujo.lineTo(90,120); // Crea una línea hasta las nuevas coordenadas
dibujo.closePath(); // Cierra el trazo.
dibujo.stroke(); // Dibuja el contorno del trazado definido
}
- beginPath(): esta función le indica al contexto del canvas que se va a comenzar a dibujar un camino. No tiene ningún parámetro y por sí sola no hace ninguna acción visible. Se invoca en primer lugar, antes de comenzar a dibujar el camino o trazado incorporando segmentos.
- moveTo(x,y): esta función mueve el puntero imaginario a una posición específica donde comenzar o continuar el trazado. En realidad, no dibuja nada en sí, pero permite definir el primer punto del camino.
- closePath(): esta función sirve para cerrar un trazado o camino a su punto inicial, dibujando una línea recta desde el último punto hasta el punto de partida (definido con moveTo()). Tampoco recibe ningún parámetro.
- stroke(): esta función dibuja el contorno de un trazado a diferencia de fill() que rellena de color el trazado.
- fill(): Este método dibuja el trazado como una figura sólida. Cuando se usa este método no es necesario cerrar el trazado con closePath(), el trazado es automáticamente cerrado con una línea recta trazada desde el punto final hasta el origen.
- lineTo(x,y): esta función dibuja una línea recta, desde la posición actual del puntero de dibujo, hasta el punto (x,y) que se indique como parámetro.
// DIBUJAR COLORES Y SOMBRAS
function dibujarColoresSombras(){
var canvas_sombras=document.getElementById('colores_sombras');
var dibujo=canvas_sombras.getContext('2d');
dibujo.fillStyle="#2E64FE";
dibujo.shadowBlur=40;
dibujo.shadowColor="black";
dibujo.shadowOffsetX=20;
dibujo.shadowOffsetY=10;
dibujo.arc(50,50,40,0,2*Math.PI,true); // Crea una línea hasta las nuevas coordenadas
dibujo.fill(); // Cierro el trazado y relleno la figura
}
-
Existe un atributo del contexto del canvas que permite cambiar el color de relleno:
fillStyle()
dibujo.fillStyle="#000099";- El atributo
strokeStyle()funciona de la misma forma que fillStyle con la diferencia que permite definir el trazado del dibujo.
dibujo.strokeStyle="#000099";-
shadowBlur: para definir el difuminado de la sombra.
-
shadowColor: para definir el color.
-
shadowOffsetX: para definir la distancia horizontal (si no se indica nada, la sombra aparecerá alrededor del dibujo).
-
shadowOffsetY: para definir la distancia vertical (si no se indica nada, la sombra aparecerá alrededor del dibujo).
// DIBUJAR TEXTO
function dibujarTexto(){
var canvas_texto=document.getElementById('texto');
var dibujo=canvas_texto.getContext('2d');
dibujo.textBaseline="ideographic";
dibujo.textAlign="center";
dibujo.font="2em Nueva";
dibujo.fillStyle="purple";
dibujo.fillText("TEXTO CANVAS",150,75);
}- strokeText(texto, x, y): este método dibujará el texto especificado en la posición x,y como una figura vacía (solo los contornos). Puede también incluir un cuarto valor para declarar el tamaño máximo. Si el texto es más extenso que este último valor, será encogido para caber dentro del espacio establecido.
- fillText(texto, x, y): Este método es similar al método anterior excepto que esta vez el texto dibujado será sólido.
// DIBUJAR DEGRADADO
function dibujarDegradado(){
var canvas_degradado=document.getElementById('canvas_degradado');
var dibujo=canvas_degradado.getContext('2d');
var degradado = dibujo.createRadialGradient(50,50,5,90,60,100);
degradado.addColorStop(0,"OrangeRed");
degradado.addColorStop(1,"Gold");
dibujo.fillStyle=degradado;
dibujo.arc(120,80,60,0,2*Math.PI,true);
dibujo.fill();
}- createLinearGradient(x0, y0, x1, y1) Este método crea un objeto que luego será usado para aplicar un gradiente lineal al lienzo. Donde sus parámetros son: x0: coordenada x del punto inicial del degradado. y0: coordenada y del punto inicial del degradado. x1: coordenada x del punto final del degradado y1: coordenada y del punto final del degradado.
- createRadialGradient(x1, y1, r1, x2, y2, r2) Este método crea un objeto que luego será usado para aplicar un gradiente circular o radial al lienzo usando dos círculos. Los valores representan la posición del centro de cada círculo y sus radios. x1: coordenada x del círculo inicial del degradado. y1: coordenada y del círculo inicial del degradado. r1: radio del círculo desde donde comenzar. x2: coordenada x del círculo final del degradado. y2: coordenada y del círculo final del degradado. r2: radio del círculo desde donde comenzar.
- addColorStop(posición, color) Este método especifica los colores a ser usados por el gradiente. El atributo posición es un valor entre 0.0 y 1.0 que determina dónde la degradación comenzará para ese color en particular.
// DIBUJAR TRANSFORMACIONES
function dibujarTransformacion(){
var canvas_degradado=document.getElementById('canvas_transformaciones');
var dibujo=canvas_degradado.getContext('2d');
dibujo.fillStyle="gold";
dibujo.arc(120,80,30,0,2*Math.PI,true);
dibujo.fill();
dibujo.translate(90,70);
dibujo.arc(120,80,40,0,2*Math.PI,true);
dibujo.fill();
}- translate(x,y): Este método de transformación es usado para mover el origen del lienzo. Es decir, permite mover el punto 0,0 a una posición específica para usar el origen como referencia para nuestros dibujos o para aplicar otras transformaciones.
rotate(angulo): Este método de transformación rotará el lienzo alrededor del origen tantos ángulos como sean especificados.scale(x, y): Este método de transformación incrementa o disminuye las unidades de la grilla para reducir o ampliar todo lo que esté dibujado en el lienzo.- Otros.
Descargar el código
sábado, 25 de enero de 2014
Crear objetos en JavaScript
Para crear objetos en javascript primero creamos un constructor de la siguiente manera:
function ConstructorClase() { // inicializamos propiedades this.propiedad1 = valor }
podemos hacerlos pasando parámetros:
function ConstructorClase(param1, param2,.... paramX){ // inicializamos propiedades this.propiedad1 = param1; this.propiedad1 = param2; . . . this.propiedad1 = paramX;} El operador "this" nos permite referirnos al propio objeto de la clase.
Para crear los métodos de la clase basta con definir una función y asociarla a la clase de al siguiente manera :
1. Declaramos una función
function funcionClase(param1, param2,.... paramX){ // instrucciones de la función}2. Asociamos la función a la clase en su propio constructor
function ConstructorClase(parámetro1, parámetro2,.... parámetro x){ // inicializamos propiedades this.nombreMetodo = funcionClase }function ConstructorClase{ // inicializamos propiedades this.nombreMetodo = function (parámetro1, parámetro2,.... parámetro x) { // instrucciones de la función } }
Clase nombreObjeto = new Clase(param1, param2, ... paramX);Usamos el método de la siguiente forma:
nombreObjeto.metodo1();
CLASE AVIÓN
------------------------
// Declaramos una clase llamada Avion que tiene 4 propiedades; cuyo constructor recibe tres // parámetros (marca. modelo y pasajeros ), el cuarto parámetro se inicializa a 0 en el // momento de la creación del objeto; posteriormente se le puede dar un valor llamando al // método rellenarDeposito que recibe como parámetro la cantidad de litros de combustible a // rellenar.
function Avion(marca, modelo, pasajeros){ // inicializamos propiedades this.maraca = marca; this.modelo = modelo; this.pasajeros = pasajeros; this.cantidad = 0; this.rellenarDeposito = function (litros) { // instrucciones de la función this.cantidad = litros; } }
Finalmente hacemos uso de la clase de la siguiente manera:
Avion nuevoAvion = new Avion("Boeing","777","450");nuevoAvion.rellenarDeposito(500);
Debemos tener en cuenta que el constructor se escribe con mayúscula la primer letra de cada palabra y los métodos deben empezar por minúscula y expresarlos mediante algún verbo que describa su función.
Suscribirse a:
Entradas (Atom)