接續昨天的文章:
Day14 翻玩register.php -Show me the code
今天我們要重點觀察的位角色，jQuery，在程式碼$中可以看到他的身影。

如果你是第一次看本系列的邦友，可以先點擊下方 Day01 文章，內含 30 秒的 Demo 短片跟原始碼下載。

• Day01 以終為始PHP學習之路
• 原始碼打包下載-DropBox

內容

• 程式碼

<!-- jQuery -->
    <script src="js/jquery.js"></script>
	
	<!-- Script -->
	<script type="text/javascript">
        $(document).ready(function () {

            $("#register").click(function () {

                fname = $("#fname").val();
                lname = $("#lname").val();
                email = $("#email").val();
                password = $("#password").val();

                $.ajax({
                    type: "POST",
                    url: "adduser.php",
                    data: "fname=" + fname + "&lname=" + lname + "&email=" + email + "&password=" + password,
                    success: function (html) {
                        if (html == 'true') {

                            $("#add_err2").html('<div class="alert alert-success"> \
                                                 <strong>Account</strong> processed. \ \
                                                 </div>');

                            window.location.href = "index.php";

                        } else if (html == 'false') {
                            $("#add_err2").html('<div class="alert alert-danger"> \
                                                 <strong>Email Address</strong> already in system. \ \
                                                 </div>');                    

                        } else if (html == 'fname') {
                            $("#add_err2").html('<div class="alert alert-danger"> \
                                                 <strong>First Name</strong> is required. \ \
                                                 </div>');
												 
						} else if (html == 'lname') {
                            $("#add_err2").html('<div class="alert alert-danger"> \
                                                 <strong>Last Name</strong> is required. \ \
                                                 </div>');

                        } else if (html == 'eshort') {
                            $("#add_err2").html('<div class="alert alert-danger"> \
                                                 <strong>Email Address</strong> is required. \ \
                                                 </div>');

                        } else if (html == 'eformat') {
                            $("#add_err2").html('<div class="alert alert-danger"> \
                                                 <strong>Email Address</strong> format is not valid. \ \
                                                 </div>');
												 
						} else if (html == 'pshort') {
                            $("#add_err2").html('<div class="alert alert-danger"> \
                                                 <strong>Password</strong> must be at least 4 characters . \ \
                                                 </div>');

                        } else {
                            $("#add_err2").html('<div class="alert alert-danger"> \
                                                 <strong>Error</strong> processing request. Please try again. \ \
                                                 </div>');
                        }
                    },
                    beforeSend: function () {
                        $("#add_err2").html("loading...");
                    }
                });
                return false;
            });
        });
    </script>

jQuery

起手式：官網
有不懂的google，stackoverflow.com

• jQuery官網文件 https://api.jquery.com/
• 這裡使用 jQuery 主要是搭配 Ajax 來驗證使用者輸入的資料
• 關於 POST 可以回顧一下這篇文章
  Day06 PHP華爾滋 POST GET REQUEST

jQuery document ready

要用JavaScript操縱網頁的DOM元素時，必須等網頁完全載入後才可安全地進行操作，而要確保網頁載入，可使用jQuery的$( document ).ready()。

$( document ).ready(function() {
  // 在這寫 javascript 程式碼
});

下面的簡短寫法效果同$( document ).ready()

$(function() {
  // 在這撰寫 javascript 程式碼
});

Ajax

• 懶人包:
  可與伺服器進行非同步更新，不需要重新載入整個網頁
  最常應用在用戶註冊、驗證信箱或用戶名是否有被重複使用，不用等到使用者填完資料就能驗證

• 詳細資料:wiki/AJAX

前後端分離

• 前後端作業完全分離，後端負責資料庫、API，前端負責頁面結構、API 介接。

  自從 Ajax 越來越普遍的情況下，前後端分離漸為許多公司開發的架構，同一個專案會在拆分成前端與後端，這樣完全的分離可以讓職責分得更清楚，但也同時需要更重視 “溝通”。

jQuery 搭配 Ajax

• 驗證用戶資料，發出提示訊息
• 非同步作用:不用重新整理網頁
• jQuery ajax() 方法

總結

今天我們喵一下 jQuery，配合上 Ajax，可以快速的選擇網頁上的元素，並進行非同步更新，是不是很酷，明天會一窺PHP如何將使用者的資料傳到資料庫，敬請期待!