Develop Reference

Ajax Request to laravel for uploading a form sometimes work well but some times keep loading

I have done following code. Similar code at another place is working fine. But this place sometimes it works fine but some time it keeps loading. I checked my ajax request in network but nothing found. It keeps loading. There is no any JS / PHP Error in console.
I even tried to add cache:fale and async:false/true. But nothing works.
Note: when i trie to upload a image it keeps loading and if i press upload button again it works and image upload sometimes, some times it wont work.
Please HELP. Thanks in Advance :)
$.ajax({
url: 'upload_file',
data: data,
datatype: "json",
type: 'post',
contentType: false,
processData: false,
async: true,
error: function(error) {
console.log(error);
},
success: function(data) {
console.log(data);
}
});

Ajax data sending format

Is my Ajax format something wrong?
I am trying to send a simple digit 1/0 data to a tomcat server, using ajax
but getting no response. The whole view is at a standstill.
$.ajax({
type: "GET",
cache: false,
async: false,
url: "http://192.168.200.163:8080/ControllerWebServer/mainCTRL.jsp",
data: “fan=” + fan,
success: function(fan){
alert(fan);
},
error: function(){
alert("Ajax Error.");
}
});
If I make this ajax block as a comment, other functions (which is not displayed here) work just well. I tried GET AND POST, and just the same: don't work.
please help... :(

Try changing this
data: “fan=” + fan,
to
data: {fan: fan},
This is how data should be formatted.

sorry i have low reputation so i couldnt make comment.
when you using data: {fan: fan}, you need to specify the dataType:'json' in your ajax

async ajax inside another ajax

I have an ajax call inside ajax. Problem is I have to wait second ajax finish because until that time browser freezes. Why is this happening if I set it to async true? I dont want to wait for any response from this second inner ajax and I dont need any response from it. It is just an email notification to some users based and needs parameters from first ajax.
$.ajax({
url: 'route_process.php',
cache: false,
async: true,
type: 'post',
data: {type: document.getElementById('type').value},
dataType: 'html',
success: function(data) {
data = data.split("brk");
$('.spinner').css({'display':'none'});
$('#save_button').prop("disabled",false);
$.ajax({
url: 'sent_hike_drive_notification.php',
cache: false,
type: 'post',
async: true,
data: {type: data[1], insert_id: data[2], date_search_array: data[3], from_city_lat: data[4], from_city_lng: data[5], to_city_lat: data[6], to_city_lng: data[7], counter: data[8], insert_id2: data[9], date_search_array2:data[10]},
dataType: 'html',
success: function(result) {
}
});
Drive.resetRoute();
alert(data[0]);
},
Thanks all, now I found out the problem is not maybe in those ajaxs. User wants to move to another webpage through load when click on menu icon.
$('.main_body').find('.container').load(url);
This dont works until those ajax finish. So not complete browser freezes only I cannot navigate to next page.

Common, Ajax is indeed async but You should remember that a success handler is called only when the ajax call is complete whether sync or async So this inner ajax call can be called only when the first is complete. There is no way you can access inner ajax call without first being completed. All you can do is make an ajax call via callback on the success handler of the outer ajax.

This is not an exact answer to your problem but only a help/checklist :
The most common causes of the UI freezing on making an ajax call when the call is async:true are as follows:
A lot of Dom manipulation taking place on response of the call.
A lot of data is being sent by the server and processing it requires time.
If a session is being maintained and it is not closed before multiple ajax callbacks (this happens to avoid race conditions).
Something on the server side goes wrong/extremely slow on the ajax call and the client side is stuck.
Network speed is too slow.
EDIT: Based on the response from asker , to help others if they face similar issue.
Is there a redirection involved which is locking up with ajax response.
It is highly unlikely that the UI freezes despite all the check points mentioned above taken care of.
In any case the solution might be one of the following approaches :
Try making a call to the second ajax after a timeout of like 5000 ms.
Try promises : how does jquery's promise method really work?
(worst way)Try using an iframe to make the requests.

try to use promise.
$.ajax({
url: 'route_process.php',
cache: false,
async: true,
type: 'post',
data: {type: document.getElementById('type').value},
dataType: 'html'
}).promise().then(function(data) {
data = data.split("brk");
$('.spinner').css({'display':'none'});
$('#save_button').prop("disabled",false);
$.ajax({
url: 'sent_hike_drive_notification.php',
cache: false,
type: 'post',
async: true,
data: {type: data[1], insert_id: data[2], date_search_array: data[3], from_city_lat: data[4], from_city_lng: data[5], to_city_lat: data[6], to_city_lng: data[7], counter: data[8], insert_id2: data[9], date_search_array2:data[10]},
dataType: 'html',
success: function(result) {
}
});
Drive.resetRoute();
alert(data[0]);
})

jQuery AJAX not receiving JSON from http request

I ame using html with some jQuery to try out some JSON requests. I did a bit of research and tried making something small just to test it out. but when i run the script in my browser(Google Chrome) i dont get anything besides my html/css stuff. here is the code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
console.log("Test");
console.log($.get("https://prod.api.pvp.net/api/lol/euw/v1.1/summoner/by-name/kerrie?api_key=[key]"));
</script>
*[key] is my key from the api owners(not to be shared on the internet).
when i check the network tab it says "304, not modified" i dont if this has anything to do wit it.
I'm just starting with websites and JavaScript/jQuery any help would be helpfull.

For better understanding you can call ajax method as below
$.ajax({
url: 'https://prod.api.pvp.net/api/lol/euw/v1.1/summoner/by-name/kerrie?api_key=[key]',
type: 'GET',
dataType: 'JSON',
async: false,
error: function(){},
success: function(resp){
// resp variable will be your JSON responce
}
}
});

How do I do an ajax call to a database using Javascript, a URL and a key

I have been given a url of type xxxx.xxxxx.com as well as a key of type FGHyehgvc787vbhj
in order to gain read-only access to an sql database and retrieve data from it using javascript.
I have no prior experience with databases and maybe my question will sound completely stupid but I was wondering how can I combine the above information in order to get access to the database (e.g. do an ajax call and retrieve data from it..)
I'm familiar with doing ajax calls to a webpage and getting data from it using jQuery, as in :
$.ajax(/*url of website*/, function (data)
{
var dataRetrieved = $(data);
// do something with the data retrieved...
});
so I was wondering whether there is something equivalent to the above when it comes to making an ajax call to a database, using however a key.
Thank you for any help, and please delete this post if you find it completely pointless and excuse me in advance for that by the way.

It is usually very bad design to allow client side code to interact with your database in any way. This can be a huge security issue. Generally you will want your server side code to do this (e.g PHP, node, etc.). You would send a request to your server with client side code, and the server side code would do the actual work of updating the database.

you can create a wcf service and call that service through ajax, that wont be huge security issue.
try this
$.ajax({
cache: false,
type: "GET",
async: false,
data: {},
url: http:xxxxxxxxxxxx.svc/webBinding/Result?metaTag=" + meta,
contentType: "application/json; charset=utf-8",
dataType: "json",
crossDomain: true,
success:function(result){},
error: function(){alert(err);}
});

Use this
$.ajax({
url: 'path/to/server-side/script.php', /*url*/
data: '', /* post data e.g name=christian&hobbie=loving */
type: '', /* POST|GET */
complete: function(d) {
var data= d.responseTXT;
/* Here you can use the data as you like */
$('#elementid').html(data);
}
});
Hope this helps...