Im trying to send a data into 2 different url with ajax in Jquery
i can think something like this :
$.ajax({
type: 'POST'
url: 'some_url1'
data: 'some data'
success: function(data){
$.ajax ({
type: 'POST'
url: 'some_url2'
data: 'some data'
success: function(data){}
})
}
})
is there any other way to do it ?
thx
Write a function that has URL to be sent to in a parameter and then just call that function 2 times, every time with another URL, instead of writting double code...
When you have code like this:
$.ajax({
type: 'POST',
url: 'some_url1',
data: 'some data',
success: function(data){
$.ajax ({
type: 'POST',
url: 'some_url2',
data: 'some data',
success: function(data){}
});
}
});
The very first thing that should jump out at you is the amount of duplication. You essentially have two very nearly identical code blocks. Unless there's a very good reason why it should be duplicated (for example, if the two code blocks are responsible to two different business owners/roles and are very likely to change independently of one another), then abstract the duplicated code into a single function.
In this case, there are only two differences between the two duplicated code blocks:
So the function that you extract from the duplicated code should accept those two things as parameters:
var makeAjaxCall = function (url, success_callback) {
$.ajax ({
type: 'POST',
url: url,
data: 'some data',
success: success_callback
});
};
Then your example would invoke the function like this:
makeAjaxCall(
'some_url1',
makeAjaxCall(
'some_url2',
function() {}
)
);
Note that in your example you're passing a data parameter to the callback functions, though you're not using it. Is this a minimal contrived example for the purpose of the question and, in reality, you are using that parameter? If so then the extracted function will need to handle that as well. But before you do so, you'll need to be a bit more explicit because your example is confusing in this regard and may behave in unexpected (or at least unintuitive) ways. When your inner AJAX success callback receives its data parameter, do you want it to be the result of the inner AJAX call? Or do you want it to be the data parameter which was passed to the function which contains the inner AJAX call? The intent is unclear in the code.
It look's something like this..
$(function() {
// Make the first ajax call with Parameters
ajaxCall('firsturl' , firstdata , callbackFunction1 );
});
function callbackFunction1(result) {
// Make the econd ajax call from the callback function1
ajaxCall('secondurl' , seconddata , callbackFunction2 );
};
function callbackFunction2(result) {
// Success call back of second ajax request
};
function ajaxCall(url, usrData, callbackFunction) {
$.ajax({
type: 'POST'
url: url,
data: usrData,
success: callbackFunction
});
};
function ValidateForm() {
//Data Post to FirstForm
var str = $("#FirstForm").serialize();
$.ajax({
type: "POST",
dataType: "jsonp",
contentType: "application/json; charset=utf-8",
url: "https://xyz.com",
data: str,
success: function (msg) {console.log("Success data post ---->" + JSON.stringify(msg)) },
error: function (msg) { console.log("Error data post ---->" + JSON.stringify(msg)) }
});
//End Data Post to First Form
//Call Click event of Second form .Use Form post and action method .
//Copy First Form text box value into second Form text box
$("#btnSecondForm").trigger('click');
//End Click event
return false;
}
//Form in Body
<form id="FirstForm" onsubmit="return ValidateForm(this)">
//text box HTML
</form>
<form id="SecondForm" style='display:none' action="https://abc.com" method="post">
<input type="submit" value="Submit" id='btnSecondForm' />
</form>