使用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> < ...
随机推荐
- Shell 脚本格式注意事项
if 条件判断格式 if [ ! -f file.txt ];then cmd else cmd fi 注1:! 代表非.不存在文件就成功. 注2:再有参数 变量 需要 [] 阔起 1 运算书写写格式 ...
- [c/c++] programming之路(18)、动态分配内存malloc
一.图解堆栈 #include<stdio.h> #include<stdlib.h> #include<Windows.h> void main0(){ **]; ...
- _quick_response
在线答题,抢答 `question` 题库 `correctAnswer` 正确答案(A,B,C,D) `answerA` 选项显示 `answerB`选项显示 `answerC` 选项显示 `ans ...
- Ubuntu 14 如何解压 .zip、.rar 文件
.zip 和 .rar 是Windows下常用的压缩文件,在Ubuntu中如何解压. [解压.zip文件] Ubuntu中貌似已经安装了unzip软件,解压命令如下: unzip ./FileName ...
- C/C++.【转】解析URL的转义字符百分比(%)字符串
1.来自:[HTTP]_[C_C++]_[解析URL的转义字符百分比字符串] - 猪一戒 - 博客园.html(http://www.cnblogs.com/zhuyijie/p/6465303.ht ...
- Linux wc -l 统计文件行数存在的问题
1.使用这种方式效率较低,而且不注意可能出现错误 find . -name "*.pc" |xargs wc -l 直接查看 total 不是正确的值. 原因: 这种方式存在一个 ...
- Vnpy二次开发应用所需图标
在针对Vnpy二次开发时,很多窗口中需要使用到“小图标” 给大家分享一个UI的专业图标网,上面资源齐全. https://www.iconfont.cn/collections?personal=1
- phpmyadmin-您可能正在上传很大的文件,请参考文档来寻找解决方法
phpmyadmin-您可能正在上传很大的文件,请参考文档来寻找解决方法 实这个很简单的只要更改php.ini里三个配置即可.(见下面加粗部分,改成你自己的需求即可) ; Maximum allo ...
- java.lang.ClassCastException: class com.sun.jersey.core.impl.provider.entity.XMLJAXBElementProvider$Text
Text的包导错了 不是:import com.sun.jersey.core.impl.provider.entity.XMLJAXBElementProvider.Text; 而是:import ...
- mysql linux安装教程
1.下载 下载地址:http://dev.mysql.com/downloads/mysql/5.6.html#downloads 下载版本:我这里选择的5.6.33,通用版,linux下64位 也可 ...