您的位置：首页 > Web前端 > JQuery

30分钟学会使用jQuery的Ajax功能<一>

2011-10-05 14:35 471 查看

下面的例子是用jQuer的Ajax功能的get方法，进行异步请求。

效果是：点击按钮，检查输入的username是否可用。

<一>下载个jquery.js，载项目名WebRoot下建个文件夹jQuery，把jquery.js放在这个文件夹下。

<二>建个jsp，里面代码如下

<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="${pageContext.request.contextPath }/jQuery/jquery.js"></script>

<script type="text/javascript">
// jQuery的$(function(){});  相当于js中的window.onload=function(){}
$(function(){
var btn = $("#btn");
btn.click(function(){// 对按钮绑定
var username = $("#name").attr("value");
var password = $("#pwd").attr("value");

var url = "${pageContext.request.contextPath }/servlet/JQueryAjaxGetServlet";
// 使用jQuery的Ajax的方法，4个入参
// 第一个入参：请求的url
// 第二个入参：传递的参数以及值，
// 第三个入参：回调函数
// 第四个入参：返回来值的方法，此处写"text"意思是字符串
$.get(url,{name:username,password:password},callback,"text");
});
});

// 经过Servlet处理后返回的信息
function callback(data){
//这个data要么是Servlet里out.print()里的内容
alert(data);
}

</script>
<title>学习jQuery的ajax的Get方法</title>
</head>
<body>
<center>
<form action="" method="get">
username：<input type="text" size="25" value="" id="name"/><input type="button" value="检查是否被占用" id="btn"/>
<br />
<br /><br />
password：<input type="password" size="25" value="" id="pwd"/>
<br /><br />
</form>
</center>
</body>
</html>

<三>在WEB-INF下得web.xml配置

<servlet>
<servlet-name>jqueryAjaxGetServlet</servlet-name>
<servlet-class>com.web.ajax.JQueryAjaxGetServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>jqueryAjaxGetServlet</servlet-name>
<url-pattern>/servlet/JQueryAjaxGetServlet</url-pattern>
</servlet-mapping>

<4>：写Servlet，Servlet代码如下

package com.web.ajax;

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;

public class JQueryAjaxGetServlet extends HttpServlet{

@Override
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
PrintWriter out = response.getWriter();

String username = request.getParameter("name");
String password =request.getParameter("password");

if("zhangsan".equals(username)){
//此处是out.print不是out.println
out.print("不可用");//out.print()里的内容将会输出到jsp页面中callback函数里
}else{
out.print("可以使用");
}
out.flush();
out.close();
}
}

运行下，可以看看效果。

jQuery的Ajax中post方法和get方法极为相似，只需把jsp中的

$.get()换成$.post()就OK了

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

30分钟学会使用jQuery的Ajax功能&lt;一&gt;

30分钟学会使用jQuery的Ajax功能<一>