php bootstrap ajax表单提交
本篇文章介绍的内容是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>相关推荐：
以上是php bootstrap ajax表单提交的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
bootstrap垂直居中怎么弄
Apr 07, 2025 pm 03:21 PM
使用 Bootstrap 实现垂直居中：flexbox 法：使用 d-flex、justify-content-center 和 align-items-center 类，将元素置于 flexbox 容器内。align-items-center 类法：对于不支持 flexbox 的浏览器，使用 align-items-center 类，前提是父元素具有已定义的高度。
bootstrap按钮怎么用
Apr 07, 2025 pm 03:09 PM
如何使用 Bootstrap 按钮？引入 Bootstrap CSS创建按钮元素并添加 Bootstrap 按钮类添加按钮文本
bootstrap搜索栏怎么获取
Apr 07, 2025 pm 03:33 PM
如何使用 Bootstrap 获取搜索栏的值：确定搜索栏的 ID 或名称。使用 JavaScript 获取 DOM 元素。获取元素的值。执行所需的操作。
bootstrap怎么调整大小
Apr 07, 2025 pm 03:18 PM
要调整 Bootstrap 中元素大小，可以使用尺寸类，具体包括：调整宽度：.col-、.w-、.mw-调整高度：.h-、.min-h-、.max-h-
bootstrap怎么写分割线
Apr 07, 2025 pm 03:12 PM
创建 Bootstrap 分割线有两种方法：使用 标签，可创建水平分割线。使用 CSS border 属性，可创建自定义样式的分割线。
bootstrap怎么看日期
Apr 07, 2025 pm 03:03 PM
答案：可以使用 Bootstrap 的日期选择器组件在页面中查看日期。步骤：引入 Bootstrap 框架。在 HTML 中创建日期选择器输入框。Bootstrap 将自动为选择器添加样式。使用 JavaScript 获取选定的日期。
bootstrap怎么设置框架
Apr 07, 2025 pm 03:27 PM
要设置 Bootstrap 框架，需要按照以下步骤：1. 通过 CDN 引用 Bootstrap 文件；2. 下载文件并将其托管在自己的服务器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根据需要编译 Sass/Less；5. 导入定制文件（可选）。设置完成后，即可使用 Bootstrap 的网格系统、组件和样式创建响应式网站和应用程序。
bootstrap怎么插入图片
Apr 07, 2025 pm 03:30 PM
在 Bootstrap 中插入图片有以下几种方法：直接插入图片，使用 HTML 的 img 标签。使用 Bootstrap 图像组件，可以提供响应式图片和更多样式。设置图片大小，使用 img-fluid 类可以使图片自适应。设置边框，使用 img-bordered 类。设置圆角，使用 img-rounded 类。设置阴影，使用 shadow 类。调整图片大小和位置，使用 CSS 样式。使用背景图片，使用 background-image CSS 属性。
