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.
};
}));
}
});
}
});
0 comments:
Post a Comment