今天我为大家带来了几个非常实用的ajax小例子，都是在工程中经常用到的实用的例子。适合有基础的同学，废话也不多说了，看代码
哦，对了，所有的例子都是用servlet+jsp实现的 至于三大框架的，我相信，只要这个会了，那都不是事...
1、我们先用基本的ajax实现验证用户名是否存在的例子(此例子只对IE浏览器)，
例子截图
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">
<title>原生的ajax</title>
<script type="text/javascript">
var xmlhttp;
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
try {
//针对IE5、IE5.5、IE6
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
//针对IE5、IE5.5、IE6
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
try {
//针对FireFox、Mozillar、Opera、Safari、IE7、IE8
xmhttp = new XMLHttpRequest();//创建XMLHttpRequest对象
if (xmlhttp.overrideMimeType) {//修正某些浏览器的BUG
xmlhttp.overrideMimeType("text/xml");
}
} catch (e) {
}
}
}
}
function ajaxsub(t) {
//创建一个XmlHttpRequest对象(js内置对象)
createXMLHttpRequest();
if (xmlhttp != null) {//确定XMLHttpRequest是否创建成功
var url = "AjaxServlet";
//1.是http请求的方式 POST和GET
//2.是服务器的地址,可以一个servlet
//3.是采用同步还是异步，true为异步
xmlhttp.open("POST", url, true);
//post请求要自己设置请求头 注意顺序
xmlhttp.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded;");
xmlhttp.onreadystatechange = callfun; //注册回调函数 callfun对应一个js的函数名字,这个函数由我们自己定义
//发送请求
xmlhttp.send("on=check&name=" + t.value + "&id=10");
} else {
alert("不能创建XMLHttpRequest对象实例")
}
}
//回调函数
function callfun() {//获取服务器返回的数据
//回调函数里面会执行多次,次数取决建立连接的时间和建立连接成功之后服务器处理的时间
//获取与服务器建立连接是否成功
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {//服务器已经成功处理请求，并返回数据
var serviceData = xmlhttp.responseText;//获取服务器返回的文本数据
//alert("服务器返回的数据是:" + serviceData);
var vs = "";
if (serviceData == "1") {
vs = "不可以注册";
} else {
vs = "可以注册";
}
document.getElementById("msg_info").innerHTML = vs;
}
}
}
</script>
</head>
<body>
用户名:<input type="text" name="username" οnblur="ajaxsub(this)"><label id="msg_info"></label>
</body>
</html>String name=request.getParameter("name");
response.setContentType("text/html;charset=utf-8");
PrintWriter out=response.getWriter();
//获取数据库的数据
String sql="select * from users where username='"+name+"'";
System.out.println(sql);
try {
ResultSet rs=DBUtil.getConn().createStatement().executeQuery(sql); //判断是否存在 if(rs.next()){
out.print(1);
}else{
out.print(0);
}
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
out.flush();
out.close();从上面的例子我们看得出原生的ajax对浏览器的兼容问题及其不好，于是jquery就为我们提供了非常方便的ajax异步得到数据的方法。
从下面的例子开始我们就用jquery提供的方法写
2、省市级联动
效果
我们可以用火狐的开发者模式看到要异步加载的数据
首先我们先引用jquery
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
jsp
省/直辖市
<select name="pri" id="pri">
<option>--请选择--</option>
<option value="bj">北京</option>
<option value="hn">河南</option>
<option value="hb">湖北</option>
<option value="sx">山西</option>
</select>
市/区
<select id="city" name="city">
</select>
<script type="text/javascript">
$("#pri").change(function(){ //获取你点击的省 var pri=$(this).val(); //得到你异步加载的servlet
var url="AjaxServlet?on=city"; //异步加载数据
$.post(url,{pri:pri},function(data){
$("#city").empty();
var city=data.split(",");
for(var i=0;i<city.length;i++){
$("#city").append("<option value='"+city[i]+"'>"+city[i]+"</option>");
}
});
});
</script> String pri=request.getParameter("pri");
response.setContentType("text/html;charset=utf-8");
PrintWriter out=response.getWriter();
//模拟数据库的数据
Map<String, String> map=new HashMap<String,String>();
map.put("bj", "朝阳区,昌平区,海淀区,丰台区");
map.put("hn", "郑州,开封,洛阳,荥阳");
map.put("hb", "武汉,湖北1,湖北2,湖北3");
map.put("sx", "大同,宝鸡,山西1,山西2");
//写进输出流
out.print(map.get(pri));
out.flush();
out.close();3、模仿百度查询提示
jsp代码
<div class="search">
<input type="text" name="title" id="searchtitle"/>
<input type="button" value="搜索" id="searchsub"/>
<div id="result">
</div>
</div<script type="text/javascript">
$(function(){
$("#searchtitle").keyup(function(){
$("#result").css("display","none");//隐藏结果提示
var title=$(this).val();//获取查询的内容
setTimeout(function(){
var url="AjaxServlet?on=tips";//异步加载servlet
$.post(url,{title:title},function(data){
$("#result").empty();//清除查询内容
//判断结果是否是空
if(data.length!=0){
var arr=data.split(",");//截取字符串
for(var i=0;i<arr.length;i++){
$("#result").append("<div class='tips'>"+arr[i]+"</div>");
}
//结果提示
//$("#result").css("display","block");
$("#result").fadeIn("slow");//淡入slow,fast,淡出fadeOut
//点击tip添加到输入框
$(".tips").click(function(){
var text=$(this).text();
$("#searchtitle").val(text);
$("#result").css("display","none");
});
}
});
},500);//延迟加载时间
});
});
</script>String title=request.getParameter("title");
response.setContentType("text/html;charset=utf-8");
PrintWriter out=response.getWriter();
//默认最多出现六条数据 看你的需求
String sql="select name from items where name like'%"+title+"%' limit 6";
try {
ResultSet rs=DBUtil.getConn().createStatement().executeQuery(sql);
StringBuffer sb=new StringBuffer();
//拼Josn格式的数据
while(rs.next()){
sb.append(rs.getString(1)+",");
}
//sb.substring(0,(sb.length()-1))是一个String类型的;
if(sb.length()>0){
out.print(sb.substring(0,(sb.length()-1)));
}
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
out.flush();
out.close();4、层级菜单
sevlet获取的数据库中的数据
String sql="SELECT cid,cname from catalog where pid='00'";
List<Catalog> list=new ArrayList<Catalog>();
try {
ResultSet rs=DBUtil.getConn().createStatement().executeQuery(sql);
Catalog cata=null;
while(rs.next()){
cata=new Catalog();
cata.setCid(rs.getString(1));
cata.setCname(rs.getString(2));
list.add(cata);
}
request.setAttribute("list", list);
}catch (Exception e) {
e.printStackTrace();
}
request.getRequestDispatcher("jq_ajax.jsp").forward(request, response);jsp代码
<divid="menudiv">
<ul>
<c:forEachitems="${list }" var="v">
<liclass="oneli" id="${v.cid }">
${v.cname}
</li>
<ulclass="twoul">
</ul>
</c:forEach>
</ul>
</div><script type="text/javascript">
$(function(){
$(".oneli").click(function(){
var id=$(this).attr("id");
var mythis=this;//在回调函数不能使用this对象
var l = $(mythis).next(".twoul").children("li").length;
if(l==0){
var url="AjaxServlet?on=menu";
$.post(url,{id:id},function(data){
data = eval("(" + data + ")");
for(var i=0;i<data.length;i++){
$(mythis).next(".twoul").append("<li>"+data[i].cname+"</li>");
}
});
}
$(this).next(".twoul").toggle();
});
});
</script>用来异步获取数据的servlet
String id=request.getParameter("id");
response.setContentType("text/html;charset=utf-8");
PrintWriter out=response.getWriter();
String sql="SELECT cid,cname from catalog where pid='"+id+"'";
List<Catalog> list=new ArrayList<Catalog>();
try {
ResultSet rs=DBUtil.getConn().createStatement().executeQuery(sql);
Catalog cata=null;
while(rs.next()){
cata=new Catalog();
cata.setCid(rs.getString(1));
cata.setCname(rs.getString(2));
list.add(cata);
}
}catch (Exception e) {
e.printStackTrace();
}
String jsonList=JSONArray.fromObject(list).toString();
out.print(jsonList);
out.flush();
out.close();
5、异步分页
这个例子我用到了封装json数据的包
使用JSONObject类的对象操作JSON对象
JSONArray 用来转换json数组格式的数据
get方法 根据下标获取JSONArray 对象里面的值
JSONObject用来转换json对象格式的数据
需要用到jar包
jsp代码
<div>
<center>
<table>
<thead>
<tr>
<td>id</td>
<td>所属类别</td>
<td>商品名称</td>
<td>产地</td>
</tr>
</thead>
<tbody id="example">
</tbody>
</table>
</center>
<div id="page">
</div>
</div>
<script type="text/javascript">
var nowpage=1;
$(function(){
getJson(1);
});
function getJson(nowpage){
var url1="AjaxServlet?on=ajaxpage";
$.ajax({
type: "post",
async: "false",
data:{page:nowpage},
url: url1,
success: function(info){
$("#example").empty();
$("#page").empty();
var obj=eval("("+info+")");
var endPage=obj.page.endPage;
var nowPage=obj.page.nowPage;
$.each(obj.list,function(i,v){
$("#example").append("<tr><td>"+v.id+"</td><td>"+v.cid+"</td><td>"+v.city+"</td><td>"+v.name+"</td></tr>");
});
$("#page").append("当前:"+nowPage+"/"+endPage+"页<a href='javascript: getJson(1)'>首页</a><a href='javascript: getJson("+(nowPage-1)+")'>上一页</a>");
for(var i=1;i<=endPage;i++){
$("#page").append("<a href='javascript: getJson("+i+")'>"+i+"</a>");
}
$("#page").append("<a href='javascript: getJson("+(nowPage+1)+")'>下一页</a><a href='javascript: getJson("+endPage+")'>末页</a>");
}
});
}
</script>
response.setContentType("text/html;charset=utf-8");
PrintWriter out=response.getWriter();
String page=request.getParameter("page");
int pageSize=5;//一页显示的页数
int pageCount=27;//总页数
List<Items> itemsList=new ArrayList<Items>();
int nowPage=(page=="" || page==null)?1:Integer.parseInt(page);//计算当前页
int endPage=pageCount/pageSize;//末页
endPage=(pageCount%pageSize==0)?endPage:endPage+1;//计算末页,不够一页补一页
nowPage=(nowPage<1)?1:nowPage;//如果当前页小于1,则返回第一页
nowPage=(nowPage>=endPage)?endPage:nowPage;//如果的当前页大于末页,则返回末页
Page p=new Page();
p.setNowPage(nowPage);
p.setEndPage(endPage);
String sql="select * from items limit "+(nowPage-1)*pageSize+","+pageSize;
try {
ResultSet rs=DBUtil.getConn().createStatement().executeQuery(sql);
Items i=null;
while(rs.next()){
i=new Items();
i.setId(rs.getInt("id"));
i.setCid(rs.getString("cid"));
i.setName(rs.getString("name"));
i.setCity(rs.getString("city"));
itemsList.add(i);
}
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
Map<String,Object> map=new HashMap<String,Object>();
map.put("page", p);
map.put("list", itemsList);
String jsonList=JSONObject.fromObject(map).toString();
System.out.println(jsonList);
out.print(jsonList);
由于现在写的太多了，所以没本法放个文档，对于JSONArray和JSONObect不懂得可以微博联系我，我给你文档....
想要源代码的亦可以给我发微博
希望大家一起学习
扫一扫
783
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
