javascript/7_JQuery/Javascript_7-12_JQuery-Ajax.html at master · didacticode/javascript

Repository navigation

History

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

<!DOCTYPE html>

<html>

<head>

<style>

</style>

$(document).ready(inicio);

function inicio() {

$("#ajax").click(function () {

var nom = $("#nombre").val();

var ape = $("#apellido").val();

var parametros = {

"nombre": nom,

"apellido": ape

};

//$.ajax: tiene un conjunto completo de parámetros

$.ajax({

url: "saludo.php", //URL donde realizamos la petición

data: parametros, //Datos a enviar, como objeto o como cadena

success: function (respuesta) { //Función si la petición ha ido bien

$("#mostrar").text(respuesta);

error: function (xhr, status) { //Función si la petición ha fallado

alert("Ha ocurrido un error");

complete: function (xhr, status) {

alert("Petición realizada");

}

//Otras opciones: beforeSend, async, cache, context, headers... (ver API)

});

//Otros métodos: basados en $.ajax pero tienen parámetros establecidos por defecto

$("#enviarGet").click(function () {

$.get("saludo.php", {

"nombre": "Ada",

"apellido": "Lovelace"

}, function (respuesta) {

$("#mostrar").text(respuesta);

});

$("#enviarGetMensajes").click(function () {

//Función que no envía nada y controla diferentes resultados de la solicitud

$.get("saludo.php", function () {

alert("Exito");

}).done(function () {

alert("Exito 2");

}).fail(function () {

alert("Error");

}).always(function () {

alert("Siempre");

});

$("#enviarPost").click(function () {

//Función que envía datos pero no devuelve nada

$.post("saludo.php", {

"nombre": "Ada",

"apellido": "Lovelace"

});

//Función que no envía datos pero recibe respuesta

$.post("holamundo.php", function (respuesta) {

alert("Respuesta: " + respuesta);

});

//Función que envía datos y recibe respuesta

$.post("saludo.php", {

"nombre": "Ada",

"apellido": "Lovelace"

}).done(function (respuesta) {

alert("Respuesta: " + respuesta)

});

//Añade un script y ejecuta una función del script

$("#getScript").click(function () {

$.getScript("script.js", function () {

dentroScript();

})

});

//Obtiene un JSON desde el servidor

$("#getJSON").click(function () {

$.getJSON("json.php", function (respuesta) {

$.each(respuesta, function (clave, valor) {

alert(clave + " : " + valor);

});

//Carga datos del servidor y el HTML lo introduce en un elemento

$("#load").click(function () {

$("#mostrar").load("holamundo.php", function () {

alert("Se ha cargado holamundo.php en #mostrar");

});

}

</script>

</head>

<body>

<button id="ajax">Enviar Ajax</button>

<button id="enviarGet">Enviar Get</button>

<button id="enviarGetMensajes">Enviar Get</button>

<button id="enviarPost">Enviar Post</button>

<button id="getScript">getScript</button>

<button id="getJSON">getJSON</button>

</body>

</html>

FilesExpand file tree

Javascript_7-12_JQuery-Ajax.html

Latest commit

History

Javascript_7-12_JQuery-Ajax.html

File metadata and controls