分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 运营维护

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

发布时间:2023-09-06 02:05责任编辑:彭小芳关键词:jQuery前端Ajax

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插件实现图片轮播

原文地址:https://www.cnblogs.com/zhangxin123/p/9354007.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved