bootstrap之面板制作登錄界面+ajax與后台交互

• 實際使用中bootstrap功能實在強大，用.panel制作一個最簡單無驗證碼的登錄界面，再用AJAX與后端進行數據傳輸交互。

引入bootstrap要先引入css，再引入js,這樣避免出現混亂。代碼如下：

<!-- Bootstrap核心CSS文件 -->

<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
<!-- 可選的Bootstrap主題文件(一般不用引入) -->
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap-theme.min.css">
<!-- jQuery文件，在bootstrap.min.js之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<!-- Bootstrap核心JavaScript文件 -->
<script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
注意，所有 JavaScript 插件都依賴 jQuery，因此jQuery必須在Bootstrap之前引入，jQuery版本需大於或等於1.9.0



引入之后編寫html代碼，實現如圖效果即可。代碼：

<div class="panel panel-default">
    <div class="panel-heading">登陸界面</div>
    <div class="panel-body">
            <form role="form">
                <div class="form-group">
                    <label for="username">用戶名:</label>
                    <input id="username" type="email" class="form-control" placeholder="請輸入郵箱">
                </div>
                <div class="form-group">
                    <label for="password">密碼:</label>
                    <input type="password" id="password" class="form-control" placeholder="請輸入密碼">
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox" id="checkbox" class="checkbox">記住密碼
                    </label>
                </div>
                <div class="img">
                    <input type="text" value="請輸入驗證碼">
                    <img>
                </div>
                <button class="btn btn-block btn-primary">
                    登錄系統
                </button>
            </form>
      </div>
    <div class="panel-footer">晉江文學</div>
</div>

（驗證碼稍后再改）

script代碼如下：
<script type="text/javascript">
    $(function(){
        var $btn=$(".btn");
        var $username=$("#username");
        var $password=$("#password");
        $btn.on(
            "click",function(){
                 $.ajax({
                     url:"",
                     data:"$username+$password",
                     dataType:"jason",
                     type:"post",
                    success:function(){
                       if(data==Fail){
                           alert("登陸失敗！請重新輸入")
                       }else{
                           alert("登陸成功！")
                       }
                    }
                  })
        })
    })
</script>