一、什么是表單

表單在網頁中主要負責資料采集功能，HTML中的<form>標簽，就是用于采集用戶輸入的資訊，并通過<form>標簽的提交操作，把采集到的資訊提交到服務器端進行處理

表單的組成部分：

表單標簽：<form></form>
表單域：包含了文本框、密碼框、隱藏域、多行文本框、復選框、單選框、下拉選擇框和檔案上傳框等
表單按鈕：buttom

二、表單的屬性

<form>標簽用來采集資料，<form>標簽的屬性則是用來規定如何把采集到的資料發送到服務器

屬性	值	說明
action	URL地址	規定當提交表單時，向何處發送表單資料
method	get或post	規定以何種方式把表單資料提交到action URL
enctype	application/x-www-form-urlencoded \| multipart/form-data \| text/plain	規定在發送表單資料之前如何對其進行編碼
target	_blank \| _self \| _parent \| _top	規定在何處打開action URL

action屬性：

action屬性的值應該是后端提供的一個URL地址，這個URL地址專門負責接受表單提交過來的資料
當表單在未指定action屬性值的情況下，action的默認值為當前頁面的URL地址
注意：當提交表單后，頁面會立即跳轉到action屬性指定的URL地址

method：

get方式適合用來提交少量的、簡單的資料
post方式適合用來提交大get方式量的、復雜的、或包含檔案上傳的資料-較隱蔽
默認值 get，表示通過URL地址的形式，把表單資料提交到action URL

enctype：

application/x-www-form-urlencoded 在發送前編碼所有字符（默認）
nultipart/form-data 不對字符編碼在使用包含檔案上傳控制元件的表單時，必須使用該值
text/plain 空格轉換為“+”加號，但不對特殊字符編碼（很少用）

注意事項：

在涉及到檔案上傳的操作時，必須將enctype的值設定為multiparty/form-data
如果表單的提交不涉及到檔案上傳操作，則直接設定為默認值

target：

默認情況下，target的值是_self，表示在相同的框架中打開action URL，

_blank 在新視窗中打開
_self 默認在相同的框架/視窗中打開
_parent 在父框架集中打開
_top 在整個視窗中打開
framename 在指定的框架中打開

三、表單的同步提交

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

存在的缺點：頁面會發生跳轉；頁面之前的狀態和資料會丟失

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

3.1、通過Ajax提交表單資料

監聽表單事件：

方法一、

$('#form1').submit(function(e){
alter('監聽到了表單的提交事件')
)}

方法二、

$('#form1').on('submit',function(e) {
alert('監聽到了表單的提交事件')
)}

阻止表單的默認行為：

當監聽到表單的提交事件之后，可以呼叫事件物件的event.preventDefault()函式，來阻止表單的提交和頁面的跳轉

快速獲取表單里的資料：

其中serialize()方法是獲取表單所有的資料

好處：serialize（)函式可以一次性獲取表單中的所有的資料
使用此函式快速獲取表單資料表單每個input表單元素都要有name屬性
    <form id="form1">
        <input type="text" name="username" />
        <input type="password" name="username"/>
        <button type="submit">提交</button>
    </form>
    <script>
          $('#form1').submit(function(e){
               e.preventDefault();
               //serialize()獲取表單所有的資料
               var data = $(this).serialize();
               console.log(data);
           })
    </script>

用一個案例讓大家更好的理解form 獲取資料 ajax提交資料

效果圖：

點擊發表評論，將表單里面的資料渲染到評論串列獲取給定介面里面的資料

先來看看我們html框架【html框架就是用bootstrap模版生成的】

<body style="padding: 15px;">
    <!-- 評論面板 -->
    <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" />
            <div>評論內容：</div>
            <textarea class="form-control" name="content"></textarea>
            <button type="submit" class="btn btn-primary">發表評論</button>
        </form>
    </div>

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

</body>

首先獲取評論，將評論渲染到頁面

通過ajax獲取給定的路徑，將評論內容渲染到頁面

function getData() {
    $.ajax({
        method: 'GET',
        url: 'http://www.liulongbin.top:3006/api/cmtlist',
        success: function (res) {
            if (res.status !==200) {
                return alert("獲取資料失敗！")
            }
            var rows = [];
            $.each(res.data, function (i, item) {
                rows.push('<li class="list-group-item">'+item.content+'<span class="badge" style="background-color: #F0AD4E;">評論時間：'+item.time+'</span><span class="badge" style="background-color: #5BC0DE;">評論人:'+item.username+'</span>Item 1</li>')
            })
            $('.cmt-list').empty().append(rows.join(''))
        }
    })
}
getData();

發表評論

$(function () {
    $("#formAddCmt").submit(function (e) {
        e.preventDefault();
        var data = $(this).serialize();
        $.ajax({
            method: "POST",
            data,
            url: 'http://www.liulongbin.top:3006/api/addcmt',
            success: function (res) {
                if (res.status !==201) {
                    return alert('發表評論失敗');
                }
                getData();
                $("#formAddCmt")[0].reset();//將表單里面的資料重制
            }
        })
    })
})

博主就分享到這里啦

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/356214.html

標籤：其他

上一篇：【C++】vector

下一篇：Docker命令學習筆記

你真的了解input表單嗎？---采集用戶輸入的資訊

一、什么是表單

二、表單的屬性

三、表單的同步提交

3.1、通過Ajax提交表單資料