Ajax最實用的小例子集合
阿新 • • 發佈：2018-12-30
今天我為大家帶來了幾個非常實用的ajax小例子，都是在工程中經常用到的實用的例子。適合有基礎的同學，廢話也不多說了，看程式碼
哦，對了，所有的例子都是用servlet+jsp實現的 至於三大框架的，我相信，只要這個會了，那都不是事...
1、我們先用基本的ajax實現驗證使用者名稱是否存在的例子(此例子只對IE瀏覽器)，
例子截圖
jsp的程式碼
servlet程式碼<%@ 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>
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不懂得可以微博聯絡我，我給你文件....
想要原始碼的亦可以給我發微博
希望大家一起學習