Как заставить JQuery, AJAX и сервлет работать вместе?

Question

Я чрезвычайно новичок в jQuery и AJAX, однако после 7 часов чтения учебников и игры с кодом, я хорошо понимаю, как именно они работают.Это то, что я пытаюсь сделать ....

У меня есть веб-приложение, которое позволяет пользователю зарегистрироваться на сайте.Я хотел бы, чтобы имя пользователя, которое они вводят (на странице регистрации), проверялось асинхронно на наличие в базе данных.Кажется, довольно просто, но мне не повезло.

Это jQuery, который я написал ....

$(document).ready(function() {
        $("a").click(function(){
            alert("Should be going to servlet now");
            $.ajax({
                type: 'GET',
                url: "checkName",
                data: {userName: "Hexose"},
                success: function(data){ alert(data);}
            });
        });

    });

Я сейчас использую статические данные для отладки, так как у меня возникла другая проблема при получении значения из поля формы,Я также не совсем понимаю успех: функциональная часть, что такое «данные» как параметр функции?Это входит в ответ?

Теперь у меня есть сервлет, сопоставленный с «checkName», и сервлет работает (я отлаживал и передавал параметр по URL).Вот код сервлета ...

public class CheckUserNameServlet extends HttpServlet {

protected void doGet(HttpServletRequest request,
        HttpServletResponse response)
        throws ServletException, IOException {

    String targetUN = request.getParameter("userName");

    if (data.UserDB.userNameExists(targetUN)) {
        String exists = "Username already taken...";
        response.setContentType("text");
        response.setHeader("Cache-Control", "no-cache");
        response.getWriter().write(exists);
        response.setStatus(200);
    } else {
        response.getWriter().write("Username is available...");
    }
}

}

Я знаю, что мой вызов базы данных возвращает то, что мне нужно, но я подозреваю, что в этом сервлете что-то не так.И для хорошей меры здесь есть элемент, откуда должны поступать данные

<tr>
  <td align="right">Username:</td>
  <td><input type="text" name="userName" id="userName" value="${user.userName}"  /</td>
  <td><span id="exist"> <a href="">Check Availability</a></span></td>
</tr>

Так что, по сути, мои вопросы таковы: 1. Правильно ли я использую jQuery, использую .ajax иэтажерка?Есть ли более простой способ сделать это или другой метод, который чище?2. Что-то не так в моем сервлете?Я чувствую, что ответ неправильный или я неправильно его кодировал.3. Как мне получить значение из элемента userName?Я использовал $ ("# userName"). Val (), и он всегда дает и пустую строку или ноль.

Любые указатели, подсказки или что-либо в этом месте будут очень оценены,Я отчасти схожу с ума по этому вопросу.Кроме того, если я не согласен с любым из этих вопросов, не стесняйтесь просто указать мне хороший учебник.

Заранее спасибо.

РЕДАКТИРОВАТЬ: Таким образом, идентификатор элемента userName была моей проблемой.Я изменил ID, и теперь все работает.Один дополнительный вопрос, хотя.Есть ли способ остановить отправку формы, если ответ возвращается и говорит, что имя пользователя занято?

Answer 1

1.jQuery ajax ()

В JavaScript вы не можете создавать новые темы - самое близкое к этому - использование setTimeout() или setInterval().Это означает, что операции, которые занимают много времени (например, загрузка данных по сети), блокируют все остальное.Таким образом, вы часто будете видеть функции обратного вызова (это использует тот факт, что функции являются первоклассными членами в JavaScript).

Параметр success для ajax()Функция - это функция обратного вызова, которая будет вызываться при успешном завершении запроса - по умолчанию запросы ajax являются асинхронными, поэтому вам нужно что-то подключить, чтобы получить информацию о завершении действия.Думайте об этом как о регистрации слушателя в Swing, если вы когда-либо использовали его.Функция success будет вызываться с определенными аргументами (помните, JavaScript поддерживает var-args), первым из которых являются данные, полученные в качестве ответа.Если jQuery может правильно определить тип данных (или если вы установили параметр dataType в вызове на ajax()), data будет проанализированным ответом, сделанным доступным для использования.

Сокращение, которое выв этом случае можно использовать jQuery get() - он использует ajax() внутренне, но дает вам более простой вызов функции для выполнения GET запросов

Также, как отмеченодругие, вам следует прикрепить обработчик события click к более конкретным элементам, а для элементов a обычно рекомендуется запретить использование по умолчанию (event.preventDefault()), чтобы браузер не переходил по ссылке.

Возможно, вы захотите использовать Firebug для Firefox - он предоставляет объект console, в который вы можете записывать данные - console.log("Response: ", data) выведет содержимое данных на консоль и, если это объект (например, ответ JSON), он 'Я даже буду выглядеть в иерархической манере, которую вы можете исследовать.Это намного лучше, чем куча alert(), которые блокируют выполнение до тех пор, пока вы не нажмете ok, и гораздо менее раздражает.

2.Сервлет

Почему вы думаете, что есть проблема?Ваш сервлет выглядит хорошо, за исключением, возможно, некоторых ненужных вещей (например, установка кода состояния на 200).Кроме того, вы можете изменить тип содержимого на text/plain, который является обычным MIME-типом для простого текста.Позже вы, вероятно, могли бы изучить JSON и отправить обратно ответ JSON, чтобы вы могли упаковать больше информации в свой ответ (например, сказать предложенные имена пользователей, когда запрошенное имя пользователя недоступно) в структурированной форме, которая можетлегко используется JavaScript на стороне клиента.

3.Получение значения текстового поля

Это также выглядит хорошо - $("#userName").val().Вы можете использовать Firebug, чтобы также изучить текущую модель DOM и посмотреть, какое значение текстового поля установлено. - это одна проблема с вашим кодом, но я не уверен, что вы допустили ошибку при вставке здесь или это реальная проблема в коде.Вам не хватает закрывающей угловой скобки > до </td>

<td><input type="text" name="userName" id="userName" value="${user.userName}" /</td>

Answer 2

Во-первых, возможная проблема: вы добавляете обработчик jQuery .click() к ALL тегам привязки <a ....></a>, в этом случае гораздо лучше будет прослушивать теги привязки внутри exist продолжительность:

$("#exist a").click(........

Во-вторых, с вашим jQuery вы не говорите браузеру не делать то, что он должен делать. Я имею в виду, что если кто-то нажимает на тег привязки, браузер понимает, что он должен следовать за ним - пустое значение href перезагрузит страницу.
Это действие можно остановить очень легко:

$("a").click(function(e){
    e.preventDefault();
    ...........

Что касается data в случае успеха, то это то, что передается функции, когда возвращается вызов ajax. Это может быть много вещей, text, html или json. Таким образом, в случае вашего сервлета это выглядит как текст, и это должно быть либо Username already taken..., либо Username is available...

Это правильно для получения значения вашего поля ввода, но похоже, что если вы скопировали и вставили свой HTML, вы пропускаете закрывающий > из поля ввода для userName

$("#userName").val()

Answer 3

1. Ваш jquery кажется правильным, хотя вы, вероятно, не хотели прикреплять один и тот же обработчик кликов ко всем якорям на вашей странице. :) То, как вы используете jquery для вызовов ajax, просто отлично. Есть много ситуаций, в которых вы хотите получить json в качестве ответа от сервера, и в этом случае вы будете использовать опцию: dataType: "json", а обработчик успешного выполнения параметра data будет объектом javascript (если вы правильно установили введите тип ответа в сервлете примерно так: response.setContentType("application/json");

2. Попробуйте с помощью firebug проверить, действительно ли вы звоните на сервер, и посмотреть, что вы получите в ответ. (так как вы сказали, что это работает, когда вы пытаетесь с помощью браузера)

3. $('#userName").val() должно работать. Но я не уверен, правильно ли вы инициализировали значение ${user.userName}, которое вы используете для заполнения значения в этом поле. Вы пытались заполнить поле самостоятельно?