¿Cuántas veces te has encontrado con el hecho de que ingresaste datos incorrectos, por lo que la página se recargó y eliminó por completo los caracteres ingresados en los campos? Para solucionar esto, existe un enfoque bastante popular para construir una interfaz de usuario, y su nombre es ajax. Aparece en muchos proyectos y se usa de muchas maneras.
Enviando un formulario ajax: conectando bibliotecas
Incluir biblioteca jquery en index.php.
Hay otra forma de incluir jquery en un documento. Debe descargar la biblioteca del sitio oficial de jquery, colocarla en la carpeta correcta y pegar el enlace así:
Conexión y configuración de documentos
1. Cree un documento.php en la carpeta con el sitio con cualquier nombre conveniente para usted; esto enviará el formulario php ajax. En él puede escribir en qué formato se mostrará el texto con el mensaje. Por ejemplo, form1.php.
2. En su carpeta de archivos javascript, cree un archivo.js concualquier nombre conveniente. Por ejemplo, form.js.
3. Conecte esta carpeta a su documento.
4. Crea un formulario con los siguientes parámetros:
En él, no olvides crear campos para ingresar tus datos.
5. Vaya al archivo form1.php en el directorio con el sitio, en el que escriba:
Ahora, al enviar el formulario, el navegador mostrará información sobre los datos.
En el mismo archivo, puede escribir qué se mostrará exactamente o cómo. También puede escribir ciclos o algoritmos aquí.
Enviando formulario ajax jquery
1. En el archivo form.js creado, debe escribir el código responsable de hacer que el archivo funcione después de que la página del sitio esté completamente cargada.
$(document).ready(function(){ //Nuestro próximo código se ejecutará aquí });
2. Luego, debe personalizar el botón Enviar. Hazlo todo en el mismo archivo.
$("formulario").submit(function(evento) { evento.preventDefault(); //aquí se escribirá el siguiente código });
La primera parte del código es responsable de seleccionar el elemento en la página, y la segunda es responsable de evitar la acción predeterminada.
3. Luego, por ejemplo, tome un envío de formulario ajax en caso de éxito.
$.ajax({ tipo: $(esto).attr('método'), url: $(esto).attr('acción'), datos: new FormData(esto), contentType: false, cache: false, processData: false, success: function(result){ alert(result); } });
Las siguientes son descripciones detalladas de cada configuración.
- tipo -este es el tipo de solicitud que se presenta en el formulario; dado que cuesta POST, el tipo de solicitud será apropiado;
- this - selección de elementos dentro de la construcción;
- attr - abreviatura de atracción (atracción), es decir, se atrae un determinado parámetro del objetivo (forma) seleccionado;
- url - parámetro responsable de dónde se enviará la solicitud; en este caso, lo que está escrito en los parámetros del formulario (form1.php);
- data - especifica los datos del formulario;
- contentType - responsable de enviar encabezados al servidor; en este caso no es necesario;
- cache - responsable de guardar el caché del usuario;
- processData - responsable de convertir datos a una cadena;
- success: muestra el resultado de un envío de datos exitoso; por lo tanto, si el envío de datos fue exitoso, entonces se ejecutan las acciones de la función.
4. Listo, ahora al enviar el formulario ajax, recibirá datos sin actualizar la página.
El resultado se puede cambiar utilizando el archivo form1.php, donde puede especificar qué se mostrará exactamente como resultado. Por ejemplo, Puede experimentar y crear una comprobación de la exactitud de la introducción de ciertos datos: si los datos no son correctos, se muestra el mensaje deseado; de lo contrario, se redirige a la página correcta. Muchas otras cosas también son posibles, lo que tu corazón desee.
También está el envío de datos al servidor de forma asíncrona. Aquí es cuando el usuario ingresa texto, e inmediatamente se res alta en rojo, lo que indica que los datos ingresados no son correctos. sobre esohay muchos manuales en Internet, donde todo está claramente explicado y mostrado con ejemplos.
Conclusión
Sin duda, ajax es una herramienta útil en la creación de sitios web. Para hacer páginas e interfaces de alta calidad, es simplemente necesario. Vale la pena señalar que es muy importante conocer jQuery para comprender completamente la imagen y lo que está escrito en el código, porque un simple copiar y pegar no siempre puede ayudarlo y enseñarle a comprender el código. Siempre vale la pena recordar que las versiones de idioma se actualizan y algunas funciones simplemente pueden desaparecer. Por lo tanto, no todas las soluciones pueden ser relevantes, a menudo el código escrito simplemente no funciona o no produce el resultado que le gustaría ver en su pantalla.
