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

标签：tst   提醒   water   用户   运行   item   username   简单   number   

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

标签：tst   提醒   water   用户   运行   item   username   简单   number   

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