martes, 29 de octubre de 2013

JQuery - Ajax

AJAX (Asynchronous JavaScript Xml)


This is the method to invoke ajax

$.ajax({   
     url: "my_data.xml" ,      // URL of you want to GET via AJAX
    cache: false,
    dataType: "xml",           // data - The data return from the Ajax call
    success: function(xml_reader){       // Run this function is the method ajax is successful
        $(xml).find("runner").each(function() {

  var info = '<li>Name: ' + $(this).find("fname").text() + ' ' + $(this).find("lname").text() + '</li>';

 if( $(this).find("gender").text() == "m" ){
$('#finishers_m').append( info );
}else if ( $(this).find("gender").text() == "f" ){
$('#finishers_f').append( info );
}
  $('#finishers_all').append( info );
});                
    }

});


Ajax methods in JQuery

$.get()
$.getJSON(url_to_load, function(json){} ) - This method is the shortcut from $.ajax();
$.getScript()
$.post()
$.load()

Send information using Ajax

There are two ways: serialize and serializeArray

$("#my_form").serialize(); -  Sent the data separeted by &
Ej.-  a=1&b=3&c=5

$("#my_form").serializeArray();  -  Sent the data as following
{
   {
       a: "1", 
       b: "3",
       c: "5"  
   },
  {
       a: "11" ,
       b: "31",
       c: "51"  
   },
}

This method sent the information to the defined URL
$.post(url_to_send , data , function(json){ 
});








No hay comentarios:

Publicar un comentario