How to make an AJAX call immediately on document loading
I want to execute an ajax call as soon as a document is loaded. What I am doing is loading a string that contains data that I will use for an autocomplete feature. This is what I have done, but it is not calling the servlet.
I have removed the calls to the various JS scripts to make it clearer. I have done several similar AJAX calls in my code but usually triggered by a click event, I am not sure what the syntax for doing it as soon as the document loads, but I thought this would be it (but it's not):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="../js/jquery.js" type="text/javascript">
</script>
<link rel="stylesheet" href="../css/styles.css" type="text/css">
<link rel="stylesheet" href="../css/jquery.autocomplete.css" type="text/css">
<script type="text/javascript" src="../js/jquery.bgiframe.min.js">
</script>
<script type="text/javascript" src="../js/jquery.dimensions.js">
</script>
<script type="text/javascript" src="../js/jquery.autocomplete.js">
</script>
<script t开发者_StackOverflow社区ype="text/javascript">
$(document).ready(function(){
$.ajax({
type: "GET",
url: "AutoComplete",
dataType: 'json',
data: queryString,
success: function(data) {
var dataArray = data;
alert(dataArray);
}
});
$("#example").autocomplete(dataArray);
});
</script>
<title></title>
</head>
<body>
API Reference:
<form><input id="example"> (try "C" or "E")</form>
</body>
</html>
EDIT: my code now looks more like Karim's:
$(document).ready(function(){
$.ajax({
type: "GET",
url: "../AutoComplete",
success: function(data) {
$("#example").autocomplete(data);
}
});
});
Nonetheless the autocomplete still doesn't work (admittedly another question altogether, so I will also post another question so it has an appropriate title).
My variable "data" that is being sent back looks like ... "Manuscript|Text|Information Object|Basketball|Ball|Sporting Equipment|Tarantula".split("|");
If I do
var dataArray = "Manuscript|Text|Information Object|Basketball|Ball|Sporting Equipment|Tarantula".split("|");
and then
$("#example").autocomplete(dataArray);
It all works fine, but when I get the value of dataArray from the server it doesn't.
You need to have jQuery loaded before making calls to the jQuery API.
Before your code snippet, load jQuery...
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
You're running into that problem because the $.ajax call does not return before the autocomplete is initilised, due the the asynchronous nature of XHR. The request is sent, execution flows into the next expression before dataArray has been filled up within the success callback. Try this:
$(document).ready(function(){
$.ajax({
type: "GET",
url: "AutoComplete",
dataType: 'json',
data: queryString,
success: function(data) {
var dataArray = data;
alert(dataArray);
$("#example").autocomplete(dataArray);
}
});
});
That will ensure that your autocomplete is initialised only when the response from the server has been received.
Just use
$(function() {
// Your code here
});
Also make sure that the response is really a JSON. If servlet gives the error, it will not be correctly processed in your case. Use firebug to see if servlet is called and what was the response. Or do minimal logging on the serverside.
You can use Google Chrome Browser developer tools to see what your server is returning. To access pres Ctrl+Shift+I and in the developer tool view, check the network tab to see of any possible error or wrong data coming or not.
加载中,请稍侯......
精彩评论