-
Cómo subir un formulario con Ajax Comentarios
-
AJAX es una de las aplicaciones Web más populares hoy en día debido a su capacidad para transformar las aplicaciones Web a más como aplicaciones de escritorio. AJAX tiene una funcionalidad que otras tecnologías no podrían llevar a cabo, tales como la integración completa con diversos lenguajes de programación. También tiene otra aplicación web interactiva y actualización de contenidos web sin la necesidad de cargar toda la página web. Es capaz de hacer formularios en línea interactiva y más funcional.Instrucciones
1 Utilice el siguiente código para crear un formulario con un nuevo comportamiento presentar. Este formulario será llamar a un JavaScript en lugar de que la presentación de los datos a una página diferente.
<Script language = "javascript" type = "text / javascript">
// Esta función se llama cuando se forma submited
SaveData funcionar () {
// ...
return false; // Prevenir la forma de ser submited
}
función init () {
document.getElementById ( "feedback_form") onsubmit = SaveData.; // La función SaveData está unido a la acción de envío de la forma.
}
window.onload = init; // La función 'init' se llamará cuando se carga la página.
</ Script>
2 Inserte el siguiente código para crear algunas funciones de biblioteca AJAX y el nombre de sus "ajax_lib.js" de archivos o con cualquier cosa que desee:
var = jx_http jx_getHTTPObject (); // Creamos el objeto HTTP
// Crear un objeto XMLHttpRequest - este es el constructor.
funcionar jx_getHTTPObject () {
xmlhttp var;
// Objetos ActiveX de uso, por ejemplo para cargar el archivo.
si (typeof ActiveXObject! = 'definido') {
tratar {
xmlhttp = new ActiveXObject ( "Msxml2.XMLHTTP");
} Catch (e) {
tratar {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");} Catch (e) {
xmlhttp = false;}
}
// Si ActiveX no está disponible, utilice el XMLHttpRequest de Firefox / Mozilla, etc. para cargar el documento.
} Else if (XMLHttpRequest) {
tratar {
xmlhttp = new XMLHttpRequest ();
} Catch (e) {
xmlhttp = false;
}
} Else {
xmlhttp = false;
}
xmlhttp regresar;
}
// Esta función es llamada desde la escritura del usuario. Se llevará a una URL de devolución de llamada y una función opcional.
// A continuación, se leerá el archivo URL, esperando una cadena JSON. Una vez cargado el archivo, la secuencia de comandos
// Se pharse la cadena JSON usando 'eval' y llamar a la función de devolución de llamada definido por el usuario con este
// Array como argumento.
// - Argumentos
// URL - La URL del script serverside que se va a llamar. Anexar todos los argumentos a
// Esta URL como GET params - como get_data.php id = 5 & car = benz
// Devolución de llamada - Nombre de la función que debe ser llamado una vez los datos están listos. Si una devolución de llamada
// No se le da la función, a continuación, se utilizarán las funciones por omisión '' jx_processResults.
jx_getData función (URL, devolución de llamada) {
si el retorno (jx_http!);
jx_http.open ( "GET", URL, true);
// Llamar a una función Anonymos cuando cambia el estado.
jx_http.onreadystatechange = function () {
si (jx_http.readyState == 4) {// Listo Estado será del 4 al cargar el documento.
var result;
si (jx_http.responseText) resultado = eval (jx_http.responseText); // Sí, sé que solía eval - su JSON, estúpida.
otro resultado = "";
si (devolución de llamada) {
callback(result); //Give the data to the user defined function.} Else {// Si no hay una función definida por el usuario ...
//Call a predifined function with the result.if (jx_processResults) jx_processResults (resultado);
}
}
}
jx_http.send (null);
}
3 Volver a la sección de cabecera e introduzca el código siguiente para establecer su función principal AJAX:
<Script language = "javascript" type = "text / javascript" type = "text / javascript">
// Esta función se llama cuando se forma submited
SaveData funcionar () {
// ...
return false; // Prevenir la forma de ser submited
}
función init () {
si jx_http () {// Si el navegador es compatible con funciones de Ajax
document.getElementById ( "feedback_form") onsubmit = SaveData.; // La función SaveData está unido a la acción de envío de la forma.
}
}
window.onload = init; // La función 'init' se llamará cuando se carga la página.
</ Script>
4 Aplicar el siguiente código para establecer el archivo "save_data.php" para pasar los resultados a ser insertado en la base de datos:
// Esta función se llama cuando se envía el formulario
SaveData funcionar () {
var comentario = document.getElementById ( "Comentario") de valor.;
.-Mail var = document.getElementById ( "e-mail") de valor;
// Al llamar a este archivo, hemos guardado los datos.
jx_getData ( "? save_data.php comentario =" + mensaje + "& email =" + correo + "y volver = ninguno");
// Muestra el mensaje de agradecimiento.
. Document.getElementById ( "form_elements") innerHTML = "<h1> feedback recibido </ h1> Gracias por su interés - vamos a ver en su comentario tan pronto como sea posible.";
return false; // Prevenir la forma de ser presentado
}
5 Inserte el siguiente código para activar su forma, conectarlo a su base de datos y obtener retroalimentación de AJAX:
<? Php
include ( './ connect.php'); // Conectarse a la base de datos.
los datos // Introducir en nuestra base de datos
mysql_query ( "INSERT INTO retroalimentación (feedback_email, feedback_comment, feedback_time)
VALUES ( '$ _ REQUEST [e-mail]', '$ _ REQUEST [comentario]', NOW ()) ") or die (" No se puede guardar: ". Mysql_error ());
si (_ REQUEST [ 'retorno'] == 'ninguno' $) de salida; // Salir sin imprimir la nota de agradecimiento.
?>
<Html>
<Head>
<Title> feedback recibido </ title>
</ Head>
<Body>
<H1> opiniones recibidas </ h1>
Gracias por su interés - vamos a ver en su comentario tan pronto como sea posible.
</ Body>
</ Html>
Consejos y advertencias
- Siempre ponga la información lenguaje de script en la sección de cabecera de la página para ser compatible con la mayoría de las páginas Web que aparece en línea. Utilice tutoriales en línea para obtener un entendimiento básico de AJAX.
