# 基礎網頁
### 先看全部程式碼
```
Demo
```
### 按鈕
#### 當123這個按鈕觸發後，會呼叫到button_click這個function，按f12即可看到console的參數
```
```
### 輸入框
#### 當輸入框有參數時，觸發"測試按鈕"會呼叫text_click這個function，將輸出框的參數改得與輸入框相同
```
```
其中包含使用DOM，這邊可以好好熟悉這塊，雖然無論是呼叫Name或是Id都可以獲得正確參數，但這邊建議使用Id，有時候寫入框架的時候，會遇到框架本身會需要呼叫某元件，因此將Name給框架使用
### 警告視窗
#### 彈出視窗，可以用於debug，或是有物品輸入不正確，跳出警示
```
```
### 表格
#### 基礎布局時最常用到的
```
| First name |
Last name |
| John |
Doe |
| Jane |
Doe |
```
##
## 與後端撈值
### 由於需要大量參數，通常都會跟webapi去索取資料，這邊使用最常用的方式Jquery的AJAX
若無jq包，先載入後才能使用以下操作
```
```
### 獲取資料
```
function get_data(){
$.ajax({
type: "GET", //選擇格式(GET，POST，PUT，DELETE)
url: "/api/get_data", //換取網址
data: {},
contentType: "application/json",//指定格式(就抱持這樣即可)
success: function (Model) {
console.log(Model)
}
});
}
```
### 新增資料
```
function post_data(){
var obj = { parking_spaces_name: '第一停車場', parking_spaces_total_num: "20", longitude: "23.156", latitude: "120.123" }
var stringify_obj = JSON.stringify(obj);
$.ajax({
type: "POST",
url: "http:/x.x.x.x:7777/api/test", //API網址
data: stringify_obj, //資料包
contentType: "application/json",
success: function (msg) {
console.log(msg)
}
});
}
```
### 刪除資料
```
function delet_data(){
$.ajax({
type: "DELETE",
url: "http:/x.x.x.x:7777/api/test", //API網址,
data: {},
contentType: "application/json",
success: function (msg) {
console.log(msg)
}
});
}
```
### 更新資料
```
function put_data(){
$.ajax({
type: "PUT",
url: "http:/x.x.x.x:7777/api/test", //API網址,
data: stringify_obj,
contentType: "application/json",
success: function (Model) {
console.log(Model)
}
});
}
```
##
## 會以上這些後，即可開始製作屬於自己的網站
### 最常用的都是以上這些，剩下的就靠練習累積上去了，網站建立其實沒想像的困難
