更新 前端_基礎HTML/README.md
This commit is contained in:
parent
8b19154b7b
commit
67d658aa5d
@ -1,7 +1,6 @@
|
||||
|
||||
# 基礎網頁
|
||||
### 先看全部程式碼
|
||||
```
|
||||
``` HTML
|
||||
<!--CSS的部分-->
|
||||
<style>
|
||||
table {
|
||||
@ -75,7 +74,7 @@
|
||||
|
||||
### 按鈕
|
||||
#### 當123這個按鈕觸發後,會呼叫到button_click這個function,按f12即可看到console的參數
|
||||
```
|
||||
``` HTML
|
||||
<!--HTML-->
|
||||
<button onclick="button_click()">123</button>
|
||||
|
||||
@ -113,7 +112,7 @@
|
||||
|
||||
### 表格
|
||||
#### 基礎布局時最常用到的
|
||||
```
|
||||
```HTML
|
||||
<table>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
@ -135,12 +134,12 @@
|
||||
## 與後端撈值
|
||||
### 由於需要大量參數,通常都會跟webapi去索取資料,這邊使用最常用的方式Jquery的AJAX
|
||||
若無jq包,先載入後才能使用以下操作
|
||||
```
|
||||
``` javascript
|
||||
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
|
||||
```
|
||||
|
||||
### 獲取資料
|
||||
```
|
||||
```javascript
|
||||
function get_data(){
|
||||
$.ajax({
|
||||
type: "GET", //選擇格式(GET,POST,PUT,DELETE)
|
||||
@ -154,7 +153,7 @@ function get_data(){
|
||||
}
|
||||
```
|
||||
### 新增資料
|
||||
```
|
||||
```javascript
|
||||
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);
|
||||
@ -170,7 +169,7 @@ function post_data(){
|
||||
}
|
||||
```
|
||||
### 刪除資料
|
||||
```
|
||||
```javascript
|
||||
function delet_data(){
|
||||
$.ajax({
|
||||
type: "DELETE",
|
||||
@ -184,7 +183,7 @@ function delet_data(){
|
||||
}
|
||||
```
|
||||
### 更新資料
|
||||
```
|
||||
```javascript
|
||||
function put_data(){
|
||||
$.ajax({
|
||||
type: "PUT",
|
||||
|
Loading…
Reference in New Issue
Block a user