如何让 jQuery、AJAX 和 servlet 一起工作？

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”的 servlet 并且 servlet 可以工作（我通过 URL 调试和传递参数）。这是servlet代码...

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...");
    }
}

}

我知道我对数据库的调用返回了我需要的内容，但我怀疑这个 servlet 中的某些内容是错误的。为了更好地衡量，这里是数据应该来自的元素

<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. 我的 servlet 有问题吗？我觉得响应不正确，或者我的编码不正确。 3. 我应该如何从 userName 元素中获取值？我用过 $("#userName").val() 它总是给出空字符串或 null。

在这一点上的任何指示或提示或任何东西都会非常感激，我有点失去理智了。另外，如果我完全不了解这些，请随时向我指出一个好的教程。

提前致谢。

编辑：所以 userName 元素的 ID 是我的问题。我更改了 ID，现在一切正常。一个后续问题。如果响应返回并说用户名被占用，有没有办法停止表单提交？

Answer 1

1. jQuery ajax()

在 JavaScript 中，您不能真正产生新线程 - 最接近的方法是使用 setTimeout() 或 setInterval()。这意味着需要很长时间的操作（例如通过网络获取数据）将阻止其他所有操作。所以你会经常看到回调函数被使用（这利用了函数是 JavaScript 中的一等成员这一事实）。

ajax() 函数的 success 参数正是这样，一个回调函数，当请求成功完成时将调用 - 默认情况下，ajax 请求是异步的，因此您需要挂钩以在操作时得到通知完成了。如果你曾经使用过它，可以把它想象成在 Swing 中注册一个监听器。 success 函数将使用某些参数调用（请记住，JavaScript 支持 var-args），其中第一个是作为响应接收的数据。如果 jQuery 能够正确识别数据类型（或者如果您在调用 ajax() 时设置了dataType 参数），则data 将是解析后的响应，可供使用。

在这种情况下您可以使用的简写是 jQuery get() - 它在内部使用 ajax()，但为您提供了一个更简单的函数调用以用于发出 GET 请求

另外，正如其他人所指出的，您应该将单击事件处理程序附加到更具体的元素，对于 a 元素，通常最好避免使用默认值 (event.preventDefault())，这样浏览器就不会跟随链接。

您可能希望为 Firefox 使用 Firebug - 它提供了一个 console 对象，您可以在其中记录数据 - console.log("Response: ", data) 会将数据内容打印到控制台，如果它是一个对象（如 JSON 响应），它甚至会以您可以探索的分层方式出现。它比一堆 alert() 阻止执行直到你点击确定要好得多，而且更不烦人。

2。小服务程序

为什么你认为有问题？您的 servlet 看起来不错，除了一些不必要的东西（比如将状态码设置为 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

1. 您的 jquery 似乎是正确的，尽管您可能不想将相同的单击处理程序附加到页面上的所有锚点。 :) 您使用 jquery 进行 ajax 调用的方式很好。在许多情况下，您希望从服务器获取 json 作为响应，在这种情况下，您将使用选项：dataType: "json"，而成功处理程序的参数 data 将是 javascript 对象（如果您已正确设置在 servlet 中添加响应类型，例如：response.setContentType("application/json");

2. 尝试使用 firebug 来检查您是否真的在调用服务器，并查看您从它得到的响应。 （因为你说用浏览器试试就可以了）

3. $('#userName").val() 应该可以工作。但我不确定您是否正确初始化了用于将值填充到该字段的 ${user.userName} 值。您是否尝试自己填充该字段？

Answer 3

首先是一个可能的问题，您正在向 ALL 锚标签 <a ....></a> 添加一个 jQuery .click() 处理程序，在这种情况下，更好的方法是在 @987654323 中收听锚标签@跨度：

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

其次，使用您的 jQuery，您并没有告诉浏览器不要做它应该做的事情。我的意思是，如果有人点击锚标记，浏览器就会理解它应该跟随它——空白的href 将重新加载页面。
这个动作可以很容易地停止：

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

至于data 成功，这是在ajax 调用返回时传递给函数的内容。这可以是很多东西，text、html 或 json。因此，对于您的 servlet，它看起来像是文本，应该是 Username already taken... 或 Username is available...

这对于获取输入字段的值是正确的，但看起来，如果您复制并粘贴了 HTML，您的输入字段中缺少 > 的结束 userName

$("#userName").val()