accp8.0轉換教材第11章JAjax加護擴展理解與練習
①雜記:前面有原生態JavaScript實現ajax這裏又多了更簡單的方法實現ajax
②$.get()方法的常用參數
參數 | 類型 | 說明 |
url | String | 必選,規定發送地址 |
data | PlainObject或String | 可選,規定請求發送的數據 |
success |
Function(PlainObject data, String textStatus,jqXHR jqxhr) |
可選,成功後調用的函數 參數data:可選服務器返回結果 參數textStatus:可選描述請求狀態 參數jqxhr:可選是XMLHttpRequest的超集 (如果指定dataType這個必選) |
dataType | String | 可選:預期服務器返回的數據類型 |
③$.post()方法的常用參數同上
一.單詞部分(JSON常用單詞)
1.load 加載 2.serialize序列化 3.contains 包含 4.feature 特征
5.quote 引用 6.skip 跳躍 7.transient 短暫的 8.pretty 相當
9.prototype 原型 10.conflict 沖突
二.關於JSON一些常見問題
1.jQuery實現Ajax的主要方法
①原生態實現
②$.get()和$.post()方法
③$.getJSON()方法
④.load()
2.jQuery解析表單數據
jQuery的.serializeArray()方法會從一組表單元素中檢測有效控件:
①元素不能被禁用
②元素必須有name屬性
③選中的checkbox才是有效的
④選中的radio才是有效的
⑤只有觸發提交事件的submit按鈕才是有效的
⑥file元素不會被序列化
3.jQuery與其它3
三.實現Ajax
1.使用$.get()方法實現異步驗證註冊郵箱
1 $(function(){ 2 $("#email").blur(function(){ 3 var email=$("#email").val(); 4 if(email==null || email==""){ 5 $("#samp").html("郵箱不能為空!"); 6 } 7 else{ 8 $.get("userServlet","email="+email,callBack); 9 function callBack(data){ 10 if(data=="true"){ 11 $("#samp").html("郵箱已被註冊!"); 12 } 13 else{ 14 $("#samp").html("郵箱可註冊!"); 15 } 16 } 17 } 18 }); 19 20 });
2.使用$.getJSON()方法加載管理員頁面主題列表
1 $.getJSON("userServlet","por=top",callTopics); 2 3 function callTopics(top){ 4 5 var $userul=$("#userul").empty(); 6 for(var i=0;i<top.length;){ 7 //alert("ddd"); 8 $userul.append( 9 "<li>"+top[i].topics+" <a href=‘‘>修改</a> <a href=‘‘>刪除</a></li>" 10 ); 11 i++; 12 if(i==top.length){ 13 14 break; 15 } 16 } 17 }
3.在Ajax中直接返回HTML內容生成主題管理頁面
1 $.ajax({ 2 "url":"userServlet", 3 "type":"GET", 4 "data":"por=top1", 5 "dataType":"html", 6 "success":callTopics 7 }); 8 function callTopics(data){ 9 $("#userul").html(data); 10 }
4.使用.load()方法為管理員頁面加載服務器生成的主題列表
$("#userul").load("userServlet","por=top1");
5.使用Ajax實現無刷新的新聞評論功能
1 if(por.equals("addCom")){ 2 //上機5添加評論 3 comment com=new comment(); 4 commentdao comdao=new commentimpl(); 5 String name=request.getParameter("cauthor1"); 6 String ip=request.getParameter("cip"); 7 String content=request.getParameter("ccontent"); 8 String ctime="2017-7-4"; 9 //time.toString(); 10 com.setCname(name); 11 com.setCcontent(content); 12 com.setCip(ip); 13 com.setCtime(ctime); 14 int re=comdao.addcomment(com); 15 String result=""; 16 if(re>0){ 17 result="success"; 18 }else { 19 result="添加失敗!"; 20 } 21 22 23 response.setContentType("text/html;charset=UTF-8"); 24 PrintWriter out=response.getWriter(); 25 out.print("[{\"result\":\""+result+"\",\"ctime\":\""+ctime+"\"}]"); 26 out.flush(); 27 out.close(); 28 29 }
6.使用FastJSON改造管理員頁面加載主題列表
topdao nd=new topimpl(); List<top> listtop=nd.alltop(); String titleJson=JSON.toJSONStringWithDateFormat(listtop,"yyyy-MM--dd HH:mm:ss");
四.加深理解
通過FastJSON的相關API可以簡化服務器端生成的JSON字符串代碼
$.parseJSON()方法用來將JSON格式字符串解析為JSON對象
歡迎指錯,歡迎提問,原創轉載請註明 博客園
accp8.0轉換教材第11章JAjax加護擴展理解與練習