本篇文章介绍的内容是php bootstrap ajax表单提交 ，现在分享给大家，有需要的朋友可以参考一下
直接贴代码：
<!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>
相关推荐：
bootstrap教程
php实现各种经典算法详解
以上就是php bootstrap ajax表单提交的详细内容。