Enviar un correo electrónico usando Ajax desde CodeIgniter

En este pequeño artículo, mostraré cómo enviar un correo electrónico desde su sitio web CodeIgniter sin enviar un formulario y volver a cargar la página., pero usando Ajax para llamar a un método de controlador y obtener instantáneamente la respuesta en su página.

Configuración de la pieza CodeIgniter.

Si estas leyendo esto, Supongo que ya sabes qué es CodeIgniter y cómo funciona (de lo contrario puedes empezar a aprender aquí). Supongo que también tiene su propio dominio y una aplicación CodeIgniter ya instalada. En este pequeño tutorial vamos a usar un montón de archivos:

• el controlador Principal
• las vistas start_view y contact_view
• Archivos de configuración de CodeIgniter config.php y route.php

Archivos de configuración

Primero asegúrese de que en su archivo config / config.php la variable $config['base_url'] estar configurado correctamente en su dominio. Si tu dominio es www.midominio.com Luego, en el archivo de configuración, tendremos:

$config['base_url'] = 'http://www.midominio.com/ ';

Como tú sabes, CodeIgniter te permite utilizar un método realmente cómodo para escribir tus enlaces: base_url() método:

<a href ="<?PHP echo base_url('contactos') ?>">Contactos</un>

Ahora podemos abrir aplicación / config / route.php archivo para hacer algún cambio. Asumiré que nuestro controlador será el controlador predeterminado en nuestra aplicación, Así que en el archivo route.php tendremos que configurar correctamente el valor de la variable $ruta['default_controller']. Además tenemos que agregar una línea para administrar el enlace de nuestra página de contacto:

$ruta['default_controller'] = 'Principal';
$ruta['404_override'] = '';
$ruta['contactos'] = 'Principal / contactos';

El controlador

En nuestro controlador solo tenemos un método de índice que carga el start_view:

contactos de función pública() { 
    $esta->carga->ver( 'vista_inicial' );
}

En el start_view solo mostraremos un enlace a nuestro formulario de contacto. Confieso que encontrará muy pobre el estilo de estas páginas, pero tenemos que centrarnos en el código subyacente, No es?

En el controlador principal tenemos que gestionar también la carga de la vista de contacto y el método que realmente envía nuestros correos electrónicos.. Los scripts completos del controlador se parecen a este:

<?php

if (!definido('BASEPATH')) {
	Salida('No se permite el acceso directo a la secuencia de comandos');
}

class Main extiende CI_Controller {

    índice de función pública()
    {
	$esta->carga->ver( 'vista_inicial' );
    }

    contactos de función pública()
    {
	$esta->carga->ver( 'vista_contactos' );
    }

    función pública sendemail()
    {
        $nombre = $ _POST['nombre'];
        $correo electrónico = $ _POST['Email'];
        $mensaje = $ _POST['mensaje'];
        $to = 'buzón@midominio.com';
        $asunto = 'Nuevo mensaje de su sitio web';
        $encabezados = "De: " . strip_tags($correo electrónico) . "\r  n";
        $encabezados. = "Responder a: ". strip_tags($correo electrónico) . "\r  n";
        $encabezados. = "Versión MIME: 1.0\r  n";
        $encabezados. = "Tipo de contenido: texto / html; juego de caracteres = ISO-8859-1  r  n";
        Si (correo($a, $tema, $mensaje, $encabezados))
        {
             echo 'Tu mensaje ha sido enviado correctamente. Gracias por contactarnos: responderemos lo antes posible<Br><estilo h4 ="texto alineado: Derecha;">Lo Nuestro personal</h4>';
        }
        más
        {
            echo 'Ooops, Lo siento, pero algo salió mal enviando tu mensaje. Por favor contáctenos en esta dirección: «.safe_mailto( support@yourdomain.com );
        }
    }
}

Como puedes ver, No hay nada especial: el método contactos() carga la vista de contacto que muestra un formulario para enviar correos electrónicos: cuando el usuario hace clic en el botón Enviar, el método enviar correo electrónico() en realidad envía una imagen y se hace eco de un mensaje en consecuencia. CodeIgniter no accede a este método a través del sistema de enrutamiento después de enviar un formulario: en su lugar, jQuery lo llama a través de una llamada Ajax: Esta es la razón por la que este método no carga ninguna vista: la vista sigue siendo la actual, es decir vista_contacto.

Las vistas

Esta es la parte interesante, pero permítanme presentarles rápidamente nuestras opiniones. El primero es start_view, el que se carga cuando ingresamos al sitio visitando la url www.midominio.com

los start_view:

<?php
defined('BASEPATH') O salir('No se permite el acceso directo a la secuencia de comandos');
?>
<!DOCTYPE html>
<html lang ="en">
    <cabeza>
        <meta juego de caracteres ="UTF-8">
        <título>Enviar correo electrónico Página de inicio</título>
    </cabeza>
    <cuerpo>
        <h1>La vista de inicio</h1>
        <pag>Si no le gusta esta página, puede notificarme usando nuestro <a href ="<?PHP echo base_url('contactos'); ?>">contactos</un> página.</pag>
    </cuerpo>
</.html>

Sospecho que vamos a recibir muchos correos electrónicos…

los vista_contactos:

<?php
defined('BASEPATH') O salir('No se permite el acceso directo a la secuencia de comandos');
?>
<!DOCTYPE html>
<html lang ="en">
    <cabeza>
        <meta juego de caracteres ="UTF-8">
        <título>Enviar correo electrónico Página de inicio</título>
    </cabeza>
    <cuerpo>
        <h1>La vista de contacto</h1>
        <pag>Utilice el formulario para enviarnos un correo electrónico:</pag>
        <div id ="respuesta"></Div>
        <formulario>
            <etiqueta para ="correo electrónico">Correo electrónico</etiqueta>
            <id de entrada ="correo electrónico" type ="texto" placeholder ="Correo electrónico" />
            <Br>
            <etiqueta para ="nombre">Nombre</etiqueta>
            <id de entrada ="nombre" type ="texto" placeholder ="Nombre" />
            <Br>
            <ID de área de texto ="mensaje" placeholder ="Su mensaje aquí..."></área de texto>
            <Br>
            <id del botón ="enviar"> Enviar </botón>
        </formulario>
    </cuerpo>
</.html>

Observe el div con id establecido en «respuesta» donde se mostrará el mensaje devuelto por el controlador.

Y, sí, la forma es horrible, Lo sé…

Y ahora vamos a enviar un correo electrónico con Ajax…

Finalmente estamos listos para implementar nuestro código Ajax para enviar correo electrónico desde nuestro sitio web CodeIgniter.

Permanecer en vista_contactos: Aquí vamos a agregar nuestro código JavaScript. primero, incluimos jQuery:

<script src ="https (en inglés)://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></guión>

en segundo lugar, debemos informar a jQuery algo sobre nuestra URL base, Así que crearemos una variable llamada baseUrl para usar en opur script:

<de script type ="text / javascript"> 
    var baseUrl = "<?php imprimir base_url(); ?>";
</guión>

Y finalmente podemos ir con la llamada real de Ajax:

$( documento ).en( 'hacer clic', '#enviar', función ( mi ) {
    e.preventDefault();
    //ocultar la respuesta si es visible
    $( '#respuesta' ).esconder();
    //we grab all fields values to create our email
    var name = $( '#nombre' ).Val();
    var correo electrónico = $( '#Email' ).Val();
    var mensaje = $( '#mensaje' ).Val();
    Si ( nombre === '' || correo electrónico === '' || mensaje === '' )
    {
        //all fields are rquired so if one of them is empty the function returns
        return;
    }
    //if it's all right we proceed
    $.ajax( {
        escribe: 'correo',
        //nuestra variable baseurl en acción llamará al sendemail() method in our default controller
        url: baseurl + 'enviar correo electrónico',
        datos: { nombre: nombre, correo electrónico: correo electrónico, mensaje: mensaje },
        éxito: función ( resultado )
        {
            //Ajax llama al éxito y podemos mostrar el valor devuelto por nuestra función de controlador
            $( '#respuesta' )..html( resultado ).fadeIn( 'lento' ).demora( 3000 ).fadeOut( 'lento' );
            $( '#nombre' ).Val( '' );
            $( '#Email' ).Val( '' );
            $( '#mensaje' ).Val( '' );
        },
        error: función ( resultado )
        {
            //La llamada de Ajax falló, así que le informamos al usuario que algo salió mal
            $( '#respuesta' )..html( 'Servidor no disponible ahora: Por favor, vuelva a intentarlo más tarde. ).fadeIn( 'lento' ).demora( 3000 ).fadeOut( 'lento' );
            $( '#nombre' ).Val( '' );
            $( '#Email' ).Val( '' );
            $( '#mensaje' ).Val( '' );
        }
    } );
} );

Eso es todo: se tarda más en decir que en hacer.

Espero que encuentres útil este artículo y no dudes en dejar comentarios, críticas o todo lo que quieras decir… casi todo 😉