Jquery AJAX Methods

Developer
MoyArt Maximus
Size
2,957 Kb
Views
42,504
  1. Jquery AJAX Methods Previews
  2. Jquery AJAX Methods HTML Codes
  3. Jquery AJAX Methods JS Codes

How do I make an jquery ajax methods?

What is a jquery ajax methods? How do you make a jquery ajax methods? This script and codes were developed by MoyArt Maximus on 09 July 2022, Saturday.

Jquery AJAX Methods Previews
IQ Test

Jquery AJAX Methods - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Jquery AJAX Methods</title>
</head>
<body> <div id="mainContent"> <h1>jquery Ajax</h1> <div id="ajax"> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Jquery AJAX Methods - Script Codes JS Codes

$(document).ready(function(){
/* jQuery.get():
///////////////////////////////////////////////////////////
Es otra manera de llamar de hacer una peticion al servidor,
En este caso la peticion http es del tipo get y se usa de la siguiente manera:
jQuery.get(url, data, callback);
url: Es el primer argumento es el url a donde estas haciendo la peticion
data: Es el segundo argumento y es opcional, es data/informacion que puedes mandar al webserver
callback: Es el tercer argumento, es una funcion que se necesita para procesar la informacion que viene de regreso
A continuacion un ejemplo:*/
var url = "/empleados.php";
var data = { "Nombre" : "MoyArt", "Apellido" : "Maximus"
}
var callback = function(response){ //Lo que queramos hacer con la respuesta console.log(response); $('ajax').html(response);
}
/* jQuery.getJSON():
///////////////////////////////////////////////////////////
Es muy parecido a jQuery.get(), se encarga de cargar informacion enviada por el servidor
contenida dentro de un JSON mediante GET HTTP request. funciona de la siguiente manera:
jQuery.getJSON(url, data, callback);
Es importante notar que este metodo de jQuery no solo trae la informacion del objeto, tambien
se encarga de parsearlo, por lo tanto, si el archivo que estas pidiendo no es un archivo JSON
valido, el callback donde se va a manejar la respuesta del servidor simplemente no va a funcionar, es muy importante asegurarse que se esta haciendo referencia a un JSON valido
A continuacion un ejemplo:
*/ //Setup de variables para metodo jQuery.getJSON(); //URL donde se encuentra el JSON que vamos a ocupar: var url = "../data/employees.json"; //Funcion Callback var callback = function(response){ console.log(response); var statusHTML = "<ul class='bulleted'>"; //Loop $.each(array_u_0bjeto, callback); de jQuery $.each(response, function(index, employee){ if(employee.inoffice === true){ statusHTML += "<li class='in'>"; }else{ statusHTML += "<li class='out'>"; } statusHTML += employee.name + '</li>'; }); statusHTML += "</ul>"; //Agregamos la respuesta al DOM mediante el metodo .html de jQuery $('#employeeList').html(statusHTML); } //Ejecutamos nuestro AJAX jQuery.getJSON(url, callback); /* El metodo jQuery.post() nos permite enviar informacion, usualmente a una base de datos, este metodo nos permite enviar grandes bloques de informacion, se parece mucho al metodo jQuery.get() y se usa de la siguiente manera: jQuery.post(url, data, callback) url: es el primer argumento y es la direccion del servidor que va a estar encargada de procesar la informacion que vamos a mandar. data: es el segundo argumento, la informacion que vamos a mandar callback: la funcion encargada de manejar el request */ /* El metodo jQuery.ajax() es un metodo de jquery que nos permite pasar como parametros la direccion del servidor donde se encuentra nuestro JSON y como segundo parametro un objeto que nos permite configurar nuestro request. para ver todos los elementos del objeto que se pueden configurar hay que consultar la documentacion de jQuery (https://api.jquery.com/jQuery.ajax/) A continuacion vamos a ver un ejemplo de como se utiliza. */ $("form").submit(function(evt){ evt.preventDefault(); var url = $(this).attr("action"); var formData = $(this).serialize(); // jQuery.ajax(url, setup); jQuery.ajax(url, { data: formData, type: "POST", success: function(response){ $('#signup').html('<p>Gracias por suscribirte</p>'); } }); }); /*Metodo .fail(): cuando se usa ajax con jQuery se cuenta con un metodo que te ayuda a determinar cual es el error, el metodo .fail(), este metodo recive como parametro una funcion callback en la que podemos ver cual es elerror, esto se hace de la siguiente manera: */ $get('missing.html', function(request){ $('myDiv').html(request); }).fail(function(jqXHR){ $('myDiv').html("<p>Lo sentimos</p>"+ jqXHR.statusText + "error.</p>") });
}); // end document ready
Jquery AJAX Methods - Script Codes
Jquery AJAX Methods - Script Codes
Home Page Home
Developer MoyArt Maximus
Username MoyArt
Uploaded July 09, 2022
Rating 3
Size 2,957 Kb
Views 42,504
Do you need developer help for Jquery AJAX Methods?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

MoyArt Maximus (MoyArt) Script Codes
Name
ManejoDeVistas
Module Pattern
CSS Radio Button
Simple jQuery Toggle Menu
Numeros a cantidades
JQuery Array Looping
Ejercicio Polymer
Ejercicio AJAX
JS Coercion
Clase Sass
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!