ajax&bootstrap
1.ajax
后台
# 通过flask框架搭建后台
from flask import flask,request
# 创建一个服务器对象
app = Flask(__name__)
# 解决ajax请求跨域问题
from flask_cors import CORS
CORS(app,supports_credentials = True) # ??????????
# 设置处理请求的功能(路由rote --> 接口)
# 设置一个主页路由器，对应一个处理主页的功能方法，返回主页信息
@app.route('/')
def home_action():
return '<h1 style="color:red">home page</h1>'
# 为ajax登录请求配置一个处理登录的功能
@app.route('/login')
def login_action():
# 拿到前台数据，进行数据判断
user = request.args['user'] # 'user'是规定前台需要传入的数据的key
pwd = request.args['pwd']
if user == 'abc' and pwd == '123':
return 'login success'
return 'login fail'
# 启动服务(改文件作为自启文件)
if __name__ == '__main__':
app.run(port = '8888')- 前台
<!--form表单前后台交互-->
<h1>请先登录</h1>
<form class='fm'>
<input id = 'user' type='text' name = 'user' placeholder = '请输入用户名'>
<input id = 'user' type='text' name = 'pwd' placeholder = '请输入密码'>
<input class = 'sbm' type='submit' value='提交'
</form>// 取消表单默认事件
$('.fm').submit(function(){return false;})
// 表单提交完成的是ajax请求
$('.sbm').click(function(){
// 前提:准备发送的数据
var user = $('#user').val();
var pwd = $('#pwd').val();
// 1.通过ajax发送请求,获得后台响应结果
// 2.用得到的结果来局部渲染页面内容
$.ajax({
url:'http://127.0.0.1:8888/login',
data:{user:user,pwd:pwd},
success:function(data){doSomething(data);}
})
})
// 处理数据后，的功能
function doSomething(data){
$('h1').text(datae)
}2.bootstrap
引入
<head>
<!-- 在head标签上部导入bs的css -->
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<!-- 再导入自定义修改的css -->
<link rel="stylesheet" href="css/my.css">
</head>
<body>
<!-- html代码结构 -->
...
<!--bs的脚本依赖于jq, 所以要提前导入jq-->
<!--脚本逻辑尽量放在html结构之下-->
<script src="js/jquery-3.3.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</body>- 容器
<!--总结; 两种容器(container | container-fluid)默认有左右15px padding-->
<!--固定宽度容器(采用响应式布局)-->
<div class="container">
<!-- 行: .row, 可以取消容器的默认左右15px padding-->
<div class="row">
<h1 class="bg-info">标题</h1>
</div>
</div>
<!--动态宽度布局(采用流式布局)-->
<div class="container-fluid">
<div class="row">
<h1 class="bg-info">标题</h1>
</div>
</div>ajax&bootstrap的更多相关文章
- ajax+bootstrap做弹窗
建页面,引入bootstrap弹窗 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- DataTables ajax + bootstrap 分页/搜索/排序/常见问题
最近学校的网站建设需要,尝试使用了下Jquery dataTables控件,接触过C#的人都知道,C#中也含有一个DataTable,但它和我们今天讨论的东西无关 我使用的是官网最新的DataTabl ...
- vue+ajax+bootstrap+python实现增删改
http://www.cnblogs.com/xwwin/p/5816527.html script src= " http://code.jquery.com/jquery.min.js ...
- Jquery+Ajax+Bootstrap Paginator实现分页的拼接
效果图如下 jsp页面引入bootstrap样式,jquery和bootstrap-paginator.js <link type="text/css" rel=" ...
- 用最基本的EF+MVC+JQ+AJAX+bootstrap实现权限管理的简单实例 之登陆和操作权限
先来一堆关于上篇文章的废话(不喜者点此隐藏) 今天把博客加了个小功能,就是点标题可以隐藏或展示相关内容,做法很傻,就是引用了bootstrap的两个css类和全部的js文件,其实这样的小功能完全应该自 ...
- MVC 5 Ajax + bootstrap+ handle bar 例: 实现service 状态
Js Script <script src="../../Scripts/handlebars-v1.3.0.js"></script> <scrip ...
- php ajax bootstrap多文件上传图片预览，ajax上传文件
<form enctype="multipart/form-data" id="upForm"> <label class="btn ...
- 30 个惊艳的 Bootstrap 扩展插件
Bootstrap 是快速开发Web应用程序的前端工具包.它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等. Boo ...
- 20 个免费的 Bootstrap 的后台管理模板
之前 OSC 曾经发过多个后台管理界面模板的推荐,例如: 50 个漂亮的后台管理界面模板 25 个精美的后台管理界面模板和布局 分享 6 套超酷的后台管理员界面网站模板 30个优秀的后台管理界面设计案 ...
随机推荐
- Eclipse 新建 Maven web 项目
File --> New --> Maven Project --> 选择存放路径 --> 选择骨架 --> 输入Maven坐标 --> 初步成型,下面还要配置 1 ...
- PHP不借助第三个变量交换值
总结一下: //方法一: $a = "abc"; $b= "def"; $a = $a^$b; $b = $b^$a; $a = $a^$b; //方法二: l ...
- nodeJS接入微信公众平台开发
一.写在前面的话 Node.js是一个开放源代码.跨平台的JavaScript语言运行环境,采用Google开发的V8运行代码,使用事件驱动.非阻塞和异步输入输出模型等技术来提高性能,可优化应用程 ...
- centos 7.3 安装配置python3.6.1
1.先安装一些我遇到的依赖问题(如果有依赖问题按提示安装): yum install xz gcc zlib zlib-devel 2.官网下载源码包 地址:https://www.python.or ...
- Linux无法正常连接服务器，无法连接上 127.0.0.1:8989 (127.0.0.1)。 - connect (111: 拒绝连接)
最近修改了下电脑的hosts文件,电脑就突然不能连接下载更新的服务器了,但是浏览器还能正常上网,这让我很是难受啊!!! 错误现象如下: 错误:1 http://archive.ubuntukylin. ...
- 字典 Dictionary
字典 Dictionary {Key-Value} 1.字典是无序的,没有下标(因为有key,取值直接用key值) Key尽量不要用中文编写,以防止编码不同导致取不出来 2.字典常用方法: 查找: ① ...
- 使用kbmMWConfiguration 让 kbmmw smartservice 更聪明
以前的文章介绍了 很多 kbmmw smartservice 的使用,尤其是 rest 服务,所有的的配置都是通过 开发时写编码实现的,这样就可能导致,针对不同的应用环境,我们要重新编译代码,当然也可 ...
- 做seo应该如何选择网站程序？
网站程序:(具体网站案例,可在官网看到)绝大多数情况下,我们将做的网站有以下几种1.个人博客,推荐的程序Wordpress(php的程序,比较强大),Zblog(asp的程序,比较简单)2.门户网站( ...
- 织梦dedecms后台文章搜索关键字，关键字包含文章内容的代码修改
1.织梦dedecms后台文章搜索功能在哪里找?织梦dedecms后台-->核心-->常用操作-->所有档案列表(或)织梦dedecms后台-->核心-->内容管理--& ...
- SAS 函数
SAS 函数 SAS函数是编程语言的一个组件,可接受参数.执行计算或进行其他操作并返回值.返回值是字符型或数值型的结果,可用于赋值语句或 表达式中.SAS包含很多函数,也可以自定义函数.在BASE S ...