servlet+jquery小例子

1.新建一Servlet,命名为CheckServlet
CheckServlet.java源代码如下:

01.package ajax.servlet;
02.import java.io.IOException;
03.import java.io.PrintWriter;
04.import javax.servlet.ServletException;
05.import javax.servlet.http.HttpServlet;
06.import javax.servlet.http.HttpServletRequest;
07.import javax.servlet.http.HttpServletResponse;
08./**
09. *
10. * @author Thinkpad
11. *
12. */
13.public class CheckServlet extends HttpServlet {
14. public void doGet(HttpServletRequest request, HttpServletResponse response)
15. throws ServletException, IOException {
16. response.setContentType("text/html");
17. response.setCharacterEncoding("UTF-8");
18. PrintWriter out = response.getWriter();
19.
20. String name = request.getParameter("username");
21. out.print("我是服务器,收到客户端的数据:"+name);
22. out.flush();
23. out.close();
24. }
25. public void doPost(HttpServletRequest request, HttpServletResponse response)
26. throws ServletException, IOException {
27. this.doGet(request, response);
28. }
29.}
package ajax.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
*
* @author Thinkpad
*
*/
public class CheckServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();

String name = request.getParameter("username");
out.print("我是服务器,收到客户端的数据:"+name);
out.flush();
out.close();
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}
}

2、编写客户端html文件
新建ajax.html文件

ajax.html文件源码如下:

view plaincopy to clipboardprint?
01.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
02.<html>
03. <head>
04. <title>ajax实现校验</title>
05. <mce:script type="text/javascript" src="jslib/jquery.js" mce_src="jslib/jquery.js"></mce:script>
06. <mce:script type="text/javascript" src="jslib/verify.js" mce_src="jslib/verify.js"></mce:script>
07. </head>
08.
09. <body>
10. <input type="text" id="username">
11. <input type="button" value="校验" οnclick="verify()" >
12. <dir id="result"></dir>
13. </body>
14.</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ajax实现校验</title>
<mce:script type="text/javascript" src="jslib/jquery.js" mce_src="jslib/jquery.js"></mce:script>
<mce:script type="text/javascript" src="jslib/verify.js" mce_src="jslib/verify.js"></mce:script>
</head>

<body>
<input type="text" id="username">
<input type="button" value="校验" οnclick="verify()" >
<dir id="result"></dir>
</body>
</html>

3、下载jquery.js文件
下载地址:http://docs.jquery.com/Downloading_jQuery
下载后,将文件拷贝到文件结构中

4、编写verify.js文件
verify.js源代码如下:

view plaincopy to clipboardprint?
01.function verify() {
02. // 注解
03. // alert("点击了按钮");
04. // jquery查询节点的方法
05. var jqueryObj = $("#username");
06. // 获取文本框中用户输入的数据
07. var username = jqueryObj.val();
08. // alert(username);
09. // 将数据发送给服务器的servlet
10. $.get("servlet/CheckServlet?username=" + username, null, callback);
11.}
12.// 回调函数
13.function callback(data) {
14. // alert("收到服务器返回的数据");
15. // alert(data);
16. var resultObj = $("#result");
17. resultObj.html(data);
18.}
function verify() {
// 注解
// alert("点击了按钮");
// jquery查询节点的方法
var jqueryObj = $("#username");
// 获取文本框中用户输入的数据
var username = jqueryObj.val();
// alert(username);
// 将数据发送给服务器的servlet
$.get("servlet/CheckServlet?username=" + username, null, callback);
}
// 回调函数
function callback(data) {
// alert("收到服务器返回的数据");
// alert(data);
var resultObj = $("#result");
resultObj.html(data);
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值