Form data collect (GET) by jQuery

之前有提過，我們可以透過jQuery來取得表單 (Form)的資料來傳送給後端的伺服器；那，從服務器回傳給我們的資料，又該如何設定??

var strText = "Pablo Picasso G.";
var strPassword = "028879576";

<input type="text" id="idText" />
<input type="password" id="idPassword" />

$("#idText").val(strText);
$("#idPassword").val(strPassword);

Input類型為Text和Password非常地簡單，用val()函式就能設定它們的值。

var strSex = 1;

<input type="radio" name="nmSex" value="1" />Male
<input type="radio" name="nmSex" value="0" />Female

$("input[name='nmSex']")[strSex].checked = true;

這邊要注意一下，出來的結果會是：$("input[name='nmSex']")[1]，指的是「類型為Input，名字為nmSex的陣列裡的第1個元素」會被選取，所以是Female被選取；而不是值為1 (value="1")的Male被選取。這兩者差異很大，一個指的是陣列裡的元素順序，另一個則是每一個元素裡的值。
這種排列組合的變化很多，端看程序員如何設計。以此為例，我希望strSex = 1;時為Male，strSex = 0;時為Female。我會改寫成：

var strSex = (1? 0: 1);

var nWeek = 90;

var LeftPadZero = function(NUM, BIT) {
 return (Array(BIT).join(0) + NUM).slice(-BIT);
};

var CheckBox_Selected = function(VAL) {
 var nRet = VAL.toString(2);
 nRet = LeftPadZero(nRet, 7);
 $("input[type=checkbox]").each(function(index, context) {
  if (nRet[index] === "0")
   $(this).prop("checked", false);
  else
   $(this).prop("checked", true);
  return;
 });
 return;
}

<input type="checkbox" name="nmWd0" value="0">SUN.
<input type="checkbox" name="nmWd1" value="1">MON.
<input type="checkbox" name="nmWd2" value="2">TUE.
<input type="checkbox" name="nmWd3" value="3">WED.
<input type="checkbox" name="nmWd4" value="4">THUR
<input type="checkbox" name="nmWd5" value="5">FRI.
<input type="checkbox" name="nmWd6" value="6">SAT.

CheckBox_Selected(nWeek);

Input類型為CheckBox (複選鈕)的，比較特別；例如一個星期有7天，我要選那幾天，假如我把每一個nmWd都當成一個值來存，對後端的服務器而言並不是很經濟。

所以我會把整個星期都當成一個值，值的規則為：(NULL), SUN, MON, TUE, WED, THUR, FRI, SAT，為什麼最前面要多一個(NULL)，因為我要讓它湊滿8個bit；假如我選擇SUN, TUE, WED, FRI這4天，出來的結果應該會是：0101 1010。1代表有勾選，0代表沒勾選；把這8個bit當成一個2進制的值來看，再轉換成10進制，就是90。

那服務器傳回"90"這個值給前端的網頁，該如何解讀?? 把90這個值，透過toString(2)轉成2進位的字串；但2進位的字串有可能長得像這樣：1111，0會被省略，所以我再透過LeftPadZero(NUM, BIT)函式，讓它前面補0。為什麼只補滿7個bit，因為一個星期只有7天。

如此，結果就出來了，bit為0的表沒勾選，1的才有勾。

var strBlood = 4;

<select id="idBlood">
    <option value="0" />BLOOD
    <option value="1" />A
    <option value="2" />B
    <option value="3" />AB
    <option value="4" />O
</select>

$("select").val(strBlood);

以上則是下拉式選單 (Select-Option)的設值方式。

參考資料：
Form data collect (POST) by jQuery