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的更多相关文章

  1. ajax+bootstrap做弹窗

    建页面,引入bootstrap弹窗 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  2. DataTables ajax + bootstrap 分页/搜索/排序/常见问题

    最近学校的网站建设需要,尝试使用了下Jquery dataTables控件,接触过C#的人都知道,C#中也含有一个DataTable,但它和我们今天讨论的东西无关 我使用的是官网最新的DataTabl ...

  3. vue+ajax+bootstrap+python实现增删改

    http://www.cnblogs.com/xwwin/p/5816527.html script src= " http://code.jquery.com/jquery.min.js ...

  4. Jquery+Ajax+Bootstrap Paginator实现分页的拼接

    效果图如下 jsp页面引入bootstrap样式,jquery和bootstrap-paginator.js <link type="text/css" rel=" ...

  5. 用最基本的EF+MVC+JQ+AJAX+bootstrap实现权限管理的简单实例 之登陆和操作权限

    先来一堆关于上篇文章的废话(不喜者点此隐藏) 今天把博客加了个小功能,就是点标题可以隐藏或展示相关内容,做法很傻,就是引用了bootstrap的两个css类和全部的js文件,其实这样的小功能完全应该自 ...

  6. MVC 5 Ajax + bootstrap+ handle bar 例: 实现service 状态

    Js Script <script src="../../Scripts/handlebars-v1.3.0.js"></script> <scrip ...

  7. php ajax bootstrap多文件上传图片预览，ajax上传文件

    <form enctype="multipart/form-data" id="upForm"> <label class="btn ...

  8. 30 个惊艳的 Bootstrap 扩展插件

    Bootstrap 是快速开发Web应用程序的前端工具包.它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等. Boo ...

  9. 20 个免费的 Bootstrap 的后台管理模板

    之前 OSC 曾经发过多个后台管理界面模板的推荐,例如: 50 个漂亮的后台管理界面模板 25 个精美的后台管理界面模板和布局 分享 6 套超酷的后台管理员界面网站模板 30个优秀的后台管理界面设计案 ...

随机推荐

  1. 探索未知种族之osg类生物---渲染遍历之Renderer::draw()简介

    我们今天进入上一节的遗留问题Renderer::draw()的探究. 1.从_drawQueue中取出其中一个sceneView对象.SceneView是对scene和view类的封装,通过他可以方便 ...

  2. MybatisMapper 动态映射（增删改查）

    //接口内容以及注意事项 package cn.jy.mybatis.mapper; import java.util.List; import cn.jy.mybatis.pojo.User; pu ...

  3. super()调用父类构造方法

    super()表示调用父类中的构造方法 1.子类继承父类,子类的构造方法的第一行,系统会默认编写super(),在调用子类的构造方法时,先调用父类的无参数构造方法 2.如果父类中只有有参数构造方法,那 ...

  4. Listener随笔

    [1]监听器简介   > Listener是JavaWeb中三大组件之一.Servlet.Filter.Listener   > 三大组件都有的共同特点,都需要实现一个接口,并在web.x ...

  5. .net数据库实现Excel的导入与导出

    .net数据库实现Excel的导入与导出 参考路径:https://www.cnblogs.com/splendidme/archive/2012/01/05/2313314.html 1.defau ...

  6. mac ssh,mac xshell,xshell替代,ssh客户端,ssh工具,远程桌面加速

    下载地址 Windows版下载地址:http://www.hostbuf.com/downloads/finalshell_install.exe Mac版,Linux版安装及教程:http://ww ...

  7. maven学习四：maven集成jetty插件发布web项目 标签： maven

    http://blog.csdn.net/u014079773/article/details/50167833

  8. django学习,session与cookie

    Cookies,某些网站为了辨别用户身份.进行session跟踪而储存在用户本地终端上的数据(通常经过加密).Cookie最早是网景公司的前雇员Lou Montulli在1993年3月的发明.Cook ...

  9. vue.js报错:Module build failed: Error: No parser and no file path given, couldn't infer a parser.

    ERROR Failed to compile with 2 errors 12:00:33 error in ./src/App.vue Module build failed: Error: No ...

  10. Dom事件流、冒泡、捕获

    Dom事件流 dom的结构是一个倒立的树状结构.当一个html元素触发事件时,事件会在dom的根节点和触发事件的元素节点之间传播,中间的节点都会收到该事件. 捕获:div元素触发事件时,事件先从根节点 ...