I'm trying to build a mini plug-in.Therefore, I want to minimize the code and make it stable as much as it could be. The problem is clear to observe on the code, see below ( detailed explanation is below the snippet segment):
$(document).ajaxSend(function (event, xhr, settings) {
alert("Settings Data is : " + settings.data +
" And " + "Settings url is : " + settings.url );
});
$("#topLeftButton").click(function () {
var arr = {
"loadingBar": '#topLeftLoad'
}
$.ajax({
type: "GET",
url: "testB.xml",
data: JSON.stringify(arr),
dataType: "xml",
success: function (xml) {
},
});
});
$("#topRightButton").click(function () {
var arr = {
"loadingBar": '#topRightLoad'
}
$.ajax({
type: 'POST',
url: 'testB.xml',
data: JSON.stringify(arr),
dataType: "xml",
success: function (xml) {
},
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="topLeftButton" value="Top Left">
<div id="topLeftLoad" style="display:none; width:100%; height:60px">
</div>
<input type="button" id="topRightButton" value="Top Right">
<div id="topRightLoad" style="display:none; width:100%; height:60px">
</div>
When I check the documents at Get Method and Post Method, I could not observe any difference between settings,data and url of the post & get. However,in the Post method of above code snippet it works great. Url and data is on the exact place where it should be. Whereas, in the Get method data is appended to url and settings.data is shown as undefined.
Thank you for your cares,