javascript - Jquery - Calling a ajax function within ajax function -
can use ajax function withing ajax function.
in case there 2 ajax calls. first ajax return data , if successful second ajax should called .
below code snippet,
$.ajax({ type: "post", contenttype: "application/json; charset=utf-8", async: false, url: "my service url here" datatype = "json", //success - 1 success: function(data) { //i ll collect data service //now second ajax must run. //because in first call ll receive data //that data going use in second call $.ajax({ alert('inside ajax-2'); type: "get", contenttype: "application/json; charset=utf-8", async: false, url: "my second service url here", datatype: "json", //success - 2 success: function(data) { //some functionality } //success-2 } //success-1 }); //ajax - 2 }); //ajax - 1
some more info : had checked chrome dev console , error getting is
//success - 1 success: function(data) { //error message : uncaught syntaxerror: unexpected identifier
that error message got.
and yes cleared syntactical mistakes , getting same error message.
$.ajax({ type: "post", contenttype: "application/json; charset=utf-8", async: false, url: "my service url here", datatype : "json" //success - 1 success: function(data) { //i ll collect data service //now second ajax must run. //because in first call ll receive data //that data going use in second call $.ajax({ alert('inside ajax-2'); type: "get", contenttype: "application/json; charset=utf-8", async: false, url: "my second service url here", datatype: "json", //success - 2 success: function(data) { //some functionality } //success-2 } //success-1 }); //ajax - 2 }); //ajax - 1
i checked service url in restclient extension of firefox browser , again yes , there jsondata coming service.
any suggestion highly appreciable
merry christmas :)
there errors in scripts.
in first ajax call, commas separate members ?
url:"my service url here", datatype= "json",
and should be:
datatype : "json",
going answer, yes can but, if had third ajax call?
code mess , hard read.
the best use promises.
this best way work asynchronous in javascript (that's reason why i've commented async:false
).
you can read how promises work here.
$.ajax
returns promise:
var promise = $.ajax({ type: "post", contenttype: "application/json; charset=utf-8", url:"my service url here", datatype: "json", });
which chained one:
promise.then(function(result){ });
i tend prefer approach split ajax call in different function create new promise , return it; in case want manipulate result:
you can split 2 ajax calls:
function firstajaxcall() { var deferred = $.deferred(); $.ajax({ type: "post", contenttype: "application/json; charset=utf-8", // async : false, url:"my service url here", datatype: "json", success: function (jsondata) { deferred.resolve(jsondata); }, error: function (req, status, error) { var errormessage = (error.message) ? error.message : error; deferred.reject(errormessage); } }); return deferred.promise(); }
and
function secondajaxcall() { var deferred = $.deferred(); $.ajax({ type: "get", contenttype: "application/json; charset=utf-8", // async:false, url: "my second service url here", datatype: "json", success: function (jsondata) { deferred.resolve(jsondata); }, error: function (req, status, error) { var errormessage = (error.message) ? error.message : error; deferred.reject(errormessage); } }); return deferred.promise(); }
now resolve first 1 , chain second one:
firstajaxcall() .then(function(result){ return secondajaxcall(result); }) .then(function(result){ // final result }) .fail(function(reason){ // reason should contain error. });
as can see firstajaxcall()
resolve in .then()
branch , passes it's result in anonymous function. same thing happens second ajax call secondajaxcall()
. if fails in first or second call errors trapped here:
.fail(function(reason){ // reason should contain error. });
the beauty of promises can chain them or execute them in parallel.
Comments
Post a Comment