目錄

一、Form表單

1.1 標簽屬性

1.1.1 action

1.1.2 target

1.1.3 method

1.1.4 enctype

1.2 表單的同步提交及缺點

1.3 通過Ajax提交表單資料

1.3.1 監聽表單提交事件

1.3.2 阻止表單的默認行為

1.4 serialize()方法

二、模板引擎

2.1 art-template使用步驟

2.2 art-template標準語法

2.3 正則與字串操作

一、Form表單

在網頁中主要負責資料采集功能，由表單標簽、表單域、表單按鈕組成，

1.1 標簽屬性

用來規定如何把采集到的資料發送到服務器，

1.1.1 action

action屬性值應該是后端提供的一個URL地址，

• 當<form>表單在未指定action屬性值得情況下，action的默認值為當前頁面的URL地址，
• 當提交表單后，頁面會立即跳轉到action屬性指定的URL地址，

1.1.2 target

1.1.3 method

規定以何種方式把把表單資料提交到action URL，

• get ：適合提交少量的簡單的資料，url地址中會顯示資料
• post ：適合提交大量復雜或包含檔案上傳的資料,url地址中不會顯示資料，安全性高

1.1.4 enctype

規定在發送表單資料之前如何對資料進行編碼，

1.2 表單的同步提交及缺點

表單的同步提交：通過點擊submut按鈕，觸發表單提交的操作，從而使頁面跳轉到aciton URL的行為，

缺點:整個頁面會發生跳轉，跳轉到action URL所指向的地址，用戶體驗感差，頁面之前的狀態和資料會丟失，

解決方案：表單只負責采集資料，Ajax負責將資料提交到服務器，

1.3 通過Ajax提交表單資料

1.3.1 監聽表單提交事件

$('表單名').submit(function (e) {}；

$('表單名').on('submit', function(e) {}；

1.3.2 阻止表單的默認行為

e.preventDefault();

1.4 serialize()方法

格式：$(selector).serialize();

快速獲取表單資料;必須為每個表單元素添加name屬性

案例展示

效果圖：

代碼展示：（html+js）

<!-- 評論面板 -->
<div class="panel panel-primary">
     <div class="panel-heading">
          <h3 class="panel-title">發表評論</h3>
     </div>
     <form class="panel-body" id="formAddCmt">
          <div>評論人：</div>
          <input type="text" class="form-control" name="username" autocomplete="off" />
          <div>評論內容：</div>
          <textarea class="form-control" name="content"></textarea>
          <button type="submit" class="btn btn-primary">發表評論</button>
     </form>
</div>

<!-- 評論串列 -->
<ul class="list-group" id="cmt-list">
    <li class="list-group-item">
        <span class="badge" style="background-color: #F0AD4E;">評論時間：</span>
        <span class="badge" style="background-color: #5BC0DE;">評論人：</span> Item 1
    </li>
</ul>

function getCommentList() {
    $.ajax({
        method: 'GET',
        url: 'http://www.liulongbin.top:3006/api/cmtlist',
        data: {},
        success: function(res) {
            if (res.status !== 200) return alert('獲取評論串列失敗！');
            // console.log('獲取資料成功');

            var rows = [];
            $.each(res.data, function(i, item) { //回圈拼接字串
                var str = '<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>';
                rows.push(str);
            })
            $('#cmt-list').empty().append(rows.join(''))
        }
    });
};
getCommentList();

$(function() {
    $("#formAddCmt").submit(function(e) {
        e.preventDefault();
        var data = $(this).serialize();
        console.log(data);
        $.post('http://www.liulongbin.top:3006/api/addcmt', data, function(res) {
            if (res.status !== 201) {
                return alert('發表評論失敗！')
            }
            getCommentList();
            $('#formAddCmt')[0].reset();
        });
    });

});

二、模板引擎

根據程式員指定的模板結構和資料，自動生成一個完整的HTML頁面，

減少了字串的拼接、使結構代碼更清晰、使代碼更易于閱讀和維護，

2.1 art-template使用步驟

1. 匯入模板引擎：template-web.js
2. 渲染函式（定義資料）
3. 模板的html必須定義到script（定義模板）
4. 呼叫 template函式
5. 渲染HTML結構

2.2 art-template標準語法

標準語法：在{{}}內可以進行變數輸出或回圈陣列等操作
原文輸出
{{@ value}}
條件輸出
{{if v1}} 輸出內容 {{else if v2}} 輸出內容 {{/if}}
{{if value}}輸出內容{{/if}}
回圈輸出
{{each arr}} {{$index}},{{$value}} {{/each}}

2.3 正則與字串操作

exec()函式
用于檢索字串中的正則運算式的匹配
存在回傳匹配值，匹配失敗回傳null
提取分組
正則運算式中()包起來的內容表示一個分組，可以通過分組來提取自己想要的內容
replace()函式
字串的replace操作str.replace(被替代的元素, 替代元素]);

綜合案例

效果圖：

匯入相關檔案

代碼展示：（html+js）

 <div class="container">
        <!-- Logo -->
        <img src="./images/taobao_logo.png" alt="" class="logo" />

        <div class="box">
            <!-- tab 欄 -->
            <div class="tabs">
                <div class="tab-active">寶貝</div>
                <div>店鋪</div>
            </div>
            <!-- 搜索區域（搜索框和搜索按鈕） -->
            <div class="search-box">
                <input id="ipt" type="text" class="ipt" placeholder="請輸入要搜索的內容" /><button class="btnSearch">
          搜索
        </button>
            </div>
            <!-- 搜索建議串列 -->
            <div id="suggest-list"></div>
        </div>
  </div>

 <script type="text/html" id="tpl-suggestList">
        {{each result}}
        <!-- 搜索建議項 -->
        <div class="suggest-item">{{$value[0]}}</div>
        {{/each}}
 </script>

<script>
        $(function() {
            //1.定義延時器ID
            var timer = null;
            //(1)定義全域快取物件
            var cacheobj = {}

            //2.定義防抖的函式
            function debounceSearch(kw) {
                timer = setTimeout(function() {
                    getSuggestList(kw);
                }, 800)
            }


            //為輸入框系結keyup事件
            $('#ipt').on('keyup', function() {
                //3.清楚延時器
                clearTimeout(timer);
                //trim去除空格
                var keywords = $(this).val().trim();
                if (keywords.length <= 0) {
                    return $('#suggest-list').empty().hide();
                }
                //先判斷快取中是否有資料 
                if (cacheobj[keywords]) {
                    return renderSuggestList(cacheobj[keywords]);
                }
                //輸入后呼叫
                debounceSearch(keywords);
            });

            function getSuggestList(kw) {
                $.ajax({
                    url: 'https://suggest.taobao.com/sug?q=' + kw,
                    dataType: 'jsonp',
                    success: function(res) {
                        renderSuggestList(res);
                    }
                })
            };

            //渲染建議串列
            function renderSuggestList(res) {
                if (res.result.length <= 0) {
                    return $('#suggest-list').empty().hide();
                }
                var htmlStr = template('tpl-suggestList', res);
                $('#suggest-list').html(htmlStr).show();

                //(2)將搜索結果保存到快取物件中
                //獲取用戶輸入內容，當作鍵
                var k = $('#ipt').val().trim();
                //需要將資料作為值，進行快取
                cacheobj[k] = res;
            }

        })
</script>