Question

我对jQuery和AJAX非常陌生，但是经过7个小时的阅读教程和玩代码之后，我对它们的确切运作方式有了一个很好的理解。这就是我想要完成的......

我有一个允许用户注册该网站的Web应用程序。我希望他们输入的userName（在注册页面中）异步检查数据库中是否存在。看起来很直接，但我没有运气。

这是我写的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);}
            });
        });

    });

我现在正在使用静态数据进行调试，因为我从表单字段中获取了另一个问题。我也不太了解成功：功能部分，什么是“数据”作为函数的参数？那会有回应吗？

现在我有一个servlet映射到“checkName”并且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（），它总是给空字符串或空。

此时任何指针或提示或其他任何内容都会被非常赞赏，我会对此失去理智。此外，如果我完全不参与其中任何一项，请随意指向我一个好的教程。

提前致谢。

编辑：所以userName元素的ID是我的问题。我改变了ID，现在整个工作都有效。但是有一个跟进问题。有没有办法停止表单提交，如果响应回来并说userName被采取？

Answer 1

<强> 1。 jQuery ajax（）

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

ajax()函数的success参数就是一个回调函数，它将在请求成功完成时调用 - 默认情况下，ajax请求是异步的，所以你需要挂钩的东西才是在行动完成时通知。想想它有点像在Swing中注册一个监听器，如果你曾经使用过它。 success函数将使用某些参数调用（请记住，JavaScript支持var-args），第一个函数是作为响应接收的数据。如果jQuery可以正确识别数据类型（或者如果您在dataType的调用中设置了ajax()参数），则data将是可供使用的已解析响应。

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

另外，正如其他人所说，您应该将click事件处理程序附加到更具体的元素和a元素，通常最好阻止默认（event.preventDefault()）以便浏览器不遵循链接。

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

<强> 2。的Servlet

为什么你认为有问题？你的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

您的jquery似乎是正确的，尽管您可能不希望将相同的点击处理程序附加到页面上的所有锚点。 :)你使用jquery进行ajax调用的方式很好。在许多情况下，您希望将json作为来自服务器的响应，在这种情况下，您将使用选项：dataType: "json"，并且成功处理程序的参数data将是javascript对象（以防万一）您已在servlet中正确设置响应类型，例如：response.setContentType("application/json");
尝试使用firebug来检查您是否实际上正在调用服务器并查看从中获得的响应。（因为你说用浏览器试用它时有效）
$('#userName").val()应该有效。但我不确定您是否正确初始化了用于将值填充到该字段的${user.userName}值。您是否尝试自己填充该字段？

Answer 3

首先是一个可能的问题，你正在为所有锚标签.click()添加一个jQuery <a ....></a>处理程序，在这种情况下听一个更好的方法来监听锚标签在exist范围内：

$("#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 / p>

$("#userName").val()

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

3 个答案: