1. 程式人生 > >五滴水:使用Ajax+jQuery來實現前端收到的資料在console上顯示+簡單的主頁設計與bootstrap外掛實現圖片輪播

五滴水:使用Ajax+jQuery來實現前端收到的資料在console上顯示+簡單的主頁設計與bootstrap外掛實現圖片輪播

前言嘚吧嘚
三天沒更博了,嘻嘻嘻打自己:3 最近的狀態比開始的時候好太多,能看懂cygwin和console上報的錯誤了,知道到底是縮進出了問題還是我的程式碼邏輯不完整了,找資源也知道哪裡是我要的,也可以找到想要的了·······慢慢來,給自己立個flag :每天刷一遍菜鳥教程嘻嘻嘻
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外掛實現圖片

前言嘚吧嘚 三天沒更博了,嘻嘻嘻打自己:3 最近的狀態比開始的時候好太多,能看懂cygwin和console上報的錯誤了,知道到底是縮進出了問題還是我的程式碼邏輯不完整了,找資源也知道哪裡是我要的,也可以找到想要的了·······慢慢來,給自己立個flag :

使用Ajax+jQuery實現前端收到的數據在console顯示+簡單主頁設計bootstrap插件實現圖片

value size 靠譜 實現圖 active length oot function 想要 1.實現前端輸入的數據在console上顯示 上一篇是解決了在前端的輸入信息在cygwin上顯示,這次要給前臺們能看見的數據,因為數據庫裏插入的數據少,所以寫的語句翻來覆去就那幾

swipe.js實現支援手拔自動切換的圖片

一、Html程式碼如下: <div id='mySwipe' style='max-width:500px;margin:0 auto' class='swipe'> <div class='swipe-wrap'> <li style="no-repeat

基於Bootstrap框架的圖片實現

       前面介紹過原生的javascript實現圖片輪播效果:http://blog.csdn.net/shoushou71/article/details/51628678,本節通過Bootstrap框架實現圖片輪播效果。 1.Bootstrap介紹     Bo

Vue.js學習(vue+axios+php+mysql 實現前端介面資料動態更新

網上參考了很多例子,都沒有關於vue+php實現前後端的例子,後來自己總結了一個,希望大家批評指正。 vue實現動態資料的方式主要有vue-resource和axios,但是從Vue2.0開始,已經不

Maven專案:Spring MVC + Ajax + Json + RequestBodyPOST後臺伺服器接收前端JSON資料並註解到POJO內

最近一直看Java伺服器端開發,用的架構在Maven專案內的Web後臺伺服器,用了兩天時間明白了怎麼整合這些框架,很累找了很多資料,尤其在整個過程中Eclipse還時不時崩潰,正常的jsp檔案都打不開,需要重新啟動編譯器,另外還有不斷的除錯。由於本人對於前端不太

滴水Hibernate(六)之Hibernate關聯對映註解

如上是我們本篇部落格裡要一起學習的內容 在學習具體的關係對映註解之前呢,我們先來回顧一下資料庫當中實體與實體之間究竟有哪些對映關係: 實體與實體之間的對映關係大體分為三種情況: 1.一對一:一個公民對應一個身份證號碼,反過來也是成立的; 2.一對多(

使用JQuery實現圖片效果

left 簡述 flow href 集合 jpg -i round 輪播 【效果如圖】 【原理簡述】 這裏大概說一下整個流程: 1,將除了第一張以外的圖片全部隱藏, 2,獲取第一張圖片的alt信息顯示在信息欄,並添加點擊事件 3,為4個按鈕添加點擊偵聽,點擊相應的按鈕,用

分別使用js和JQuery實現html首頁圖片以及廣告圖片定時彈出

主要使用setInterval方法設定更新週期,clearInterval清除週期。(如果不清除會一直週期迴圈執行下去,而setTimeout只是在指定時間後執行一次,這裡完全可以替換為setTimeout方法)   一、js首頁輪播 第一步:確定事件(onload)併為

潭州課堂25班Ph201805201 django 專案 第二十二課 文章主頁 新聞列表頁面滾動載入,圖後臺實現 (課堂筆記)

新建static/js/news/index.js檔案 ,主要用於向後臺傳送請求, // 新建static/js/news/index.js檔案 $(function () { // 新聞列表功能 let $newsLi = $(".news-nav ul li"); let iPa

使用jQuery快速高效製作網頁互動特效 第章 上機練習四 製作廣告圖片切換效果

輪播應有的功能大致都有,分享給一些在學的朋友參考學習。 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title> 廣告圖片輪播切

jquery實現圖片圖效果

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding:0; margin:0; list-style:n

Jquery 圖片實現原理總結

以前要做圖片輪播效果的時候,總是在網上找一段jquery的複製貼上進去,只索取不奉獻,今個就把我對這個的實現原理講解一下。 首先說下,我在網上找的例子全是用的UL 實現,其實大可不必,只要是能包含img標籤的HTML標籤都可以做輪播效果。利用jquery的淡入淡出函式(fadeIn和fadeOut)。廢

jquery實現圖片

CSS樣式: *{ margin: 0; padding: 0; } ul{ list-style:none; } .slideShow{ width: 620px; height: 700px; /*其實就是圖片的高度*/

jquery面向物件實現簡單圖片,還能學習一下閉包哦

<!DOCTYPE html> <html> <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   <title

iOS開發項目實戰——Swift實現圖片瀏覽

0.10 上網 timer類 開發項目 cas hub string obj tle 近期開始開發一個新的iOS應用,自己決定使用Swift。進行了幾天之後,發現了一個非常嚴峻的問題。那就是無論是書籍,還是網絡資源,關於Swift的實在是太少了,隨便一

實現廣告圖片效果-AndroidImageSild

left anim wpa img listener pri des indicator ext 在AS中的使用: 1.在build文件中進行配置 compile ‘com.squareup.picasso:picasso:2.3.2‘ comp

JS實例之圖片實現圖片播放效果

utf length pla get eight code func nsh java 1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&g

CSS/HTML/JS實現圖片

class fff 瀏覽器 tro back 全局 實現圖 func 原理 實現原理 將點擊的a標簽的href屬性值賦給img標簽的src屬性,這樣有個好處,就是如果瀏覽器不支持js的話,點擊a標簽也可跳轉到圖片地址看到圖片,不會影響內容的呈現 註:需要導入jquery

Android零基礎入門第49節AdapterViewFlipper圖片

討論 表格 微信 列表 自動播放 clas padding spa absolute 上一期學習了ExpandableListView的使用,你已經掌握了嗎?本期開始學習AdapterViewFilpper的使用。 一、認識AdapterViewFilp