使用Ajax+jQuery來實現前端收到的數據在console上顯示+簡單的主頁設計與bootstrap插件實現圖片輪播
阿新 • • 發佈:2018-07-23
value size 靠譜 實現圖 active length oot function 想要
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插件實現圖片輪播