Ajax最实用的小例子集合

2016-11-19 18:59:09来源:CSDN作者:wangdingfeng5141人点击

第七城市

今天我为大家带来了几个非常实用的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" onblur="ajaxsub(this)"><label id="msg_info"></label></body></html>
servlet代码

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>
servlet代码

	     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>
servlet代码

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>
servlet代码

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不懂得可以微博联系我,我给你文档....

想要源代码的亦可以给我发微博

希望大家一起学习




第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台