zoukankan      html  css  js  c++  java
  • 使用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"> 

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

  • 相关阅读:
    selenium之鼠标事件
    selenium+python 自动化
    软件工程课堂训练——有多少个1?
    软件工程课堂训练———找三个小水王
    软件工程课堂训练——找水王
    课堂训练——电梯调度
    软件工程课堂训练————最便宜购书方案
    软件工程课堂训练——结对开发之环状二维数组
    软件工程课堂训练——结对开发之环数组最大和
    软件工程课堂训练——数组之大数溢出
  • 原文地址:https://www.cnblogs.com/zhangxin123/p/9354007.html
Copyright © 2011-2022 走看看