Как сразу выполнить вызов Ajax на загрузке документа
Я хочу выполнить вызов ajax, как только документ загружается. То, что я делаю, загружает строку, которая содержит данные, которые я буду использовать для функции автоматического заполнения. Это - то, что я сделал, но это не называет сервлет.
Я удалил вызовы к различным сценариям JS для создания этого более ясным. Я сделал несколько подобных вызовов Ajax в своем коде, но обычно инициировал событием щелчка, я не уверен, что синтаксис для того, чтобы сделать его, как только документ загружается, но я думал, что это будет им (но это не):
<!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 type="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>
Править: мой код теперь больше походит на Karim:
$(document).ready(function(){
$.ajax({
type: "GET",
url: "../AutoComplete",
success: function(data) {
$("#example").autocomplete(data);
}
});
});
Тем не менее, автоматическое заполнение все еще не работает (по общему признанию другой вопрос в целом, таким образом, я также отправлю другой вопрос, таким образом, это будет иметь соответствующий заголовок).
Мои переменные "данные", которые передают обратно, похожи... "Manuscript|Text|Information Object|Basketball|Ball|Sporting Equipment|Tarantula" .split (" | ");
Если я делаю
var dataArray = "Manuscript|Text|Information Object|Basketball|Ball|Sporting Equipment|Tarantula".split("|");
и затем
$("#example").autocomplete(dataArray);
Все это хорошо работает, но когда я получаю значение массива данных с сервера, это не делает.
3 ответа
Вам нужно загрузить jQuery перед тем, как обращаться к jQuery API.
Перед фрагментом кода загрузите jQuery...
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
Вы столкнулись с этой проблемой, потому что вызов $.ajax не возвращается до того, как инициализируется автозаполнение, из-за асинхронной природы XHR. Запрос отправлен, выполнение перетекает в следующее выражение до того, как dataArray будет заполнен в success обратном вызове. Попробуйте сделать так:
$(document).ready(function(){
$.ajax({
type: "GET",
url: "AutoComplete",
dataType: 'json',
data: queryString,
success: function(data) {
var dataArray = data;
alert(dataArray);
$("#example").autocomplete(dataArray);
}
});
});
Это обеспечит инициализацию автозаполнения только после получения ответа от сервера.
Просто используйте
$(function() {
// Your code here
});
Также убедитесь, что ответ действительно является JSON. Если сервлет выдает ошибку, он не будет правильно обработан в вашем случае. Используйте firebug, чтобы увидеть, был ли вызван сервлет и каков был ответ. Или сделайте минимальное протоколирование на стороне сервера.