Education/Frontend
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更新 前端_基礎HTML/README.md

Browse Source
This commit is contained in:
leo 2024-06-24 13:01:10 +08:00
parent 8b19154b7b
commit 67d658aa5d
1 changed files with 8 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
前端_基礎HTML/README.md
View File

@ -1,7 +1,6 @@
# 基礎網頁 # 基礎網頁
### 先看全部程式碼 ### 先看全部程式碼
``` ``` HTML
<!--CSS的部分--> <!--CSS的部分-->
<style> <style>
table { table {
@ -75,7 +74,7 @@
### 按鈕 ### 按鈕
#### 當123這個按鈕觸發後，會呼叫到button_click這個function，按f12即可看到console的參數 #### 當123這個按鈕觸發後，會呼叫到button_click這個function，按f12即可看到console的參數
``` ``` HTML
<!--HTML--> <!--HTML-->
<button onclick="button_click()">123</button> <button onclick="button_click()">123</button>
@ -113,7 +112,7 @@
### 表格 ### 表格
#### 基礎布局時最常用到的 #### 基礎布局時最常用到的
``` ```HTML
<table> <table>
<tr> <tr>
<th>First name</th> <th>First name</th>
@ -135,12 +134,12 @@
## 與後端撈值 ## 與後端撈值
### 由於需要大量參數，通常都會跟webapi去索取資料，這邊使用最常用的方式Jquery的AJAX ### 由於需要大量參數，通常都會跟webapi去索取資料，這邊使用最常用的方式Jquery的AJAX
若無jq包，先載入後才能使用以下操作 若無jq包，先載入後才能使用以下操作
``` ``` javascript
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script> <script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
``` ```
### 獲取資料 ### 獲取資料
``` ```javascript
function get_data(){ function get_data(){
$.ajax({ $.ajax({
type: "GET", //選擇格式(GET，POST，PUT，DELETE) type: "GET", //選擇格式(GET，POST，PUT，DELETE)
@ -154,7 +153,7 @@ function get_data(){
} }
``` ```
### 新增資料 ### 新增資料
``` ```javascript
function post_data(){ function post_data(){
var obj = { parking_spaces_name: '第一停車場', parking_spaces_total_num: "20", longitude: "23.156", latitude: "120.123" } var obj = { parking_spaces_name: '第一停車場', parking_spaces_total_num: "20", longitude: "23.156", latitude: "120.123" }
var stringify_obj = JSON.stringify(obj); var stringify_obj = JSON.stringify(obj);
@ -170,7 +169,7 @@ function post_data(){
} }
``` ```
### 刪除資料 ### 刪除資料
``` ```javascript
function delet_data(){ function delet_data(){
$.ajax({ $.ajax({
type: "DELETE", type: "DELETE",
@ -184,7 +183,7 @@ function delet_data(){
} }
``` ```
### 更新資料 ### 更新資料
``` ```javascript
function put_data(){ function put_data(){
$.ajax({ $.ajax({
type: "PUT", type: "PUT",