jQuery + Boostrap：第二個範例

在第一個範例中，我們利用傳統的 client-server 的呼叫方式，輸入必須的資料後，在遠端程式執行完後，把結果顯示在一個新的網頁上。在第二個範例，我們把第一個範例進行更改，並在使用者輸入資料後，直接把結果顯示在同一個網頁上，有興趣的讀者可以先到 demo 網頁 先試用一下，代碼可以輸入 111111 或者 999999 看看執行結果。

由於在這個範例，我們利用 jQuery 來呼叫遠端程式，所以我需要把 form 中的 method 和 action 移除，移除後的 form如下：

<form class="form-horizontal" role="form">

另外，我把 submit 的按鈕改成 Boostrap 的按鈕並幫這個按鈕定義一個名為 submit 的 id；這個設計的目的是為了方面之後使用者點擊這個按鈕時，我可以利用 jQuery 的機制（即 $("#submit").click(function() {}）輕鬆找到 $("#submit") 並設計 click 的事件處理程式。

<button type="button" id="submit" class="btn btn-default">送出查詢</button>

除了按鈕之外，我們在介面上需要設計一個區塊，讓遠端執行完的結果可以顯示。我們設計了一個 id 為 result 的區塊，這個區塊就定義在 form 之下，其原始碼如下：

<div id="result">
</div>

最後，讓我們把 jQuery 的程式碼補上，由於在之前 jQuery 的教學中大概都說過了，我們就簡略的說明一下：

01  <script type="text/javascript">
02    $("#submit").click(function() {
03      // jQuery 用來取得輸入的值
04      var cc= $('input[name="class"]:checked').val();
05      var grade = $('input[name="get-grade"]').val();
06      var url = "new-grade.pl?class="+cc+"&get-grade="+grade;
07      $.get(url, function(data, status){
08        $("#result").html(data);
09      });
10    });
11  </script>

如果使用者點擊 id 為 submit 的按鈕，我們希望取得使用者輸入的資料（如選擇的班級以及輸入的代碼），然後把呼叫遠端程式的 URL 給整理出來；由於遠端程式的名稱為 new-grade.pl，而該程式預期有兩個輸入資料，第一個輸入資料的名稱是 class（即 <input type="radio" name="class" value="xml.txt"/>），取得使用者資料的方式是 $('input[name="class"]:checked').val()，也就是找到標籤名稱是 input 而且其屬性名稱 name 的值為 class 的節點，最後一個 :checked 代表被使用者選擇的（即 checked）的選項。同理，第 05 行的設計方式類似第 04 行。第 06 行就是串成 URL 的字串，而第 07 行就是 jQuery 的 Ajax 呼叫方式，執行的結果會存放在變數 data，而第 08 行就是把 data 內的資料放到 id 為 result 的區塊內。

從這個範例可以看得出來，其實 Boostrap主要用於排版，而它跟 jQuery 的結合，主要學習的目標還是 jQuery。