1. 程式人生 > >accp8.0轉換教材第11章JAjax加護擴展理解與練習

accp8.0轉換教材第11章JAjax加護擴展理解與練習

func 原生態 事件 提交 pic 請求 val .get table

①雜記:前面有原生態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+"&nbsp;&nbsp;<a href=‘‘>修改</a>&nbsp;&nbsp;<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加護擴展理解與練習