jQuery Ajax HTTP Methods

jQuery $.get() Method

The $.get() method requests data from the server with an HTTP GET request.

Syntax:

$.get(URL,callback);

The required URL parameter specifies the URL you wish to request.

The optional callback parameter is the name of a function to be executed if the request succeeds.

The following example uses the $.get() method to retrieve data from a file on the server:

Example

$("button").click(function(){

  $.get("demo_test.asp",function(data,status){

    alert("Data: " + data + "\nStatus: " + status);

  });

});

________________________________________

jQuery $.post() Method

The $.post() method requests data from the server using an HTTP POST request.

Syntax:

$.post(URL,data,callback);

The required URL parameter specifies the URL you wish to request.

The optional data parameter specifies some data to send along with the request.

The optional callback parameter is the name of a function to be executed if the request succeeds.

The following example uses the $.post() method to send some data along with the request:

Example

$("button").click(function(){

  $.post("demo_test_post.asp",

  {

    name:"Donald Duck",

    city:"Duckburg"

  },

  function(data,status){

    alert("Data: " + data + "\nStatus: " + status);

  });

});

________________________________________

Change the text of a <div> element using an AJAX request: Default method type is GET

$("button").click(function(){

  $.ajax({url:"demo_test.txt",success:function(result){

    $("#div1").html(result);

  }});

});

________________________________________

Getting JSON data:

There would be a situation when server would return JSON string against your request. JQuery utility function getJSON() parses the returned JSON string and makes the resulting string available to the callback function as first parameter to take further action.

Syntax:

Here is the simple syntax for getJSON() method:

[selector].getJSON( URL, [data], [callback] );

Here is the description of all the parameters:

•        URL: The URL of the server-side resource contacted via the GET method.

•        data: An object whose properties serve as the name/value pairs used to construct a query string to be appended to the URL, or a preformatted and encoded query string.

•        callback: A function invoked when the request completes. The data value resulting from digesting the response body as a JSON string is passed as the first parameter to this callback, and the status as the second.

Example:

$(document).ready(function() {

      $("#driver").click(function(event){

          $.getJSON('/jquery/result.json', function(jd) {

             $('#stage').html('<p> Name: ' + jd.name + '</p>');

             $('#stage').append('<p>Age : ' + jd.age+ '</p>');

             $('#stage').append('<p> Sex: ' + jd.sex+ '</p>');

          });

      });

   });

________________________________________

$.ajax({

  dataType: "json",

url: url,

  data: data,

  success: success

});

Data that is sent to the server is appended to the URL as a query string. If the value of the data parameter is a plain object, it is converted to a string and url-encoded before it is appended to the URL.

Most implementations will specify a success handler:

$.getJSON( "ajax/test.json", function( data ) {

  var items = [];

  $.each( data, function( key, val ) {

    items.push( "<li id='" + key + "'>" + val + "</li>" );

  });

  $( "<ul/>", {

    "class": "my-new-list",

    html: items.join( "" )

  }).appendTo( "body" );

});

XMLHttpRequest cannot load http://apis.michaelkwayisi.com/gse/live. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:7070' is therefore not allowed access.

the easiest answer: jQuery. Do something like this:

$(document).ready(function(){

   var $form = $('form');

   $form.submit(function(){

      $.post($(this).attr('action'), $(this).serialize(), function(response){

            // do something here on success

      },'json');

      return false;

   });

});

If you want to add content dynamically and still need it to work, and also with more than one form, you can do this:

   $('form').live('submit', function(){

      $.post($(this).attr('action'), $(this).serialize(), function(response){

            // do something here on success

      },'json');

      return false;

   });

function ConvertFormToJSON(form){

    var array = jQuery(form).serializeArray();

    var json = {};

   

    jQuery.each(array, function() {

        json[this.name] = this.value || '';

    });

   

    return json;

}

$( ".find_group_ac" ).autocomplete({

                   minLength: 1,

                   source: function(request, response) {

                             $.ajax({

                                      url: "welcome/search/",

                                      data: { term: $(".find_group_ac").val()},

                                      dataType: "json",

                                      type: "POST",

                                      success: function(data) {

                                                response($.map(data, function(obj) {

                                                          return {

                                                                   label: obj.name,

                                                                   value: obj.name,

                                                                   id: obj.name // don't really need this unless you're using it elsewhere.

                                                          };

                                                }));

                                      }

                             });

                   }

          });