1.实现前端输入的数据在console上显示 
上一篇是解决了在前端的输入信息在cygwin上显示,这次要给前台们能看见的数据,因为数据库里插入的数据少,所以写的语句翻来覆去就那几个词,emmm···当然实现了个不靠谱的,在前台还能看见用户密码 ·····功能是这个意思hhhh 
在register也就是注册界面部分的代码:

 <script>
$('#submit').on("click ", function () { var a = $('#login input[name="username"]')[0]
if (a.value.length == 0) {
alert('邮箱账号未输入!')
return false
}
var p = $('#login input[name="password"]')[0]
if (p.value.length == 0) {
alert('密码未输入!')
return false
}
console.log(a.value)
console.log(p.value)
$.ajax({
url: '/',
type: 'POST',
data: {
username: a.value,
password: p.value
},
dataType: 'json'
})
.success(function (res) {
console.log(res) }) })
</script>

这里我还犯了非常尴尬的错误,因为HTML底子太弱,在#调用login标签的时候写完一运行发现一直request error 急的直冒汗,后来才知道要在用户输入的用户名和密码部分有id=login的标签包围起来才能去调用它,而且,还知道了div标签的属性:id和name,在console上的显示结果: 

2.注册和登录页面做完了 下面就是做个主页了,看了菜鸟教程的主页排版,用了table标签简单的布了局,之后可能还是会改,我觉得还是很丑~~ 

hhhh我就是这么有勇气
~~~ 
上面还有两块的登录和注册 明天多做一点 
3.bootstrap插件实现图片轮播

 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol> <!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div> --> <!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

把想要的图片放在文件夹里,之前的static就可以 后面粘上每个图片的路径,就可以了。 
4.每次运行都有一个ico的提醒404 看着好别扭 就找了个jpg格式的用在线转换器转成了ico格式的,之后把ico格式的图片放在static目录下再在head标签中写上下面的语句,就OK了;

<link rel="shortcut icon" href="../static/bitbug_favicon.ico"> 

今天的总结就到这里啦,还有一个前台显示在数据库上的还没弄懂,哭···

使用Ajax+jQuery来实现前端收到的数据在console上显示+简单的主页设计与bootstrap插件实现图片轮播的更多相关文章

  1. JQuery插件之图片轮播插件–slideBox

    来源:http://www.ido321.com/852.html 今天偶然发现了一个比较好用的图片轮播插件—slideBox 先看看效果:http://slidebox.sinaapp.com/ 代 ...

  2. 12款经典的白富美型—jquery图片轮播插件—前端开发必备

    图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...

  3. Nivo Slider - 世界上最棒的 jQuery 图片轮播插件

    Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如 ...

  4. jQuery个性化图片轮播效果

    jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...

  5. PgwSlideshow-基于Jquery的图片轮播插件

    0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...

  6. Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示

    用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...

  7. Unslider Web前端框架之图片轮播

    前端框架,前端组件,前端库,都是一个意思,能看源码. 最近做H5小游戏,用到了图片轮播的组件,而且要求支持移动端触屏滑动.一开始用的是nivo slider,但是对大小不一样的图不支持box 的参数设 ...

  8. html css+div+jquery实现图片轮播

    一直想自己动手做一个图片轮播的控件,查查网上的资料大多引用已经做好的组件,其原理算法不是很清楚,于是自己用jquery写了一个.先看下效果图: 主要界面实现思路如下: 1.新建一个div宽度为100% ...

  9. [转]jQuery实现图片轮播效果,jQuery实现焦点新闻

    本文转自:http://blog.csdn.net/tsyj810883979/article/details/8986157 效果图: 实现代码: <!DOCTYPE html> < ...

随机推荐

  1. 虚拟机下Linux安装jdk

    1.利用共享文件夹复制本地硬盘下(H:/share)的压缩包到指定目录 cp jdk-8u161-linux-x64.tar.gz /soft/jdk 2.进入/soft/jdk目录下,解压jdk到当 ...

  2. Java连接数据库 #06# SQL与代码分离(精化版本)

    索引 DAO层依赖关系草图 应用示例 接Java连接数据库#05#,对代码进行改进. DAO层依赖关系草图 应用示例(只需3步!) 1.首先定义接口类: package org.sample.shop ...

  3. [C++ Primer Plus] 第4章、复合类型(一)程序清单——指针new和delete

    程序清单4.1 #include<iostream> using namespace std; void main(){ ]; yams[]=; yams[]=; yams[]=; ]={ ...

  4. Oracle 实例名/服务名 请问SID和Service_Name有什么区别啊?

    可以简单的这样理解:一个公司比喻成一台服务器,数据库是这个公司中的一个部门. 1.SID:一个数据库可以有多个实例(如RAC),SID是用来标识这个数据库内部每个实例的名字, 就好像一个部门里,每个人 ...

  5. 3、基于多播、安全认证的corosync集群(VIP、Httpd、Filesystem)

    Messaging Layer --> CRM --> RA systemd:/usr/lib/systemd/system     systemd有一个特性,即便一个服务开机启动,但是在 ...

  6. hduoj 1002 A + B Problem II

    原题链接:http://acm.hdu.edu.cn/showproblem.php?pid=1002 题目描述如下: A + B Problem II Time Limit: 2000/1000 M ...

  7. 从实验室走向世界:HSP90抑制剂,一种新的癌症药物

    热休克蛋白90(HSP90)是细胞内一种普遍存在的.十分保守的以及有高度活性的蛋白质,它在肿瘤细胞内的含量要比正常细胞多.作为一种分子伴侣,HSP90协助不同种类的癌蛋白(即HSP90的服务蛋白)进行 ...

  8. Pandas 基础(5) - 处理缺失的数据

    首先, 读入一个 csv 文件: import pandas as pd df = pd.read_csv('/Users/rachel/Sites/pandas/py/pandas/5_handli ...

  9. 智能合约 helloworld

    windows 平台 所以直接使用Remix在线编译环境 新建hello.sol文件 编辑如下 Remix 右边侧栏 setting 选择合适的编译器版本 这里选择 0.4.19 文件中输入如下内容  ...

  10. MVC 深入讲解Routing _路由规则【八】

    一.客户端=>控制器 在项目中我们引用了system.web.routing, 如果第一个匹配成功了,那么后面的都不会再匹配. 1. routing的作用: 确定colltroller,确定ac ...