jump to navigation

Enviar un formulario mediante Ajax febrero 27, 2007

Posted by superpiwi in Uncategorized.
trackback

Navegando me encuentro con AJForm , una libreria de javascript bastante interesante. Con esta libreria podemos mandar los datos de un formulario mediante Ajax y recibir el resultado en una funcion javascript que se encargara de procesar la respuesta. En caso de que ocurra un error en la transmision, pues el formulario se enviara de la manera habitual (ya sabeis, lo que implica, la recarga de la pagina). La documentacion de la pagina esta muy bien, pero adapto el ejemplo para usar un JSP:

Escribimos el codigo de la pagina que guarda el Formulario (Formulario.jsp):


<%
String contexto=request.getContextPath();
%>
<head>
<script type="text/javascript" src="<%=contexto%>/ajform.js"></script>
<script type="text/javascript">
function preProcess( thisFormElement ) {
if( thisForm.elements['myName'].value == "" ) {
alert( "El nombre esta vacio." );
return false;
}
else {
//alert( "You successfully completed the form. The data will now be sent to the server." );
return true;
}
}
function getReturnData( data , statusCode , statusMessage) {
//AJFORM failed. Submit form normally.
if( statusCode != AJForm.STATUS['SUCCESS'] ) {
alert( statusMessage );
return true;
}
//AJFORM succeeded.
else {
//alert( "Data:\n" + data );
document.getElementById("mensaje").innerHTML=data;
}
}
</script>
</head>
<body>
<form action="<%=contexto %>/ajform.jsp" onsubmit="javascript:preProcess(); ajform:getReturnData();">
DATOS:
<br/>
<div name="mensaje" id="mensaje">
</div>
<table>
<tr>
<td>Nombre:</td>
<td><input type="text" name="myName" /></td>
</tr>
<tr>
<td>
<select name="favoriteColor">
<option value="Negro">Negro</option>
<option value="Rojo">Rojo</option>
<option value="Verde">Verde</option>
</select>
</td>
</tr>
<tr>
<td><input type="submit" name="submit" value="Enviar" /></td>
</tr>
</table>
</form>
</body>

y el JSP que recoge los datos del formulario (ajform.jsp):


<%
String ajform = request.getParameter("ajform");
System.out.println("ajform"+ajform);
if (ajform.equalsIgnoreCase("1"))
{
//se retorna el valor a la funcion javascript
%>
<font color="blue">Hola <%=request.getParameter("myName") %>, tu color favorito es <%=request.getParameter("favoriteColor") %></font>
<%
}
else
{
//procesamiento del formulario en modo normal
%>
<a href="javascript:history.back(-1);">Volver al formulario </a>
<%
}
%>

Este ultimo se compone de un chequeo, si el envio mediante AJForm ha tenido exito se procesa la respuesta para enviarla a la funcion javascript, si no se devuelve el contenido normal y que se mostrara al recargar la pagina.

ajform01.jpg

Ajax simplificado al máximo y muy sencillo de usar!!!

Comentarios»

1. palta - mayo 30, 2007

hola a todos

2. Susy - noviembre 5, 2007

esta es una prueba

3. superpiwi - noviembre 6, 2007

pues la prueba funciona muy bien!!! xD

4. Jack - abril 7, 2008

No me funcionó como muestras el ejemplo, al crear el jsp me marca error en linea 42. Se esperaba identificador, una cadena o un número. al corregir ese error al momento que recibe los parametros ajform.jsp me manda este error
org.apache.jasper.JasperException: Exception in JSP: /tests/example.jsp:4

1:

Stacktrace:
org.apache.jasper.servlet.JspServletWrapper.handleJspException(JspServletWrapper.java:467)
org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:389)
org.apache.jasper.servlet.JspServlet.serviceJspFile(JspServlet.java:315)
org.apache.jasper.servlet.JspServlet.service(JspServlet.java:265)
javax.servlet.http.HttpServlet.service(HttpServlet.java:802)
org.netbeans.modules.web.monitor.server.MonitorFilter.doFilter(MonitorFilter.java:368)

causa raíz

java.lang.NullPointerException
org.apache.jsp.tests.example_jsp._jspService(example_jsp.java:45)
org.apache.jasper.runtime.HttpJspBase.service(HttpJspBase.java:97)
javax.servlet.http.HttpServlet.service(HttpServlet.java:802)
org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:328)
org.apache.jasper.servlet.JspServlet.serviceJspFile(JspServlet.java:315)
org.apache.jasper.servlet.JspServlet.service(JspServlet.java:265)
javax.servlet.http.HttpServlet.service(HttpServlet.java:802)
org.netbeans.modules.web.monitor.server.MonitorFilter.doFilter(MonitorFilter.java:368)

5. pascual - junio 4, 2009

test message


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: