實作的效果:

首先需要一個本地服務器, 用于資料的增刪改查, 實作效果前需要在后臺運行本地服務器

想要完整體驗案例的實作可以在(http://jason.3vzhuji.net/) 網站中下載本地服務器

運行本地服務器還需要 node.js (可以在官網中下載安裝: https://nodejs.org/zh-cn/)

在打開的本地服務器檔案根目錄下打開 cmd 再輸入node app.js 回車即可打開服務器

服務器的介面說明在檔案中可以查找:

用戶串列頁

這個頁面的主要的任務是來實作用戶資料的動態渲染

引入必要檔案: 1. jQ檔案: jquery.js 　　2. 模板引擎: template-web.js 　　3. 還有頁面自己的js檔案 : index.js

1.找到介面

2.根據靜態結構創建模板--使用簡潔語法

 1 <!-- 添加串列結構的模板 -->
 2 <script type='text/template' id='userlistTemp'>
 3     {{each data}}
 4       <tr>
 5         <td>{{$index + 1}}</td>
 6         <td>{{$value.name}}</td>
 7         <td>{{$value.gender}}</td>
 8         <!-- 圖片應該是從服務器端獲取的，所以在渲染圖片路徑的時候應該自己在名稱前面拼接服務器的基地址 -->
 9         <td><img src="http://127.0.0.1:3002/images/{{$value.img}}"></td>
10         <td><a href="#">查看</a> <a href="javascript:;">修改</a>
11           <a href="javascript:;">洗掉</a></td>
12     </tr>
13     {{/each}}
14 </script>

3.ajax請求，獲取資料

4.進行資料的分析，分析獲取的資料是否能夠滿足渲染的要求

5.呼叫模板引擎，生成動態結構

6.填充到指定的位置

 1 // 實作頁面的動態渲染
 2 // 9：“英雄”案例獲取所有資料
 3 // - 請求路徑：http://127.0.0.1:3002/getalldata
 4 // - 請求方法：get
 5 $.ajax({
 6     url: 'http://127.0.0.1:3002/getalldata',
 7     dataType: 'json',
 8     success: function (res) {
 9         console.log(res)
10         $('tbody').html(template('userlistTemp', res))
11     }
12 })

添加用戶頁面:

用戶新增

實作新增頁面的跳轉
1 <a class="btn btn-success pull-right" href="./add.html">添加英雄</a>
引入所需檔案: 1.jQ: jquery.js　　2. 頁面自己的js檔案: add.js

重點細節：后臺介面所需要的資料有：

1.用戶名

2.姓名

3.用戶頭像的名稱，這個名稱是圖片存盤在服務器的名稱，意味著我們先實作檔案的上傳，獲取到服務器回傳的圖片名稱

實作圖片上傳

用戶一選擇檔案就進行檔案的上傳

一定要獲取到后臺回傳的圖片的名稱，以后做為引數傳遞

上傳檔案主要的步驟有：

1.使用formdata收集檔案資料

2.ajax請求，以formdata做為引數

3.注意要設定兩個屬性為false:processData contentType

4.分析回傳資料，獲取圖片的名稱，實作預覽
 // 實作檔案上傳，選擇好檔案就會觸發change事件
$('#img').on('change', function () {
    // 1.使用formdata收集檔案資料
    let myfile = $('#img')[0].files[0]
    // 我們現在只是實作檔案的上傳，并不需要將表單的其它元素的資料也傳遞過去，所以不使用傳入整個表單的方式來收集資料
    let formdata = https://www.cnblogs.com/xjs-hp/p/new FormData()
    // 將檔案資料追加到formdata中
    formdata.append('img', myfile)

    // 2.ajax請求，以formdata做為引數
    // 8：圖片上傳(英雄案例中圖片上傳也是使用這個)
    // - 請求路徑：http://127.0.0.1:3002/uploadFile
    // - 請求方法：post

    $.ajax({
        type: 'post',
        url: 'http://127.0.0.1:3002/uploadFile',
        data: formdata,
        // 3.注意要設定兩個屬性為false:processData   contentType
        processData: false, // 不要讓ajax進行資料的處理
        contentType: false,// 不要讓ajax進行引數的編碼處理
        dataType: 'json',
        success: function (res) {
            console.log(res)
            if (res.code == 200) {
                // 實作預覽
                $('#photo').attr('src', 'http://127.0.0.1:3002/images/' + res.img)
            }
        }
    })
})
實作用戶新增

關鍵的操作就是：收集后臺介面所需要的資料，從當前頁面來看，使用jq的serialize方法似乎最簡單

1.serialize()可以收集指定表單中擁有name屬性的表單元素的value值，所以默認情況下，img是無法成功的獲取

a.可以人為拼接，要求我們使用一個全域變數存盤res.img,但是不要這么做，因為需要多創建全域變數，同時不安全

b.推薦使用隱藏域，隱藏域就是一個input表單元素，但是在頁面中不會進行渲染（用戶看不到，但是我們可以獲取），前提是你得人為的為其賦值
在表單中添加一個隱藏域
//在add.html檔案中的表單域中修改
<form id='myform'>
    
    <input type="hidden" name="img" value="">
在圖片上傳成功之后為隱藏域賦值
//在add.js檔案中的$.ajax中修改
success: function (res) {
    console.log(res)
    if (res.code == 200) {
        // 實作預覽
        $('#photo').attr('src', 'http://127.0.0.1:3002/images/' + res.img)
        // 將圖片的名稱存盤到隱藏域
        $('[name=img]').val(res.img)
    }
}
直接通過serialize方法獲取用戶資料
// let data = https://www.cnblogs.com/xjs-hp/p/$('#myform').serialize()
// console.log(data)
資料收集之后就實作ajax請求

實作新增操作
// 實作用戶資料的新增
// 10："英雄"案例實作新增用戶資訊
// - 請求路徑：http://127.0.0.1:3002/add
// - 請求方法：post

$('#sub').on('click', function () {
    // let data = https://www.cnblogs.com/xjs-hp/p/$('#myform').serialize()
    // console.log(data)
    $.ajax({
        type: 'post',
        url: 'http://127.0.0.1:3002/add',
        data: $('#myform').serialize(),
        dataType: 'json',
        success: function (res) {
            console.log(res)
            if (res.code == 200) {
                alert('新增成功')
                // 重新跳轉到串列頁
                location.href = 'https://www.cnblogs.com/xjs-hp/p/index.html'
            }
        }
    })
})

修改用戶頁面:

用戶編輯

頁面跳轉，傳入當前用戶的id

 1 <!-- 添加串列結構的模板   第9行傳遞了引數 -->
 2   <script type='text/template' id='userlistTemp'>
 3     {{each data}}
 4       <tr>
 5         <td>{{$index + 1}}</td>
 6         <td>{{$value.name}}</td>
 7         <td>{{$value.gender}}</td>
 8         <td><img src="http://127.0.0.1:3002/images/{{$value.img}}"></td>
　　　　　　　//點擊修改跳轉到修改用戶頁面,獲取被點擊的用戶id并傳遞引數
 9         <td><a href="https://www.cnblogs.com/xjs-hp/p/#">查看</a> <a href="https://www.cnblogs.com/xjs-hp/p/edit.html?id={{$value.id}}">修改</a>
10           <a href="javascript:;">洗掉</a></td>
11       </tr>
12     {{/each}}
13   </script>

1.展示用戶默認資料

引入需要檔案: a. jQ檔案: jquery.min.js 　　b. 模板引擎檔案: template-web.js 　　

　　　　　　　　c 轉譯引數檔案,用于決議get的引數: common.js 實作代碼如下:　　d. 頁面自己的js檔案: edit.js (檔案的傳入順序不可變)

 1 let itcast = {
 2     getParameter: function (str) { // ?id=7&name=jack
 3         // 洗掉?
 4         str = str.replace('?', '')  // id=7&name=jack
 5         // 分割字串
 6         var arr = str.split('&')  // ["id=7","name=jack"]
 7         // 回圈遍歷再次分割
 8         var obj = {}
 9         for (var i = 0; i < arr.length; i++) { // 1.id=7
10             var temp = arr[i].split('=') // ["id",7]
11             // 將資料添加到物件
12             obj[temp[0]] = temp[1] // {id:7}
13         }
14         return obj
15     }
16 }

a.獲取引數id

// 1.獲取引數
// 下面這種方式權宜之計，它只適合只有一個引數的情況下，但是現實的開發場景中，多引數的情況比比皆是
// 通用的作法是將key=value&key=value這種格式的字串轉換為物件
// let id = location.search.split('=')[1]
let id = itcast.getParameter(location.search).id
console.log(id)

b.根據id獲取用戶資料

注意: 需要獲取用戶資料的姓名, 性別, id, img名稱, 而表單中沒有 id引數和 img引數這樣在新增頁面渲染不出來用戶資訊 , 則需要在表單域中添加兩個隱藏域來儲存這兩個資訊:

注意: 編輯操作的時候，我們不能強迫用戶修改每一個值，意味著如果用戶沒有修改某個值，那么還應該保留原始的資料，如用戶圖片.

<input type="hidden" name="id" value='{{id}}'>
<input type="hidden" name="img" value='{{img}}'>

c.展示默認資料--模板/dom操作

 //創建模板結構 ,在
 1 <script type="text/template" id='usercontentTemp'>
 2     <tr>
 3            <td>姓名：</td>
 4            <td><input type="text" name="name" value='https://www.cnblogs.com/xjs-hp/p/{{name}}'></td>
 5     </tr>
 6     <tr>
 7            <td>性別：</td>
 8         <td>
 9                <input id="nan" name="gender" value="https://www.cnblogs.com/xjs-hp/p/男" type="radio" {{gender == '男'? 'checked' : ''}}><label                     for="nan">男</label>
10                <input name="gender" value="https://www.cnblogs.com/xjs-hp/p/女" type="radio" id="nv" {{gender == '女'? 'checked' : ''}}><label                     for="nv">女</label>
11         </td>
12     </tr>
13     <tr>
14         <td>頭像：</td>
15         <td>
16           <img src="http://127.0.0.1:3002/images/{{img}}" alt="" id="photo" width="100"
17           style='border: 1px solid #ccc;margin-bottom: 5px;'>
18           <input type="file" id="img">
19         </td>
20     </tr>
21 </script>

 1 // 2.根據引數查詢用戶資料，進行默認資料的渲染 在編輯頁面中渲染
 2 // 13："英雄"案例根據ID查詢單個英雄資料
 3 // - 請求路徑：http://127.0.0.1:3002/getHeroById
 4 // - 請求方法：get
 5 $.ajax({
 6     url: 'http://127.0.0.1:3002/getHeroById',
 7     data: { id }, // ES6的新語法，如果物件的key和值同名，那么就只需要寫一個
 8     dataType: 'json',
 9     success: function (res) {
10         console.log(res)
11         if (res.code == 200) {
12             $('.usercontent').html(template('usercontentTemp', res.data))
13         }
14     }
15 })

檔案上傳

基本代碼和新增頁面中的檔案上傳完全一樣

區別：編輯頁面中，我們使用了模板，所以img表單元素是一個動態元素，動態元素在系結事件的時候應該使用事件委托

注意: 對應的獲取元素要注意修改

代碼：

$('.usercontent').on('change', '#img', function (){})

2.實作用戶資料的編輯，類似新增

a.分析介面，準備好介面所需要的資料

b.發起ajax請求

 1  1 // 實作用戶編輯
 2  2 // 11："英雄"案例實作用戶編輯提交
 3  3 // - 請求路徑：http://127.0.0.1:3002/edit
 4  4 // - 請求方法：post
 5  5 
 6  6 $('#sub').on('click', function () {
 7  7     console.log($('#myform').serialize())
 8  8     $.ajax({
 9  9         type: 'post',
10 10         url: 'http://127.0.0.1:3002/edit',
11 11         data: $('#myform').serialize(),
12 12         dataType: 'json',
13 13         success: function (res) {
14 14             if (res.code == 200) {
15 15                 alert('編輯成功')
16 16                 location.href = 'https://www.cnblogs.com/xjs-hp/p/index.html'
17 17             }
18 18         }
19 19     })
20 20 })

用戶洗掉

分析介面，發現洗掉操作需要傳入用戶的id

我們要以異步的方式來洗掉

通過事件委托的方式系結洗掉事件

1.獲取當前洗掉按鈕所對應的id號

2.實作ajax請求

關于資料的獲取

1.自己沒有，要求傳遞

2.別人不傳遞，自己先存盤再獲取，一般選擇使用自定義屬性

a.定義自定義屬性

<a href="javascript:;" class='userdel' data-id='{{$value.id}}'>洗掉</a>

b.獲取自定義屬性

 1 // 實作用戶的洗掉
 2 // 12："英雄"案例實作洗掉單個用戶
 3 // - 請求路徑：http://127.0.0.1:3002/delete
 4 // - 請求方法：get
 5 
 6 $('tbody').on('click', '.userdel', function (e) {
 7     let data = https://www.cnblogs.com/xjs-hp/p/$(this).data()
 8     if (confirm('是否真的需要洗掉？')) {
 9         $.ajax({
10             url: 'http://127.0.0.1:3002/delete',
11             data: data,
12             dataType: 'json',
13             success: function (res) {
14                 console.log(res)
15                 if (res.code == 200) {
16                     alert('洗掉成功')
17                     // 重繪
18                     init()
19                 }
20             }
21         })
22     }
23 })

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

標籤：jQuery

上一篇：XMLHttpRequest 2.0 - FormData

下一篇：前端-jQuery框架

案例分享-實作與后臺服務的互動對資料的增刪改查