Formulario con Ajax y JSON

JPZamora · #1 (**permalink**) 29/04/2012, 21:50

Estoy haciendo el intento de crear un formulario en el que envies un comentario, al finalizar el envio te confirmara dandote de resultado tu mismo comentario con nombre y codigo de comentario a traves de un responde en JSON.

Este es mi codigo, segun he leido asi debe de ir, no se si tenga algun error.

Código HTML:

<!DOCTYPE html>
<html>
    <head>
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />       
		<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
        <script type="text/javascript" language="javascript">
        function sendForm(nombre,mensaje){
        $.ajax({
        	data: "name=" + nombre+ "&msg=" + mensaje,
        	dataType: "json",
        	type: "GET",
    		url: "http://jupazave.com/temporal/api.php",
    		success: function(dato) {
		                   var data_as_json = dato.data;
		                   var cc = dato."Comment Code";
		                   	$("#status").append("Mensaje Enviado (" + html(data_as_json.cc) + ") <br/> Nombre:" +  html(data_as_json.Name) + "<br/> Mensaje:" + html(data_as_json.Message) + "<br/>");

	                   }
    		
		});

		}
		
		</script>
    </head>
    <body>
	<div data-role="page">
	    <div data-role="header">
	         <h1>Forms</h1>
	    </div>
	    <div data-role="content">
			<form action='javascript:sendForm($("#numero").val(),$("#mensaje").val())' method="post">
				<div data-role="fieldcontain">
					<label for="nombre">Nombre:</label>
					<input type="text" name="nombre" id="nombre" />
				</div>

				<div data-role="fieldcontain">
					<label for="mensaje">Mensaje:</label>
					<textarea name="mensaje" id="mensaje"></textarea>
				</div>
				<p> <input type="submit" value="Send Messages"></p>
			</form>
			<br/>
			<div id="status"></div>
	    </div>
	    <div data-role="footer">
	         <h4>2012</h4>
	    </div>
	</div>

    </body>
</html>

y el JSON de api.php imprime (valores de ejemplo):

Código:

{"data":
	{"Comment Code":"15",
	"Name":"Juan",
	"Message":"Hola a todos"},
"progress":"DONE"}

Gracias de antemano.

chwc · #2 (**permalink**) 29/04/2012, 22:25

hola
dos cosas que no entendi
todas estan adentro de esto

Código Javascript:

Ver originalsuccess: function(dato) {
                           var data_as_json = dato.data;
                           var cc = dato."Comment Code";
                            $("#status").append("Mensaje Enviado (" + html(data_as_json.cc) + ") <br/> Nombre:" +  html(data_as_json.Name) + "<br/> Mensaje:" + html(data_as_json.Message) + "<br/>");
 
                       }

var cc = dato."Comment Code";
no sera?
var cc = data_as_json['Comment Code'];

esa funcion rara html, me parece como si fuera inservible,ademas, me parece que data_as_json.cc, tendria que ser cc
no sera

Código Javascript:

Ver original$("#status").append("Mensaje Enviado (" + cc + ") <br/> Nombre:" +  data_as_json.Name + "<br/> Mensaje:" + data_as_json.Message + "<br/>");

saludos

IXtremeLT · #3 (**permalink**) 29/04/2012, 22:58

Cierto, esas 3 lineas no tienen mucho sentido, mas que nada con la de ."Comment Code", eso es un error de sintaxis, para acceder a una propiedad de un objeto, primero hay que ver si es posible usando el punto(.) y el nombre de de la propiedad sin comillas de lo contrario para acceder por medio de un string hay que usar los corchetes y adentro el string, como cuando accedes a un valor de un array.

Ademas eso de usar espacios en el nombre de una propiedad, en tu caso "Commet code", no me parece apropiado y probablemente algunos navegadores no soporten esa "funcionalidad".

JPZamora · #4 (**permalink**) 30/04/2012, 10:36

Fuera de esos do errores que ya he corregido, debe de haber alguno más, en base a mi poco conocimiento no logro encontrar, pero se que existe porque no genera ninguna acción después de enviar el formulario, alguna otra sugerencia?

IXtremeLT · #5 (**permalink**) 09/05/2012, 18:02

Creo que el usar javascript en el atributo action del form no es valido, mejor ponlo el
evento onsubmit y un return false despues del codigo que pusiste en el action, saludos.