servlet+jquery小例子

ldzyz007

浏览: 716852 次
性别:
来自: 西安

最近访客更多访客>>

wxn_yxm

zt903060249

richand730

scotttom020

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jquery

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="校验" onclick="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="校验" onclick="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);
}

分享到：

AS和JS互相调用 | CommonUpload

2011-08-18 17:24
浏览 1598
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论