Submit a formulario con Ajax en JQuery y el uso de Json

[gebremswar]

Saludos FDW.

Con conocimientos medios en javascript, ajax, y un poco de jquery estuve buscando en los foros la manera de enviar un formulario con submit pero sin que recargara la pagina para lo cual era necesario ajax pero no encontraba la manera de hacerlo con el submit ya que lo hice solo con el evento onclick.

Pues bien, encontré el código necesario para hacer lo que necesitaba y usan en una pagina web (lo saqué viendo el código fuente), el cual les muestro a continuación.

Código Javascript:

$(document).ready(function() {   
    $("#myform").bind("submit", function() {                
        var $form = $(this);
        $.ajax({
            type : "post",
            cache: false,
            url : $form.attr('action'),
            data : $form.serialize(),
            dataType: "text",
            beforeSend: function() {
                $("#loading").fadeIn();
                $("#contactButtom").attr('disabled', true);
            },
            error: function(data) {
                $("#loading").fadeOut();
                $("#contactButtom").attr('disabled', false);
                $("#contactKo").html("Error fatal").fadeIn().delay(5000).fadeOut();
            },
            success: function(data) {
                $("#loading").fadeOut();
                $("#contactButtom").attr('disabled', false);
                //las respuestas Json usan un wrapper por seguridad que debe ser borrado para usar el objeto JSON
                var responseObject = jQuery.parseJSON(data.substring(data.indexOf("\/\*")+2, data.lastIndexOf("\*\/")));
                if (responseObject.message) {                            
                    if(responseObject.type == "success") {
                        $("#contactOk").html(responseObject.message).slideToggle("slow").delay(6000).slideToggle("slow");
                    } else {
                        $("#contactKo").html(responseObject.message).slideToggle("slow").delay(6000).slideToggle("slow");
                    }
                }
            }
        });
        return false;
    });
    $("#contactOk").bind("click", function() {
        var $contactOk = $(this);       
        $contactOk.fadeOut();
    });
});
 

Código HTML:

<div class="col p60">
                        <div id="contactKo" style="display: none; ">Error fatal</div>
                        <div id="contactOk" style="display: none; "><b>Tu mensaje se ha enviado correctamente</b><br>Me pondré en contacto contigo lo antes posible</div>
                        <form id="myform" action="contact.php" method="post">   
                            <fieldset>                                                     
                                <input type="text" name="name" id="name" placeholder="Escribe tu nombre" class="border-radious" required="">
                                <div id="respuesta"></div>
                                <input type="email" name="email" id="email" placeholder="Escribe tu dirección de correo" class="alt border-radious" required="">
                                <textarea id="message" name="message" placeholder="¿De qué quieres hablar?" class="border-radious" required=""></textarea>                
                                <input id="contactButtom" type="submit" value="Enviar mensaje">                
                                <img id="loading" src="images/loading-contact.gif" alt="cargando" style="display: none; ">                                
                            </fieldset>
                        </form>
                        
                    </div>
 

Como podrán apreciar es un formulario de Contacto con nombre, email, y texto el mismo que es enviado con un submit.

Envía el formulario sin recargar la pagina; y pues no entiendo algunas cosas, no todo, solo algunas ya que he aprendido javascript y he usado ajax en jquery (muy basico) pero hay algunas cosas nuevas para mi.

Necesito que me expliquen y aclaren mis dudas, para lo cual voy a citar los números de las lineas (que generó el envoltorio) de codigo javascript.

- Linea 6: el valor para "cache:" que se le envía es false, no lo había usado antes pero sé que por defecto es true y que se debe poner false cuando se usa JSON para no almacenar en caché. ¿Es esto correcto?

- Linea 9: El valor para "dataType:"; siempre he usado "html" o "text", sé que los posibles valores también pueden ser xml, script y json. Los cuales sé para que usan excepto el ultimo de los tres que mencioné. ¿Para que se usa Json?, ¿En casos debo usarlo?

- Linea 23: De todo es lo que menos entiendo y lo escrito en la linea 22 no es de mucha ayuda (a ver si alguien lo entiende mejor que yo) ¿Que recibe la variable "responseObject "? ¿que hace parseJSON?
nota: cuando se envía correctamente el formulario Muestra un mensaje : "<b>Tu mensaje se ha enviado correctamente</b>" dentro del <div id="contactOk"> y cuando modifico la linea 4 del Código HTML colocado la ruta del action erronea muestra el mensaje "Error fatal" que sele asigna en la linea 17 del Código Javascript. Entonces, ¿de donde obtiene esos mensajes la variable "responseObject " que se extraen en las lineas 26 y 28.
Esto ultimo se los pregunto porque intenté recrear el formulario (con JSP) y los datos llegan a la ruta action que se le haya especificado pero el "firebug" bota un error: " SON.parse: unexpected end of data".

Aqui una imagen del error:

Código HTML:

http://a4.sphotos.ak.fbcdn.net/hphotos-ak-snc7/420322_3186239092358_1157203892_33045821_351950254_n.jpg
 

Como pueden observar los datos se envían y también se reciben correctamente pero me falta entender como mostrar los mesajes antes mensionados ya que no me los muestra. Creo que esos mensajes se toman de contact.php (para el ejemplo citado en código).

Por otro lado, leí lo referente a Json (en Wikipedia), de lo me llamo la atención un párrafo, el cual comparto con uds.

Código parrafo:

El beneficio de JSON, entonces, no es que sea más pequeño a la hora de transmitir, sino que representa mejor la estructura de los datos y requiere menos codificación y procesamiento.
 

Y pues necesito su opinión de expertos.

Disculpen por escribir tanto, pero quería ser claro y no deseaba olvidarme de algún detalle.

Muchas gracias.
Creo que este Nuevo Tema servirá bastante despues de todo.

[gebremswar]

El error " SON.parse: unexpected end of data".
lo pude solucionar.

[gebremswar]

Aun me queda la "espinilla" del Json