Cómo agregar jQuery Ajax POST ejemplo con PHP

Esta es una referencia simple:

// este es el id del formulario
$ (“# idForm”). submit (function (e) {

var url = “ruta / a / your / script.php”; // el script donde manejas la entrada del formulario.

$ .ajax ({
tipo: “POST”,
url: url,
data: $ (“# idForm”). serialize (), // serializa los elementos del formulario.
éxito: función (datos)
{
alerta (datos); // muestra la respuesta del script php.
}
});

e.preventDefault (); // evite ejecutar el envío real del formulario.
});

Otra solución similar que utiliza atributos definidos en el elemento de formulario:

var frm = $ (‘# contactForm1’);

frm.submit (función (e) {

e.preventDefault ();

$ .ajax ({
tipo: frm.attr (‘método’),
url: frm.attr (‘acción’),
datos: frm.serialize (),
éxito: función (datos) {
console.log (‘El envío fue exitoso’);
console.log (datos);
},
error: función (datos) {
console.log (‘Se produjo un error’);
console.log (datos);
},
});
});

Espero que te ayude.

Gracias,

Sachin Tiwari en Pepipost – Construyendo la comunidad de buenos remitentes de correo electrónico más grande del mundo

Es muy fácil agregar este método en PHP.

Ejemplo:

$ (documento) .ready (función () {

$ (" botón ") .click (function () {

$ .post ("demo_test_post.asp",

{

nombre: "Pato Donald",

ciudad: "Duckburg"

},

función (datos, estado) {

alerta ("Datos:" + datos + "\ nEstado:" + estado);

});

});

});

Enviar una solicitud HTTP POST a una página y recuperar el resultado

Aquí, simplemente llama a ese botón en el script para obtener resultados. O está utilizando cualquier formulario significa que simplemente llama a ese nombre de formulario en el script.

¡Espero que esto ayude!

jQuery ha hecho que la manipulación DOM y otras secuencias de comandos del lado del cliente sean más fáciles de lo que solían hacerlo los programadores con Java Script central. Simplifica la forma en que usamos Java Script en una página web al proporcionar un conjunto de métodos genéricos robustos y más compatibles con el navegador.

Ahora llegando al punto principal. Los métodos de jQuery Ajax están disponibles en diferentes sabores, pero voy a utilizar el que con suerte sea más relevante para su pregunta.

/ ** La sintaxis ** /
$ .post (URL, datos, función (datos, estado, xhr), tipo de datos)

Considere la sintaxis anterior. El parámetro “URL” es un nombre de archivo de script php válido (puede ser cualquier otro script), “datos” puede ser un objeto que representa un par clave / valor como la cadena de la siguiente manera:

{correo electrónico: ” [correo electrónico protegido] “, nombre: “John”}

El tercer parámetro es una función de devolución de llamada que puede utilizar para verificar la respuesta del servidor después de publicar con éxito. El último parámetro es el tipo de datos que se espera del servidor y se puede configurar para usar xml, json, script, text, html.

Tenga en cuenta que el único parámetro requerido es la URL, solo el resto se puede usar opcionalmente. Pongamos el verdadero ejemplo de su implementación ahora. Echa un vistazo a la siguiente pieza de código:

función doAjaxPost () {

$ .post (
“handle_post.php”,
{nombre de usuario: “John”},
función (resultado) {

// Puedes usar la variable de resultado para hacer cualquier cosa con éxito.
alerta (“Recibí una respuesta del servidor que decía” + resultado);

}
);
}

He envuelto la llamada ajax en un método “doAjaxPost ()” solo por simplicidad para que pueda usarla en cualquier momento de la manera que pueda, por ejemplo, haciendo clic en un botón.

Ahora puede que se pregunte cómo manejaría esta solicitud en el archivo handle_post.php en el servidor. Bueno, eso no es muy complicado. Puede escribir el mismo código que usa en el envío genérico del formulario php como se muestra a continuación:

if (isset ($ _POST [“nombre de usuario”])) {
echo “Hola”. $ _POST [“nombre de usuario”];
// Incluso puedes realizar una operación de base de datos aquí una vez que tienes los datos publicados
}
?>

Si todavía hay alguna duda al entender los códigos anteriores, no dude en ponerlos en los comentarios.

Gracias

Para hacer una solicitud ajax, use el siguiente código jQuery :

HTML:




JavaScript:

/ * Obtener de los valores de los elementos * /
valores var = $ (this) .serialize ();

$ .ajax ({
url: “resultado.php”,
tipo: “publicación”,
datos: valores,
éxito: función (respuesta) {
// aquí obtendrás respuesta

},
error: function (jqXHR, txtStat, errorThrown) {
console.log (txtStat, errorThrown);
}

});

Si tiene más métodos, hágamelo saber o contacte con nosotros en webetutorial

Hola,

Hay muchos tutoriales para jquery Ajax, puedes consultar el siguiente enlace

Solicitudes GET y POST de jQuery Ajax

O si quieres aprender, entonces puedes buscar en youtube el tutorial de jquery ajax, será más fácil de entender.

Puedes entender mejor aquí PHP – AJAX y PHP

Archivo html






Comience a escribir un nombre en el campo de entrada a continuación:

Nombre:

Sugerencias:

Archivo php

// Matriz con nombres
$ a [] = “Anna”;
$ a [] = “Bretaña”;
$ a [] = “Cenicienta”;
$ a [] = “Diana”;
$ a [] = “Eva”;
$ a [] = “Fiona”;
$ a [] = “Gunda”;
$ a [] = “Hege”;
$ a [] = “Inga”;
$ a [] = “Johanna”;
$ a [] = “Kitty”;
$ a [] = “Linda”;
$ a [] = “Nina”;
$ a [] = “Ofelia”;
$ a [] = “Petunia”;
$ a [] = “Amanda”;
$ a [] = “Raquel”;
$ a [] = “Cindy”;
$ a [] = “Doris”;
$ a [] = “Eva”;
$ a [] = “Evita”;
$ a [] = “Sunniva”;
$ a [] = “Tove”;
$ a [] = “Unni”;
$ a [] = “Violeta”;
$ a [] = “Liza”;
$ a [] = “Elizabeth”;
$ a [] = “Ellen”;
$ a [] = “Wenche”;
$ a [] = “Vicky”;
// obtener el parámetro q de la URL
$ q = $ _REQUEST [“q”];
$ pista = “”;
// busca todas las sugerencias de la matriz si $ q es diferente de “”
if ($ q! == “”) {
$ q = strtolower ($ q);
$ len = strlen ($ q);
foreach ($ a como $ nombre) {
if (stristr ($ q, substr ($ nombre, 0, $ len))) {
if ($ pista === “”) {
$ pista = $ nombre;
} más {
$ pista. = “, $ nombre”;
}
}
}
}
// Muestra “sin sugerencia” si no se encuentra ninguna pista o muestra valores correctos
echo $ pista === “”? “sin sugerencia”: $ sugerencia;
?>