AJAX JQuery+Servlet

在JQuery框架的基础上实现AJAX还是比较方便的，下面是一些简单介绍：

下面通过Ajax实现注册信息的验证，先来看一下以"POST"的请求方式：

JQuery代码：

<script type="text/javascript" src="<%=path%>/js/jquery-1.8.3.js"></script>
<script type="text/javascript">
function validateUsername() {
var username = $("#username").val();
var methodName = "queryUserByUsername";
if(username == null || username == ""){
$("#unameDiv").html("用户名不能为空");
$("#username")[0].focus();
}else{
$.ajax({
url:"http://localhost:8080/MessageProject/servlet/UserServlet",
type:"post",/*与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。然而，在以下情况中，请使用 POST 请求：
①无法使用缓存文件（更新服务器上的文件或数据库）②向服务器发送大量数据（POST 没有数据量限制）
③发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠*/
dataType: "text",
data: {username:username,method:methodName },/* 传递多个值时，可以用JSON来包装，例如{username:username,age:age}*/
success:function(result){
if($.trim(result) == "true"){
$("#unameDiv").html("<span style='color:red'>用户名已被注册</span>");
$("#username")[0].focus();
}else{
$("#unameDiv").html("<span style='color:green'>用户名可以使用</span>");
}
},
error:function(){
alert("AJAX执行失败");
}
});
}
}

第1行代码是加载一个jQuery库，这里随意加载一个现有的jQuery库即可。

第11行代码，url传递数据, 这里的参数为发送请求的地址，可以能添加参数(post、get类型）。

第13行代码是指定预期服务端返回的数据类型，这里我们将其指定为“text”文本形式（也可指定为xml、json等格式）。
第16行代码是请求成功后回调的函数，“function(result)”这里的result是一个变量，是服务端返回的数据，相当于var result= xmlHttp.responseText();

Servlet 代码：

		response.setContentType("application/text; charset=utf-8");
PrintWriter out = response.getWriter();
String username = request.getParameter("username");
System.out.println(username);
UserDao userDao = new UserDao();
User user = new User();
user = userDao.queryUserByUsername(username);
if(user.getPassword() != null){
out.write("true");
}
else{
out.write("false");
}
这里需要注意的是第1行代码，response.setContentType("application/text;
charset=utf-8"); 这里声明response返回一个text文件。



调用response.getWriter().write()方法返回数据。

最后

以上就是深情花瓣为你收集整理的AJAX JQuery+Servlet的全部内容，希望文章能够帮你解决AJAX JQuery+Servlet所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。