使用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> < ...
随机推荐
- Filter中request对象强转问题
以下为过滤器doFIlter方法的源代码: public void doFilter(ServletRequest request, ServletResponse response, FilterC ...
- 浅析vue实例的生命周期(生命周期钩子)
“每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等” ,在不同的生命周期内会经历不同的钩子函数(生命周期 ...
- JS(JavaScript)的初了解3(更新中···)
1. {} 在JS中我们把它叫代码块.如果代码块里的内容没有执行完,语句不会向下执行. 代码块是一个独立的整体.如果JS中某一条语句出错,那么就会在此终止不会向下执行. 2. 循环语句 循环,就是对一 ...
- linux基础之find
linux上文件查找工具: locate, find locate: 依赖于事先构建的索引,索引的构建在系统较为空闲时自动进行(周期性任务),手动更新数据库(updatedb) 索引构建过程需要遍历整 ...
- spring初体验 一之helloworld
今天开始学习spring,每天都会将自己学习的一些内容,或是一些总结以博客的形式记录下来,方便自己以后回顾,如果能给他人学习带来丁点的帮助那也是最好不过了.本系列博文的spring学习是基于4.0版本 ...
- 组合,多态与多态性,封装以及property装饰器介绍
一:组合: 什么是组合:组合指的是某一个对象拥有一个属性,该属性的值是另外一个类的对象. 为何要用组合:通过为某一个对象添加属性(属性的值是另外一个类的对象)的方式,可以间接地将两个类关联/整合/组合 ...
- JS模态框 简单案例
演示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8 ...
- Angular4学习笔记(四)- 依赖注入
概念 依赖注入是一种设计思想,并不是某一类语言所特有的,因此可以参考开涛大神关于学习Java语言的Spring框架时对其的解释: DI-Dependency Injection,即"依赖注入 ...
- Java原生API访问MongoDB
1.pom.xml <dependency> <groupId>org.mongodb</groupId> <artifactId>mongo-java ...
- erlang 笔记(06/03/02)
1 .同时打开的端口数量限制(Open ports) erlang:system_info(port_limit)查询 可以通过环境变量ERL_MAX_PORTS修改,或者配置erlang启动参数(标 ...