本篇文章介绍的内容是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() //<em style="color:transparent">本文来源[email protected]搞@^&代*@码)网9</em><strong>搞代gaodaima码</strong> 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表单提交的详细内容，更多请关注搞代码gaodaima其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：php bootstrap ajax表单提交
转载请注明原文链接：php bootstrap ajax表单提交
