回顧: 分頁:將數據按照頁碼劃分,提高用戶的體驗度. 分類:邏輯分頁:一次性將內容加載到內存(list),獲取自己想要的數據 sublist截取.缺點:維護起來麻煩物理分頁:(經常使用) 每次只去查詢當前頁需要的數據 缺點:和數據庫交互多 mysql: limit格式:select ..... limit m,n;[m+1,m+n]規律:查看第n也數據: limit (n-1)*pageSize,pageSize 每頁中需要的數據:5個當前頁內容 list 通過limit查詢當前頁 currPage 前臺傳遞過來每頁顯示的條數 pagesize 固定總條數 totalCount count(*)查詢總頁數 Math.ceil(totalCount*1.0/pageSize) 封裝成一個pagebean 在前臺展示:1.當前頁數據 遍歷 pb.list2.展示首頁 上一頁... 然后給他們添加超鏈接3.判斷是否是第一頁 若是:不展示 首頁和上一頁4.判斷是否是最后一頁 若是:不展示 尾頁和下一頁5.將所有的頁碼展示forEach begin="1" end="${pb.totaoPage}"6.判斷是否是當前頁若是:則不加超鏈接若不是:加超鏈接 /// 案例1-使用原生的ajax判斷用戶名是否占用(了解) 需求:當我們在注冊頁面上輸入用戶名之后,點擊下一個地方,去數據庫中查詢有無該用戶名,最后提示信息 技術分析:ajax ajax異步JavaScript和XML,AJAX 是一種用于創建快速動態網頁的技術。通過在后臺與服務器進行少量數據交換，AJAX 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。傳統的網頁（不使用 AJAX）如果需要更新內容，必須重載整個網頁頁面。 / ajax入門程序:步驟:1.創建一個核心對象 XMLHttpRequest2.編寫一個回調函數3.編寫請求方式和請求的路徑(open操作)4.發送請求(send操作) ajax-api詳解常用屬性:onreadystatechange:檢測readyState狀態改變的時候readyState:ajax核心對象的狀態0:核心對象創建1:調用了open方法2:調用了send方法3:部分響應已經生成(沒有意思)4:響應已經完成(使用的是這個狀態)status:狀態碼if(xmlhttp.readyState==4 && xmlhttp.status==200){}responseText:響應回來的文本常用方法:open("請求方式","請求路徑"[,"是否異步"]):設置請求的方式和請求的路徑send(["參數"]):發送請求 參數是請求方式為post的時候的參數setRequestHeader("content-type","form表單enctype屬性"):設置post請求的參數的類型 必須放在send方法之前. / 步驟分析:1.數據庫和表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.新建一個注冊頁面 表單 在用戶名文本框上輸入用戶名 失去焦點發送ajax請求,將輸入的值發送到servlet4.checkUsername4Ajax接受用戶名調用service完成查詢操作 返回一個用戶判斷user是否為空若為空 :寫1 代表可以使用若不為空:寫05.在表單接受響應的數據判斷一下,若為0,則提示用戶名已被占用 表單不可用提交 提交按鈕禁用document.getElementById("sub").disabled=true; // 案例2-使用jquery的ajax判斷用戶是否被占用 技術分析:jquery中的ajax /// 四種:了解:jquery對象.load(url,params,function(數據){});★: $.get(url,params,function(數據){},type);發送get請求的ajaxurl:請求的路徑params:請求的參數 參數為key\value的形式 key=value {"":"","":""}fn:回調函數 參數就是服務器發送回來的數據type:返回內容格式，xml, html, script, json, text, _default。 以后用"json"★: $.post(url,params,function(數據){},type);發送post請求的ajax若結果為json格式, 打印返回值的時候是一個對象 例如若json為 {"result":"success","msg":"成功"}獲取msg 只需要 參數.msg理解:$.ajax([選項]);選項的可選值:url:請求路徑type:請求方法data:發送到服務器的數據success:fn 成功以后的回調error:fn 異常之后的回調dataType:返回內容格式 經常使用jsonasync:設置是否是異步請求例如:$.ajax({url:"/day15/demo1",type:"post",data:"username=tom",success:function(d){alert(d.msg);},error:function(){},dataType:"json"});// 步驟分析:將js原生ajax修改成jquery的ajax 案例3-模仿百度搜索 需求:在一個文本框中輸入一段內容,keyup的時候發送一個ajax請求,去數據庫中查找相應的內容,在頁面上展示 步驟分析:1.表create table keyword(id int primary key auto_increment,kw varchar(20));2.頁面3.在文本框輸入內容 keyup的時候 發送ajax請求 將輸入值傳遞到后臺4.將返回的數據展示 /// 案例4-省市聯動 需求:先有一個省份的下拉選,根據選擇省份,從而動態的市下拉選中加載所有的市. 步驟分析:1.表2.頁面上有兩個下拉選 省份的下拉選一般是固定的 頁面加載的時候讀取所有的省份3.當省份改變的時候,獲取省份的信息,發送一個ajax請求,去市的表中查詢相應省份的所有市,然后將他們加載到市下拉選上4.selectProServlet selectCityServlet// 技術分析:jsonJSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。它基于ECMAScript的一個子集。json格式:格式1:value可以為任意值{"key":value,"key1":value1}格式2:e可以為任意值[e1,e2]jsonlib工具類,可以使對象轉換成json數據1.導入jar包2.使用apiJSONArray.fromObject(對象) 數組和list JSONObject.fromObject(對象) bean和map / / 上午回顧: 原生ajax:1.獲取核心對象 XMLHttpRequest2.編寫回調函數xmlhttp.onreadystatechange=function(){if(xmlhttp.readyState==4 && xmlhttp.status==200){alert(xmlhttp.responseText);}}3.open操作 設置訪問的方式和路徑xmlhttp.open("get","url");4.send操作xmlhttp.send("post的參數")若有參數需要設置一個頭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:輕量級的數據格式格式1:{"key":value,"key1":value}格式2:[e1,e2] jsonlib:1.導入jar包2.使用apiJSONArray.formObject(數組或者list);JSONObject.formObject(bean或者map);// 獲取jquery對象:$("選擇器") jQuery("選擇器"); jquery對象>>dom對象方式1:jquery對象.get(index);方式2:jquery對象[index] dom對象>>jquery對象$(dom對象)頁面載入$(function(){})派發事件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()文檔處理內部插入append prepend 外部插入after before刪除remove 效果:隱藏|顯示show() hide()淡入淡出fadeIn() fadeOut()滑入滑出slideDown() slideUp()遍歷jquery對象.each(function(){});

?

轉載于:https://www.cnblogs.com/chenyanlong/p/9998717.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。