回顧: 分頁:將數(shù)據(jù)按照頁碼劃分,提高用戶的體驗度. 分類:邏輯分頁:一次性將內(nèi)容加載到內(nèi)存(list),獲取自己想要的數(shù)據(jù) sublist截取.缺點:維護起來麻煩物理分頁:(經(jīng)常使用) 每次只去查詢當前頁需要的數(shù)據(jù) 缺點:和數(shù)據(jù)庫交互多 mysql: limit格式:select ..... limit m,n;[m+1,m+n]規(guī)律:查看第n也數(shù)據(jù): limit (n-1)*pageSize,pageSize 每頁中需要的數(shù)據(jù):5個當前頁內(nèi)容 list 通過limit查詢當前頁 currPage 前臺傳遞過來每頁顯示的條數(shù) pagesize 固定總條數(shù) totalCount count(*)查詢總頁數(shù) Math.ceil(totalCount*1.0/pageSize) 封裝成一個pagebean 在前臺展示:1.當前頁數(shù)據(jù) 遍歷 pb.list2.展示首頁 上一頁... 然后給他們添加超鏈接3.判斷是否是第一頁 若是:不展示 首頁和上一頁4.判斷是否是最后一頁 若是:不展示 尾頁和下一頁5.將所有的頁碼展示forEach begin="1" end="${pb.totaoPage}"6.判斷是否是當前頁若是:則不加超鏈接若不是:加超鏈接 /// 案例1-使用原生的ajax判斷用戶名是否占用(了解) 需求:當我們在注冊頁面上輸入用戶名之后,點擊下一個地方,去數(shù)據(jù)庫中查詢有無該用戶名,最后提示信息 技術(shù)分析:ajax ajax異步JavaScript和XML,AJAX 是一種用于創(chuàng)建快速動態(tài)網(wǎng)頁的技術(shù)。通過在后臺與服務(wù)器進行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁實現(xiàn)異步更新。這意味著可以在不重新加載整個網(wǎng)頁的情況下，對網(wǎng)頁的某部分進行更新。傳統(tǒng)的網(wǎng)頁（不使用 AJAX）如果需要更新內(nèi)容，必須重載整個網(wǎng)頁頁面。 / ajax入門程序:步驟:1.創(chuàng)建一個核心對象 XMLHttpRequest2.編寫一個回調(diào)函數(shù)3.編寫請求方式和請求的路徑(open操作)4.發(fā)送請求(send操作) ajax-api詳解常用屬性:onreadystatechange:檢測readyState狀態(tài)改變的時候readyState:ajax核心對象的狀態(tài)0:核心對象創(chuàng)建1:調(diào)用了open方法2:調(diào)用了send方法3:部分響應(yīng)已經(jīng)生成(沒有意思)4:響應(yīng)已經(jīng)完成(使用的是這個狀態(tài))status:狀態(tài)碼if(xmlhttp.readyState==4 && xmlhttp.status==200){}responseText:響應(yīng)回來的文本常用方法:open("請求方式","請求路徑"[,"是否異步"]):設(shè)置請求的方式和請求的路徑send(["參數(shù)"]):發(fā)送請求 參數(shù)是請求方式為post的時候的參數(shù)setRequestHeader("content-type","form表單enctype屬性"):設(shè)置post請求的參數(shù)的類型 必須放在send方法之前. / 步驟分析:1.數(shù)據(jù)庫和表CREATE TABLE `user` (`id` INT(11) NOT NULL AUTO_INCREMENT,`username` VARCHAR(20) DEFAULT NULL,`password` VARCHAR(20) DEFAULT NULL,`email` VARCHAR(20) DEFAULT NULL,`name` VARCHAR(20) DEFAULT NULL,`sex` VARCHAR(10) DEFAULT NULL,`birthday` DATE DEFAULT NULL,`hobby` VARCHAR(50) DEFAULT NULL,PRIMARY KEY (`id`)) ENGINE=INNODB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;INSERT INTO `user`(`id`,`username`,`password`,`email`,`name`,`sex`,`birthday`,`hobby`) VALUES (1,'bbb','123','123@163.com','張三','男','1992-01-02','籃球, 足球, 排球'),(2,'ccc','123','ccc@itcast.cn','李四','女','1992-03-20','排球, 乒乓球'),(3,'aaa','123','aaa@itcast.cn','王守義','男','1990-08-11','足球, 排球'),(5,'tom','123','haha@qq.com','提莫','男',NULL,'籃球');2.新建項目導入 jar包 工具類 配置文件3.新建一個注冊頁面 表單 在用戶名文本框上輸入用戶名 失去焦點發(fā)送ajax請求,將輸入的值發(fā)送到servlet4.checkUsername4Ajax接受用戶名調(diào)用service完成查詢操作 返回一個用戶判斷user是否為空若為空 :寫1 代表可以使用若不為空:寫05.在表單接受響應(yīng)的數(shù)據(jù)判斷一下,若為0,則提示用戶名已被占用 表單不可用提交 提交按鈕禁用document.getElementById("sub").disabled=true; // 案例2-使用jquery的ajax判斷用戶是否被占用 技術(shù)分析:jquery中的ajax /// 四種:了解:jquery對象.load(url,params,function(數(shù)據(jù)){});★: $.get(url,params,function(數(shù)據(jù)){},type);發(fā)送get請求的ajaxurl:請求的路徑params:請求的參數(shù) 參數(shù)為key\value的形式 key=value {"":"","":""}fn:回調(diào)函數(shù) 參數(shù)就是服務(wù)器發(fā)送回來的數(shù)據(jù)type:返回內(nèi)容格式，xml, html, script, json, text, _default。 以后用"json"★: $.post(url,params,function(數(shù)據(jù)){},type);發(fā)送post請求的ajax若結(jié)果為json格式, 打印返回值的時候是一個對象 例如若json為 {"result":"success","msg":"成功"}獲取msg 只需要 參數(shù).msg理解:$.ajax([選項]);選項的可選值:url:請求路徑type:請求方法data:發(fā)送到服務(wù)器的數(shù)據(jù)success:fn 成功以后的回調(diào)error:fn 異常之后的回調(diào)dataType:返回內(nèi)容格式 經(jīng)常使用jsonasync:設(shè)置是否是異步請求例如:$.ajax({url:"/day15/demo1",type:"post",data:"username=tom",success:function(d){alert(d.msg);},error:function(){},dataType:"json"});// 步驟分析:將js原生ajax修改成jquery的ajax 案例3-模仿百度搜索 需求:在一個文本框中輸入一段內(nèi)容,keyup的時候發(fā)送一個ajax請求,去數(shù)據(jù)庫中查找相應(yīng)的內(nèi)容,在頁面上展示 步驟分析:1.表create table keyword(id int primary key auto_increment,kw varchar(20));2.頁面3.在文本框輸入內(nèi)容 keyup的時候 發(fā)送ajax請求 將輸入值傳遞到后臺4.將返回的數(shù)據(jù)展示 /// 案例4-省市聯(lián)動 需求:先有一個省份的下拉選,根據(jù)選擇省份,從而動態(tài)的市下拉選中加載所有的市. 步驟分析:1.表2.頁面上有兩個下拉選 省份的下拉選一般是固定的 頁面加載的時候讀取所有的省份3.當省份改變的時候,獲取省份的信息,發(fā)送一個ajax請求,去市的表中查詢相應(yīng)省份的所有市,然后將他們加載到市下拉選上4.selectProServlet selectCityServlet// 技術(shù)分析:jsonJSON(JavaScript Object Notation) 是一種輕量級的數(shù)據(jù)交換格式。它基于ECMAScript的一個子集。json格式:格式1:value可以為任意值{"key":value,"key1":value1}格式2:e可以為任意值[e1,e2]jsonlib工具類,可以使對象轉(zhuǎn)換成json數(shù)據(jù)1.導入jar包2.使用apiJSONArray.fromObject(對象) 數(shù)組和list JSONObject.fromObject(對象) bean和map / / 上午回顧: 原生ajax:1.獲取核心對象 XMLHttpRequest2.編寫回調(diào)函數(shù)xmlhttp.onreadystatechange=function(){if(xmlhttp.readyState==4 && xmlhttp.status==200){alert(xmlhttp.responseText);}}3.open操作 設(shè)置訪問的方式和路徑xmlhttp.open("get","url");4.send操作xmlhttp.send("post的參數(shù)")若有參數(shù)需要設(shè)置一個頭xmlhttp.setRequestHeader("content-type","form表單enctype屬性") jquery中ajax掌握的:$.get(url,params,fn,type);type:"json"$.post(url,params,fn,type);理解:$.ajax(選項);選項:url:type:data:success:fnerror:dataType:"json" json:輕量級的數(shù)據(jù)格式格式1:{"key":value,"key1":value}格式2:[e1,e2] jsonlib:1.導入jar包2.使用apiJSONArray.formObject(數(shù)組或者list);JSONObject.formObject(bean或者map);// 獲取jquery對象:$("選擇器") jQuery("選擇器"); jquery對象>>dom對象方式1:jquery對象.get(index);方式2:jquery對象[index] dom對象>>jquery對象$(dom對象)頁面載入$(function(){})派發(fā)事件jquery對象.事件(function(){...});選擇器:#id值 .class值 標簽名 [屬性] [屬性='值']a b:后代 a>b:孩子 a+b:大弟弟 a~b:所有弟弟:first :last :odd :even :eq|gt|lt(index):hidden:checked :selected 屬性和css:prop|attrcss文本 標簽體val()html() text()文檔處理內(nèi)部插入append prepend 外部插入after before刪除remove 效果:隱藏|顯示show() hide()淡入淡出fadeIn() fadeOut()滑入滑出slideDown() slideUp()遍歷jquery對象.each(function(){});

?

轉(zhuǎn)載于:https://www.cnblogs.com/chenyanlong/p/9998717.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的day15-ajax和jquery的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。