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

Question

我对jQuery和AJAX非常陌生，但是在阅读教程和玩代码7个小时后，我对它们的工作原理有了一个很好的理解。这是我正在努力完成......

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

这是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，使用阿贾克斯和诸如此类的元素？有没有更简单的方法来做到这一点或另一种更清洁的方法？ 2.我的servlet有问题吗？我觉得我的回复不正确，或者我的编码不正确。 3.我该如何去获取userName元素的值？我已经使用$（“＃userName”）.val（），它总是给和空字符串或null。

任何指针或提示或任何在这一点上会是大大赞赏，我有点失去了我的想法在这一个。此外，如果我完全没有任何这种感觉，只是指向一个很好的教程。

在此先感谢。

编辑：所以userName元素的ID是我的问题。我改变了ID，现在整个事情都起作用了。一个跟进问题，但。有没有办法停止表单提交如果响应回来，并说用户名被采取？虽然你可能没有要附加相同的点击处理程序所有锚页面上

Answer 1

1. jQuery的阿贾克斯（）

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

的success参数为ajax()功能正是在于，当请求成功完成，将调用回调函数 - 默认情况下，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()要好得多，直到你点击ok并且更加恼人。

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

1. 你jQuery的似乎是正确的。 :)你使用jQuery进行ajax调用的方式非常好。在很多情况下，您希望将json作为服务器的响应，在这种情况下，您将使用选项：dataType: "json"，并且参数data指向成功处理程序将是javascript对象（如果您已正确设置了响应类型servlet类似于：response.setContentType("application/json");

2. 试着用萤火虫来检查你是否真的打电话给服务器，并看看你得到的回应是什么。（因为你说它的工作原理，当你用浏览器尝试它）

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

Answer 3

首先可能出现的问题，要添加一个jQuery .click()处理程序ALL锚标记<a ....></a>，更好的办法是在这种情况下，听锚exist范围内标签：

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

与jQuery的

其次，你是不是告诉浏览器不要做什么是应该做的事情。我的意思是，如果有人点击了一个锚标签，浏览器就会理解它应该遵循它 - 一个空白的href将重新加载页面。
这个动作可以很容易地停止：

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

至于在成功这就是传递给函数当Ajax调用返回data。这可以是很多东西，text,html或json。所以在你的servlet中它看起来像是文本，它应该是Username already taken...或Username is available...

这对于获取输入字段的值是正确的，但是它看起来像是，如果你复制并粘贴你的HTML，你缺少从输入字段关闭>为userName

$("#userName").val()