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>