使用Ajax+jQuery来实现前端收到的数据在console上显示+简单的主页设计与bootstrap插件实现图片轮播
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插件实现图片轮播的更多相关文章
- JQuery插件之图片轮播插件–slideBox
来源:http://www.ido321.com/852.html 今天偶然发现了一个比较好用的图片轮播插件—slideBox 先看看效果:http://slidebox.sinaapp.com/ 代 ...
- 12款经典的白富美型—jquery图片轮播插件—前端开发必备
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
- Nivo Slider - 世界上最棒的 jQuery 图片轮播插件
Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如 ...
- jQuery个性化图片轮播效果
jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...
- PgwSlideshow-基于Jquery的图片轮播插件
0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...
- Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示
用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...
- Unslider Web前端框架之图片轮播
前端框架,前端组件,前端库,都是一个意思,能看源码. 最近做H5小游戏,用到了图片轮播的组件,而且要求支持移动端触屏滑动.一开始用的是nivo slider,但是对大小不一样的图不支持box 的参数设 ...
- html css+div+jquery实现图片轮播
一直想自己动手做一个图片轮播的控件,查查网上的资料大多引用已经做好的组件,其原理算法不是很清楚,于是自己用jquery写了一个.先看下效果图: 主要界面实现思路如下: 1.新建一个div宽度为100% ...
- [转]jQuery实现图片轮播效果,jQuery实现焦点新闻
本文转自:http://blog.csdn.net/tsyj810883979/article/details/8986157 效果图: 实现代码: <!DOCTYPE html> < ...
随机推荐
- Linux 简单文本处理
1.创建文件加“.”带表隐藏文件 2.password文件内“user:x:501:501::/home/lishiming:/bin/bash”含义: 用户名:密码控位键:UID:GID:用户解 ...
- 【题解】Luogu P2057 [SHOI2007]善意的投票
原题传送门 我们一眼就能看出这是一道最小割的题 我们设不睡觉这种状态为S,睡觉这种状态为T 对于每个人,如果不想睡觉,就从S向这个人连流量为1的边,否则,就从这个人向T连流量为1的边 对于每一对朋友, ...
- 剑指offer(24)二叉树中和为某一值的路径
题目描述 输入一颗二叉树和一个整数,打印出二叉树中结点值的和为输入整数的所有路径.路径定义为从树的根结点开始往下一直到叶结点所经过的结点形成一条路径 题目分析 这题基本上一看就知道应该深度遍历整个树, ...
- 剑指offer(47)求1+2+3+...+n
题目描述 求1+2+3+...+n,要求不能使用乘除法.for.while.if.else.switch.case等关键字及条件判断语句(A?B:C). 题目分析 不能用乘除也就不能用公示了,并且不能 ...
- bzoj 4358 Permu - 莫队算法 - 链表
题目传送门 需要高级权限的传送门 题目大意 给定一个全排列,询问一个区间内的值域连续的一段的长度的最大值. 考虑使用莫队算法. 每次插入一个数$x$,对值域的影响可以分成4种情况: $x - 1$, ...
- Delphi10.2 Tokyo试用(1)
最近下载了Delphi10.2 Tokyo,试用了一下,感觉不错,尤其是针对Linux的开发,总算出来了,可以考虑把原来服务器重新编译成RedHat上使用了,免得客户一天到晚喊Windows不安全,要 ...
- TypeError: Cannot read property 'length' of null
本文为博主原创,未经允许不得转载: 异常展示: [Vue warn]: Error in getter for watcher "filterAndSortData": " ...
- zookeeper之 zkServer.sh命令、zkCli.sh命令、四字命令
一.zkServer.sh 1.查看 zkServer.sh 帮助信息[root@bigdata05 bin]# ./zkServer.sh helpZooKeeper JMX enabled by ...
- Spark数据分析-记录关联问题
1. 问题描述 记录关联问题(Record Linkage):有大量从一个或多个源系统来的记录,其中有些记录可能代表了相同的基础实体. 每个实体有若干个属性,比如姓名.地址.生日.我们需要根据这些属性 ...
- linux存储管理之磁盘配额
磁盘配额 1 相关命令:quota.quotacheck.edquota.quotaon.quotaoffquota要使用的命令有两种:一种用于查询功能,包括quota.quotacheck.quo ...