Как сделать AJAX-вызов сразу при загрузке документа - PullRequest
9 голосов
/ 10 мая 2010

Я хочу выполнить вызов 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>

РЕДАКТИРОВАТЬ: мой код теперь больше похож на код Карима:

$(document).ready(function(){
     $.ajax({
        type: "GET",
        url: "../AutoComplete",
        success: function(data) {
             $("#example").autocomplete(data);
        }
     });
 });

Тем не менее, автозаполнение по-прежнему не работает (по общему признанию, другой вопрос, поэтому я также опубликую еще один вопрос, поэтому он имеет соответствующий заголовок).

Моя переменная «данные», которая отправляется обратно, выглядит как ... «Рукопись | Текст | Информационный объект | Баскетбол | Мяч | Спортивное снаряжение | Тарантул» .split ("|");

Если я сделаю

var dataArray = "Manuscript|Text|Information Object|Basketball|Ball|Sporting Equipment|Tarantula".split("|");

, а затем

$("#example").autocomplete(dataArray);

Все работает нормально, но когда я получаю значение dataArray с сервера, это не так.

Ответы [ 4 ]

10 голосов
/ 10 мая 2010

Вам необходимо загрузить jQuery перед вызовом API jQuery.

Перед вашим фрагментом кода загрузите jQuery ...

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
4 голосов
/ 10 мая 2010

Вы столкнулись с этой проблемой, потому что вызов $ .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);
            }
        });
});

Это обеспечит инициализацию автозаполнения только после получения ответа от сервера.

1 голос
/ 10 мая 2010

Просто используйте

$(function() {
    // Your code here
});

Также убедитесь, что ответ действительно является JSON. Если сервлет выдаст ошибку, она не будет правильно обработана в вашем случае. Используйте firebug, чтобы увидеть, вызван ли сервлет и каков был ответ. Или выполните минимальную регистрацию на стороне сервера.

0 голосов
/ 30 апреля 2013

Вы можете использовать инструменты разработчика Google Chrome для просмотра того, что возвращает ваш сервер. Чтобы получить доступ к нажатию клавиш Ctrl + Shift + I и в представлении средства разработчика, откройте вкладку «Сеть», чтобы увидеть возможные ошибки или неправильные данные, поступающие или нет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...