ccc

Mostrando entradas con la etiqueta JQuery: Ajax. Mostrar todas las entradas
Mostrando entradas con la etiqueta JQuery: Ajax. Mostrar todas las entradas

Ajax: llamar a un script y ejecutar un método de ese script

lsg.js:
function holamundo() {
console.log("estas ejecutando hola mundo");
}

getScript.php
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
</head>
<body>
<script>
$.getScript('lsg.js', function() {
    holamundo();
});
</script>
</body>
</html>

Ajax: llamar a un PHP que devuelve un JSON de un array asociativo

generarJSON.php:
$arr = array("1939" => "Lo que el viento se llevó", "1940" => "Las uvas de la ira", "1941" => "Ciudadano Kane");
echo json_encode($arr);

getJSONFromPHP.php:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
</head>
<body>
<script>
$.ajax({
 async: false,
 type: "POST",
 url: "generarJSON.php",
 data: {
 },
 success: function(data) {
$.each(data, function(key, val) {
   console.log(key);
   console.log(val);
});
  },
 error: function(data){
 }
});
</script>
</body>
</html>


También lo puedes hacer:
success: function(data) {
  arr = $.parseJSON(data); // lo convierte a Array
          ...
}

OJO: Nunca poner en el datatype del Ajax que es JSON (pq no es propiamente un json)

Ajax: Leer directamente fichero JSON

peliculas.json:
[
  {
"titulo": "Lo que el viento se llevó",
"director": "Victor Fleming",
"anno": "1939"
  },
  {
"titulo": "Rebeca",
"director": "Alfred Hitchcock",
"anno": "1940"
  },
  {
"titulo": "Qué verde era mi valle",
"director": "John Ford",
"anno": "1941"
  }
]

getJSON.php:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
</head>
<body>
<script>
$.getJSON("peliculas.json", function( data ) {
  $.each(data, function(key, val) {
  // console.log(key);
  // console.log(val);
  console.log(val["titulo"]);
  console.log(val["director"]);
  console.log(val["anno"]);
  });
});
</script>
</body>
</html>


Otra forma de recorrer un json (creado a partir de un array asociativo) sería:
html = '';
for(item of datosAux){
html += "<li>Fecha: "+item.fecha+" - "+item.valor+"</li>";
}
$("#result").html(html);

Ajax: Leer XML

El fichero XML, aparte de la cabecera de codificación (encoding="UTF-8"), tiene que estar creado en UTF-8.

peliculas.xml:
<?xml version="1.0" encoding="UTF-8"?>
<cine>
  <pelicula>
    <titulo>Lo que el viento se llevó</titulo>
    <director>Victor Fleming</director>
    <anno>1939</anno>
  </pelicula>
  <pelicula>
    <titulo>Rebeca</titulo>
    <director>Alfred Hitchcock</director>
    <anno>1940</anno>
  </pelicula>
  <pelicula>
    <titulo>Qué verde era mi valle</titulo>
    <director>John Ford</director>
    <anno>1941</anno>
  </pelicula>
</cine>

index.php:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
</head>
<body>

<ul></ul>

<script>
$.ajax({
type: "GET",
url: "./peliculas.xml",
dataType: "xml",
// contentType: "application/x-www-form-urlencoded;charset=utf-8",
    error: function (e) {
        console.log("XML reading Failed: ", e);
    },
    success: function (response) {
$("ul").children().remove();
$(response).find("pelicula").each(function () {
$("ul").append('<li>'+$(this).find('titulo').text()+'</li>');
$("ul").append('<li>'+$(this).find('director').text()+'</li>');
$("ul").append('<li>'+$(this).find('anno').text()+'</li>');
});
    }
});
</script>
</body>
</html>

Ajax: si excede un timeout la llamada al Ajax que muestre un error

 $.ajax({
   type : "POST",
   url : "procesar.php",
   data : $("#fromulariof1").serialize(),
   success : function(data){
   },
   timeout: 20000, // como maximo 20 segundos
   error: function(request, status, err) {
        if (status == "timeout") {
            alert("Su petición demoro mas de lo permitido");
        } else {
            // Ha ocurrido otro error
            alert("error: " + request + status + err);
        }
    }
  })

JQuery: $ajax

$.ajax({
async: false,
type: "POST",
url: "fichero.php",
data: {
 },
success: function(data) {
  }, 
 error: function(data){ 
 }

});

Si en el PHP al que llama el ajax devolvemos un array en formato:
echo json_encode(arr);
Entonces en el ajax tendremos que especificar: $.ajax({
   type: 'POST',
   dataType: "JSON",
   data: {
...


Si ponemos serialize() no hace falta ir poniendo uno por uno cada uno de los campos del form:
$("#btnSend").click(function() {
$.ajax({
  async: false,
  type: "POST",
  url: "procesar_form.php",
  data: $("#formLSG").serialize(),
 success: function(data) {
  },
 error: function(data){
  }
        })
});


Otra forma:
$.ajax({
       url: 'procesar_ajax.php',
       type: 'POST',
       dataType: 'default: Intelligent Guess (Other values: xml, json, script, or html)',
       data: {
              param1: 'value1'
         },
  })
 .done(function() {
       console.log("success");
 })
.fail(function() {
        console.log("error");
 })
 .always(function() {
        console.log("complete");
 });

// ********* A OTRO SERVIDOR DIFERENTE ************
$.ajax({
 async: false,
 type: "POST",
 url: "https://www.midominio.com/getRemoto.php",
 data: {
valor: 5
 },
 success: function(data) {
console.log(data);
  },
 error: function(data){
 }
});

En el fichero https://www.midominio.com/getRemoto.php:
// header("access-control-allow-origin: *");
$arrAux = array("uno", "dos", "tres", "cuatro", $_POST['valor']);
if (isset($_GET['callback'])) { // viene de un dominio diferente
   echo $_GET['callback'].'('.json_encode($arrAux).')';
}
else { // Si es una normal, respondemos de forma normal
    echo json_encode($arrAux);
}
?>