直接貼代碼：
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3個meta標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <!--<link href="css/bootstrap.min.css" rel="stylesheet">--> {load href="__STATIC__/bootstrap/css/bootstrap.min.css"} {load href="__STATIC__/css/base.css"} <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--></head><body><p class="container" style="background: #fff;min-height: 200px;"> <!--一行內容--> <p class="row"> <p class="col-md-3"></p> <p class="col-md-6" style="background: #fff;min-height: 150px;"> <p class="login-header">使用者登入</p> <p class="login-form"> <p class="alert alert-danger error-tips" style="display: none;" role="alert"></p> <p class="alert alert-success success-tips" style="display: none;" role="alert"></p> <form class="login"> <p class="form-group"> <label for="exampleInputEmail1">使用者名稱</label> <input type="text" name="name" class="form-control" id="exampleInputEmail1" placeholder="請輸入您的郵箱"> </p> <p class="form-group"> <label for="exampleInputPassword1">密碼</label> <input type="password" name="password" class="form-control" id="exampleInputPassword1" placeholder="請輸入您的密碼"> </p> <p class="checkbox"> <label> <input type="checkbox"> 下次自動登入 </label> </p> <button type="button" class="btn btn-default login-btn">使用者登入</button> </form> </p> </p> <p class="col-md-3"></p> <!--<p class="col-md-8" style="background: #999;min-height: 150px;">右側菜單</p>--> </p></p><!--<p class="container-fuild" style="background: #eee;min-height: 200px;">--><!--<h1>你好，世界！</h1>--><!--</p>--><!-- jQuery (necessary for Bootstrap's JavaScript plugins) --><!--<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>-->{load href="__STATIC__/jquery/jquery.min.js"}<!-- Include all compiled plugins (below), or include inpidual files as needed -->{load href="__STATIC__/bootstrap/js/bootstrap.min.js"}<!--<script src="js/bootstrap.min.js"></script>--><script> $(function(){ // 給登入按鈕增加事件監聽 $('.login-btn').click(function(){ //alert('你點擊了登入按鈕'); // 1 擷取表單的資料【一般會在javascript中進行驗證】 // 2 使用ajax方法進行提交 // 3 根據伺服器的傳回值進行操作（具體局部重新整理操作） // 1.挨個擷取 var _name = $('input[name="name"]').val(); var _password = $('input[name="password"]').val(); // 2.使用jq的serialize() // alert($('.login').serialize()); //alert(_password); //todo::前端js資料驗證 $.ajax({ type : 'POST' , url : "{:url('checkLoginData')}", data : $('.login').serialize(), dataType: 'json', success : function(data) {// console.log(data); if(data.status == 0) { $('.error-tips').text(data.msg).show(); } else { $('.success-tips').text(data.msg).show(); setTimeout(function(){ window.location.href = "{:url('index')}"; },2000); } } }) }) })</script></body></html>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
