前端編程提高之旅（十七）----jquery中表單、表格和ajax

        從一個框架核心功能層面上說，實現了選擇器、DOM操作、事件、動畫，功能已經完備了。而任何框架寫出了就是應用的，所以這篇涉及的表單與表格知識，雖在DOM操作中有所涉及，但更偏於實際項目中的應用技巧的使用。ajax部分的內容更是前端與後端交互的核心。

   一、jQuery中的表單與表格應用

   實際項目中，表單和表格分別扮演採集、提交用戶輸入的信息和顯示列表的數據。在HTML中非常重要。下面是這部分知識導圖：

   1.表單

   （1）單行文本框

    單行文本框職能是獲取用戶輸入的指定格式的數據。這就涉及兩點交互。

    這兩點交互都體現在獲取焦點與失去焦點的變化上，當獲取焦點時，單選框添加背景色、內容提示清空。失去焦點時，背景色去除，如果內容爲空，內容提示恢復。

   jQuery代碼如下：

$(":input").focus(function(){
			  $(this).addClass("focus");
			  if($(this).val() ==this.defaultValue){  
                  $(this).val("");           
			  } 
		}).blur(function(){
			 $(this).removeClass("focus");
			 if ($(this).val() == '') {
                $(this).val(this.defaultValue);
             }
		});

     （2）多行文本框

   多行文本框一個比較重要的應用是控制滾動條的變化。如果有上滑的命令，則對文本框滾動條上移50px。反之亦然。

   jQuery代碼如下：

var $comment = $('#comment');//獲取評論框
	    $('.up').click(function(){ //向上按鈕綁定單擊事件
		   if(!$comment.is(":animated")){//判斷是否處於動畫
				$comment.animate({ scrollTop  : "-=50" } , 400);
			}
		})
		$('.down').click(function(){//向下按鈕綁定單擊事件
		   if(!$comment.is(":animated")){
				$comment.animate({ scrollTop  : "+=50" } , 400);
			}
		});

      （3）複選框應用

   複選框對於用戶文件管理非常重要，主要涉及三個功能：全選、全不選、反選。此三個功能都會涉及修改每個複選框checked屬性。

   實現如上三個功能代碼如下：

$("#CheckedAll").click(function(){
	     $('[name=items]:checkbox').each(function(){
	     	this.checked = true;
	     })
	 });
	 //全不選
     $("#CheckedNo").click(function(){
	    $('[name=items]:checkbox').each(function(){
	    	this.checked=false;
	    });
	 });
	 //反選
     $("#CheckedRev").click(function(){
		  $('[name=items]:checkbox').each(function(){	
			//直接使用JS原生代碼，簡單實用
			this.checked=!this.checked;
		  });

     實現上述功能僅僅是第一步，常見的全選/全不選是一個按鈕，當列表選項全選時，全選又必須選中。所以全選與列表項存在着雙向通信。體現在代碼中，就必須做到雙向控制：即除了對自身狀態的修改，還需要判斷是否需要修改另一個的狀態。

   如下代碼採用一個臨時變量記錄，判斷是否全選中：

//全選
        $("#CheckedAll").click(function() {
            //所有checkbox跟着全選的checkbox走。
            var self =this;
            $('[name=items]:checkbox').each(function(){
            	this.checked=self.checked;
            });
        });
        $('[name=items]:checkbox').click(function() {
            //定義一個臨時變量，避免重複使用同一個選擇器選擇頁面中的元素，提升程序效率。
            var $tmp = $('[name=items]:checkbox');
            //用filter方法篩選出選中的複選框。並直接給CheckedAll賦值。
            $('#CheckedAll').attr('checked', $tmp.length == $tmp.filter(':checked').length);
        });

      （4）下拉框應用

   下拉框的應用主要集中於兩欄之間，下拉項在下拉框之前切換，主要涉及option標籤selected屬性用來篩選選中項，另外涉及dom移動。主要涉及移動選中、全部移動、雙擊移動。注意雙擊移動採用了上下文篩選移動項。

   代碼如下：

$('#add').click(function() {
	//獲取選中的選項，刪除並追加給對方
		$('#select1 option:selected').appendTo('#select2');
	});
	$('#add_all').click(function() {
		//獲取全部的選項,刪除並追加給對方
		$('#select1 option').appendTo('#select2');
	});
	$('#select1').dblclick(function(){ //綁定雙擊事件
		//獲取全部的選項,刪除並追加給對方
		$("option:selected",this).appendTo('#select2'); //追加給對方
	});

     （5）表單驗證

   表單驗證最爲常見，需要對用戶輸入信息實時提示，這裏採用失去焦點判斷的方法，爲了實時顯示，同時在keyup和focus事件中，都觸發blur方法，同時避免瀏覽器默認blur事件。

   代碼如下：

 $('form :input').blur(function(){
			 var $parent = $(this).parent();
			 $parent.find(".formtips").remove();
			 //驗證用戶名
			 if( $(this).is('#username') ){
					if( this.value=="" || this.value.length < 6 ){
					    var errorMsg = '請輸入至少6位的用戶名.';
                        $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
					}else{
					    var okMsg = '輸入正確.';
					    $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
					}
			 }
			 //驗證郵件
			 if( $(this).is('#email') ){
				if( this.value=="" || ( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) ) ){
                      var errorMsg = '請輸入正確的E-Mail地址.';
					  $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
				}else{
                      var okMsg = '輸入正確.';
					  $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
				}
			 }
		}).keyup(function(){
		   $(this).triggerHandler("blur");
		}).focus(function(){
	  	   $(this).triggerHandler("blur");
		});//end blur

            2.表格

   （1）展開關閉

    表格的展開關閉，也即展開關閉兩種狀態的切換，前面動畫講過toggle方法可以切換顯示隱藏，這裏通過點選控制同類兄弟節點的關閉顯示切換。

   代碼如下：

   

$('tr.parent').click(function(){   // 獲取所謂的父行
			$(this)
				.toggleClass("selected")   // 添加/刪除高亮
				.siblings('.child_'+this.id).toggle();  // 隱藏/顯示所謂的子行
	}).click();

   （2）內容篩選

    對於列表的內容篩選，主要採用過濾方法filter，篩選包含指定內容的列表項。當keyup時即篩選。

    代碼如下：

   

$("#filterName").keyup(function(){
	      $("table tbody tr")
					.hide()
					.filter(":contains('"+( $(this).val() )+"')")
					.show();
	   }).keyup();

   二.jquery與ajax

   Ajax出現最大的意義在於，改變了以往前後端傳數據需要全頁面刷新來獲取頁面內容的方式，可以局部刷新頁面。工作原理是在客戶端實現了一個ajax引擎，使用戶操作與服務器響應異步化。

   《jQuery攻略》上列出了ajax幾大不足，但這似乎並沒有影響ajax的廣泛應用。作爲前端開發人員，ajax帶來的最大弊病就是異步響應的問題。異步響應需要開發人員時刻保持對時序執行邏輯的關注，往往很多問題都處在這裏。

   jQuery提供了非常簡便的ajax操作，代替了原生代碼複雜冗餘的操作，使ajax應用變得簡單。以下是樂帝對ajax這部分內容的知識導圖：

    1. ajax操作方法

    如上知識所示，ajax操作方法可以分爲三層，由簡單到複雜，由高層到底層。其中第二層最常用。這幾個ajax方法底層都是對原生ajax方法的封裝。但應用場景稍有不同，越是上層應用場景越具針對性，靈活性則不足。最底層$.ajax()靈活性雖足，配置起來則更爲複雜。

   每個ajax操作方法都會涉及的參數有3個url（請求地址）、data（發送至服務器數據）、callback（請求完成時回調）。

   最常用的兩個分別是$.get()與$.post(),兩者分別對應ajax操作的get請求方式與post請求方式，這兩種方式區別有三點：

   $.getScript()與$.getJSON()兩個ajax方法分別是針對動態加載腳本與json文件場景設定的方法。

   $.ajax()方法是上述ajax操作方法最底層的構建，此方法可以替代上述方法。

   2.參數序列化方法

   本文第一部分提到表單是獲取用戶數據的方式，用戶填寫完表單，發送到服務器就需要收集用戶表單數據。如果一個個取數據還是很繁瑣的。

   參數序列化方法正是自動將表單數據序列化，用於ajax請求。

   serialize()用於將DOM元素內容序列化爲字符串：

        serializeArray()用於將DOM元素序列化，返回JSON格式數據：

        $.param()方法用來對數組或對象鍵值對序列化：

   3.ajax請求控制方法

   這裏主要涉及兩個方法：Ajax請求開始時，會觸發ajaxStart方法；Ajax請求結束時，會觸發ajaxStop方法。常用於加強用戶體驗，給用戶添加加載提示。

   使用示例：

$("#send").click(function(){
			  $("#resText").load("test.html");
	  })
	  $("#resText").ajaxStart(function(){
	  	console.log("ajax has started");
	  });
	  $("#resText").ajaxStop(function(){
	  	console.log("ajax has stopped");
	  });