ajax - 介面、表單、模板引擎

来源:https://www.cnblogs.com/heymar/archive/2022/04/08/16115995.html
-Advertisement-
Play Games

1. 今天繼續ajax的一個學習，首先明確一個觀念，介面，什麼是介面，當使用ajax請求數據時，被請求的url就叫做數據介面也就是介面，註意每個介面必須有請求方式，這裡有一個介面的測試工具，postman自稱是全球最快的，反正使用起來沒多大毛病，使用這個軟體的時候有一個註意點就是在post請求的時候 ...


1.

今天繼續ajax的一個學習，首先明確一個觀念，介面，什麼是介面，當使用ajax請求數據時，被請求的url就叫做數據介面也就是介面，註意每個介面必須有請求方式，這裡有一個介面的測試工具，postman自稱是全球最快的，反正使用起來沒多大毛病，使用這個軟體的時候有一個註意點就是在post請求的時候，在body裡面輸入參數要選擇x-www-form-這個選項才行，然後是介面文檔，我們如果要調用介面，那肯定是要參照介面文檔的，裡面的包含這個介面的所有信息，一般一個介面文檔大致分為以下五個內容：

①介面名稱：能夠一眼看出這個介面是個什麼類型的介面

②url：這個不用多說，介面的調用地址

③調用方式：會給你說明這個介面要用get還是post

④參數格式：介面需傳遞的參數，每個參數必須包含參數名稱、參數類型以及參數說明

⑤響應格式：介面返回值的描述，一般包含數據名稱類型說明

2.

然後繼續看到一個普遍應用，表單，我們說的form表單一般是拿來收集數據的，然後再form裡面有一些屬性比如

action表示向何處發送表單數據，如果未指定就是當前頁面

target是在何處打開這個action，就跟a標簽的一樣

method是發送action的方式可以為get或者post預設是get，get適合用來提交一些簡單數據的，post適合提交複雜數據，我們在項目中用到post居多

enctype是規定發送表單數據前如何對數據進行編碼，一般預設是前面提到的x-www-form-urlencoded，但是這裡要註意下如果說是包含文件上傳的表單的話，這裡的值要改為multipart/form-data

繼續看到表單的同步提交，就是當你一點擊提交，頁面就會發生跳轉到action的地址上去，這樣的用戶體驗極差，而且頁面之前的數據和狀態都會丟失，怎麼來解決這一現象，我們只需要讓表單控制項負責採集數據，ajax來負責提交即可。

如果要用到ajax跟表單的一個配合，首先要知道一個事件也就是submit提交事件，然後在這裡面組織表單預設行為，因為每次一點提交就會刷新頁面，然後通過一個函數可快速獲取到表單的數據，。serialize（）使用這個有個前提就是必須為表單裡面每個元素添加name屬性就像面這樣

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="/login">
        <input type="text" name="uname">
        <input type="password" name="password">
        <input type="submit" value="提交">
    </form>
    <script src="../day01/lib/jquery.js"></script>
    <script>
        $('form').on('submit', e => {
            console.log(11);
            e.preventDefault()
            // 這裡鬧了個大烏龍，剛開始我是用的$(this)我就說為什麼一直獲取不到數據思來想去也就是這裡的問題應該，後來才知道我這裡明明用的是
            // 箭頭函數啊，箭頭函數的this是誰啊能亂用嗎？
            var str = $('form').serialize()
            console.log(str);
        })
    </script>
</body>
</html>

案例：評論列表，頁面還是才去bootstrap，vscode可安裝bs3實現快速bootstrap編程，這個案例就是通過介面先獲取評論列表的數據，渲染到html上，然後通過介面發表評論

.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../day01/lib/bootstrap.css">
    <script src="../day01/lib/jquery.js"></script>
</head>
<body style="padding: 15px;">
    
    <div class="panel panel-primary">
          <div class="panel-heading">
                <h3 class="panel-title">發表評論</h3>
          </div>
          <div class="panel-body">
              <form>
                <div>評論人</div>
                <input type="text" class="form-control" name="username">
                <div>內容</div>
                <textarea class="form-control" name="content"></textarea>
                <button type="submit" class="btn btn-primary">發表評論</button>
              </form>
          </div>
    </div>
    

    
    <ul class="list-group">
        
          
    </ul>
    <script>
        // 1.獲取評論列表數據
        function getComment() {
            $.ajax({
            type : 'get',
            url : 'http://www.liulongbin.top:3006/api/cmtlist',
            success : res => {
                console.log(res);
                if (res.status !== 200) {
                    return alert('獲取評論列表失敗')
                } else {
                    $('.list-group').empty()
                    $.each(res.data, (i, item) => {
                        $('.list-group').append(`<li class="list-group-item">
            <span class="badge" style="background-color: #f0ad4e;">評論時間：${item.time}</span>
            <span class="badge" style="background-color: #5bc0de;">評論人：${item.username}</span>
            ${item.content}
        </li>`)
                    })
                }
            }
        })
        }
        getComment()
        // 2.發表評論
            $('form').on('submit', function(e) {
                e.preventDefault()
               var str = $('form').serialize()
            //    console.log(str);
                $.post('http://www.liulongbin.top:3006/api/addcmt', str,res => {
                    if (res.status !== 201) {
                        return alert('發表評論失敗')
                    } else {
                        getComment()
                        // 2.1 提交成功後應該將表單的內容清空，這裡有個快捷方法，直接將form用她的reset方法，但是要先將jq轉為原生對象
                        $('form')[0].reset()
                    }
                })
            })
    </script>
</body>
</html>

 

3.

繼續看到一個概念叫做模板引擎，看過我之前的案例都知道，我們之前渲染ul的時候都是採取的字元串拼接的方式，對res裡面的數據進行遍歷，進行字元串拼接，而反覆的進行字元串拼接產生的影響就不多多說了吧，大量耗費記憶體資源，所以這個時候就產生了一種模板引擎就是程式員根據指定模板結構和數據，自動生成一個完整的html界面。

那麼當下比較優秀的模板引擎之一 art-template使用它有幾個步驟分為安裝、導入、定義數據、定義模板、調用template、渲染html，這裡面還有一些註意事項

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div></div>
    <script src="../day01/lib/jquery.js"></script>
    <!-- 1.首先第一步肯定是要導入下載的template模板版引擎js -->
    <script src="./template-web.js"></script>
    <script type="text/html" id="model">
        <!-- // 3.然後第三步定義模板註意也是script來書寫，然後還有一個註意點因為平時寫的script基本上是text/JavaScript意思就是script裡面解析的
        // 的是js代碼，但是這裡我們既然是html模板所以就不能憶原來那種方式來預設
-->        
 <!-- 這樣一添加，連註釋都變了 -->
 <!-- 3.1這裡還有一個註意點，在template模板裡面變數的占位符是兩個花括弧 -->
 <!-- 3.2這裡裡面的變數寫什麼就寫數據裡面的屬性名即可 -->
        <span>{{name}}</span>
    </script>
    <script>
        // 2.導入後其實在js當中就存在了一個template的函數，你一輸的話它是有關鍵字出來的
        // 第二步需要定義數據
        var data = {name : '張三'}
        // 4.定義完後繼續在這裡調用template函數
        // 4.1這個函數有兩個參數，也是為什麼前面要定義兩個東西的原因，第一個參數是模板的id(這個id添加在剛在定義模板的script中,而且並不用寫#)，第二個參數是需要渲染的對象
        // 4.2調用完後會有一個返回值註意用一個變數去存儲
        var strHtml = template('model', data)
        // 5.都結束後就是最後的渲染到HTML中
        console.log(strHtml);
        $('div').html(strHtml)
        </script>
        

</body>
</html>

關於模板引擎的使用記住上面我說的步驟就行了，在這個定義模板裡面我們用到了一個占位符｛｛｝｝這個裡面的寫法是有講究的，我們叫做標準語法

①正常輸出 可以在裡面寫{{value/obj.key/arr[0]/a ? a : b}} 這些簡單複雜數據都是可以寫在裡面的

②原義輸出 就是如果value是一個html結構那麼你要讓他在渲染的時候顯示出來就需要在前面添加一個@ {{@value}}

③條件輸出 {{if   條件}}    執行語句   {{/if}}  當然你可以在中間穿插{{else if  條件}}

④迴圈輸出 {{each 迴圈的變數}}   在這裡面有兩個值可以使用 {{$value}}當前鄉的值 {{$當前項的索引}} {{/each}}

⑤過濾器 就是當你對{{value}}的值不滿意的時候你可以{{value | filterName}} 然後再js代碼裡面template.defaults.imports.filterName = function(value) {}對這個值進行修改，註意return出這個處理結果，這個filtername是可以自定義的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div></div>
    <script src="../day01/lib/jquery.js"></script>
    <!-- 1.首先第一步肯定是要導入下載的template模板版引擎js -->
    <script src="./template-web.js"></script>
    <script type="text/html" id="model">
        <!-- // 3.然後第三步定義模板註意也是script來書寫，然後還有一個註意點因為平時寫的script基本上是text/JavaScript意思就是script裡面解析的
        // 的是js代碼，但是這裡我們既然是html模板所以就不能憶原來那種方式來預設
-->        
 <!-- 這樣一添加，連註釋都變了 -->
 <!-- 3.1這裡還有一個註意點，在template模板裡面變數的占位符是兩個花括弧 -->
 <!-- 3.2這裡裡面的變數寫什麼就寫數據裡面的屬性名即可 -->
        <span>{{name}}</span>
        <div>{{regTime | dateFormat}}</div>
    </script>
    <script>
        template.defaults.imports.dateFormat = function(date) {
            var y = date.getFullYear()
            var m = date.getMonth() + 1
            var d = date.getDate()
            return y + '-' + m + '-' + d  
        }
        // 2.導入後其實在js當中就存在了一個template的函數，你一輸的話它是有關鍵字出來的
        // 第二步需要定義數據
        var data = {name : '張三',regTime : new Date()}
        // 4.定義完後繼續在這裡調用template函數
        // 4.1這個函數有兩個參數，也是為什麼前面要定義兩個東西的原因，第一個參數是模板的id(這個id添加在剛在定義模板的script中,而且並不用寫#)，第二個參數是需要渲染的對象
        // 4.2調用完後會有一個返回值註意用一個變數去存儲
        var strHtml = template('model', data)
        // 5.都結束後就是最後的渲染到HTML中
        console.log(strHtml);
        $('div').html(strHtml)
        </script>
        

</body>
</html>

4.

我們繼續看到正則與字元串的操作，其實解釋來看一下模板引擎的一個原理，首先明確一個正則的函數。exec（）可以檢索字元串中滿足正則表達式的，有就返回，沒有就返回null。

然後是分組我們將正則裡面用括弧包起來的內容叫做一個分組，可以通過分組來提取想要的內容。

然後看到replace，其實這些包括正則前面都說過的也可以看前面的一個博文，replace就是字元串的替換方法，可以將參數裡面前面一個替換為後面一個。先說到這裡看一個代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let str = '我是{{name}}'
        let reg = /{{([a-zA-Z]+)}}/
        let regResult = reg.exec(str)
        console.log(regResult);
    </script>
</body>
</html>

多次replace

<!DOCTYPE html>
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 大數據Hadoop之——計算引擎Spark
    一、概述 Apache Spark 是專為大規模數據處理而設計的快速通用的計算引擎。Spark是UC Berkeley AMP lab (加州大學伯克利分校的AMP實驗室)所開源的類Hadoop MapReduce的通用並行框架，Spark，擁有Hadoop MapReduce所具有的優點；但不同於 ...
  • 通過.frm和.idb文件恢復mysql資料庫
    本文對該文章進行參考，地址https://baijiahao.baidu.com/s?id=1675966756498698574&wfr=spider&for=pc 現在有一個資料庫需要恢復，已經獲取到.frm和.ibd文件 這些文件即是我之前的文章2021長安杯wp - WXjzc - 博客園 ...
  • 3天時間從零到上架AppStore流程記錄
    3天時間從零到上架AppStore流程記錄 清明假期剛過去一周，我如願以償把自己想要的一個App上架了AppStore 從有idea到技術選型，從設計稿到框架開發，從提審AppStore到上架一共經歷了3天，這3天里我踩了很多坑，忙得焦頭爛額，期間發現網上很多信息都是過時的，所以本著一個總結的想法， ...
  • js中，迭代和遍歷的區別
    迭代： 啥子是迭代？可以簡單地理解為按順序訪問目標（數組、對象等）中的每一項（其實和遍歷概念沒什麼差別） 上代碼 1 var fruits = ["Apple", "Orange", "Apple", "Mango"]; 2 var a = fruits.indexOf("Apple"); 3 co ...
  • 在小程式當中渲染樹
    我們可以很輕鬆的去遍歷一棵樹，無論是廣度優先遍歷還是深度優先遍歷，那麼怎麼在小程式當中渲染一棵樹呢？ 先看一下我們深度優先遍歷的代碼 function dfs(tree) { if(!tree) return console.log(tree.value) if (tree.children) { ...
  • ajax - 終結篇jsonp，防抖節流
    今天是我們最後一天ajax的學習，這次學完總可以去vue了吧，我不信還有什麼攔路石，先不說其他的先看看今天的內容。 1. 首先是同源策略，什麼叫做同源？ 如果兩個頁面的協議、功能變數名稱、埠都相同的話，我們將這兩個頁面為同源。 那麼什麼同源策略呢？ 是瀏覽器提供的一個安全功能，如果說兩個頁面不同源，那麼A ...
  • 前端面試題整理——React考點和回答
    一、基礎使用 1、變數、表達式、class style、子元素和組件 2、if else、三元表達式、邏輯運算符 && || 3、map、key 4、bind this 5、關於event參數，react的event不是原生的，event.nativeEvent才是指向原生event，所有的事件都是 ...
  • ajax - xhr level2新特性 json等眾多內容
    1. 今天的內容其實挺多的，我們慢慢來說。首先第一個是xhr的基本使用，什麼是xhr？ XMLHTTPRequest是瀏覽器提供的js對象，可以請求伺服器上的數據資源，包括我們前面一直用的jq裡面的三個請求資源的方法都是基於xhr來封裝的。 那麼首先我們看到xhr的get請求怎麼來實現 首先要創建x ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類