局部刷新如何實現?看我簡單實現局部刷新、分頁

2020-12-15 百家號

前言

1.感謝大家的關注和閱讀,堅持乾貨不斷~~~

2.今天我們來說一下如何通過ajax實現局部刷新。

應用場景

在Java中,如果我們一個頁面中有很多的信息都是從後臺傳遞過來的,但是我們有的地方需有有變動。比如我們在做菜品管理,上下翻頁時,我們的分類以及其他的信息一般是不需要刷新,只需要更新我們的菜品信息即可,如果跳轉後臺會浪費很長時間,如果我們使用ajax實現異步刷新。就可以在html中通過js對頁面進行簡單的控制實現局部刷新的效果。我們今天就以分頁查詢為例進行講解!!!

代碼實現

1.後臺的Java代碼我就不再貼出來了,大家可以查看我的上一篇文章,Mybatis-Plus來學習一下!代碼生成、分頁插件?,可以通過mybatis-plus進行分頁或者是使用mybatis的分頁插件也可以,無論如何使用什麼技術,相信實現分頁對大家來說不是什麼難事!!!

2.那我們直接來說一下視圖層html的代碼,我們簡單的以飯店的商品管理為例:

html-2

可見當我們點擊上下頁、首尾頁時,只需要對id=「main」的tbody標籤中的tr進行更新即可。

3.接下來我們說一下javascript代碼,我們需要實現的功能主要就是依靠他來實現。

相信大家已經看懂了,我的基本實現思路就是先將之前的數據從頁面中刪除,然後通過ajax向後臺請求數據,然後將數據再動態的展示到頁面上,就可以實現簡單的動態刷新,然後以此可以實現很多功能。如上面的分頁查詢嗎、信息更新等。

結束語

1.我的方式可能並不是最好的方式,但是倒也不失為一種方法。經過我的實驗,還是蠻好用的。

2.感謝的大家的關注和閱讀,希望大家可以給我提出更多的問題以及想法,為我提供素材和題目。

3.我會努力,保持更新。

4.乾貨不斷,感謝!!!!

相關焦點

  • ssm項目實戰實現頁面的局部刷新功能
    好的各位小夥伴繼續學習知識了ajax_json咱們之前用SSM三大框架整合,實現了用戶的增刪改查功能.今天主要是將之前實現的用戶功能,修改成 ajax 的方式,實現頁面的局部刷新功能.首先來實現一個簡單的頁面切換功能頁面的代碼
  • Angularjs+servlet+mysql實現表格分頁
    上一篇文章小編講解了如何實現表格。在Javaweb開發中,最常用到的是表格分頁,今天小編就講解一下如何實現表格分頁。一、分頁原理。以student表為例。前端頁面實現表格分頁,後端資料庫使用的查詢語句select * from student limit 參數1,參數2,參數1代表從第幾個值開始查詢,即記錄起始索引值,參數2代表查詢幾個值,即每頁顯示多少條記錄假如起始索引從0開始,每頁顯示2條記錄規律:
  • 分頁功能的分析與設計
    編輯導語:我們在網頁上瀏覽內容時,劃到最下面時經常需要進行翻下一頁查看新的內容,也可以選擇跳轉到其他頁數;讓我們在瀏覽信息是更加清晰,以免當前頁太多信息造成混亂;本文作者詳細介紹了分頁功能的分析與設計,我們一起來看一下。
  • 資料庫分頁查詢的幾種實現思路
    PageHelper框架可以讓使用者不用關心分頁語法就可以讓dao查詢接口實現分頁功能,它跟mybatis框架結合使用,使用mybatis的Interceptor機制,通過攔截Executor的query方法攔截所有dao數據查詢,通過替換MappedStatement修改執行的sql,給待執行的sql套上分頁條件把源sql轉換成支持分頁的sql,PageHelper支持mysql、oracle、db2
  • excel抓取網頁數據,並實現自動刷新,再也不用傻傻的複製粘貼了
    Hello,大家好,今天跟大家分享下我如何快速獲取網頁中的表格,並且可以實現自動刷新數據,他的操作也非常的簡單,話不多說讓我們直接開始吧我們想要獲取網頁中2020年GDP預測排名這個數據,如下圖>二、處理數據當點擊轉換數據後就會進入power query的數據處理的界面,在這裡我們可以對數據進行相應的處理,比如在這裡我們想以地區為類別計算下每個洲的GDP總值,以人民幣為單位首先我們點擊開始中選擇分組依據,然後在分組依據中選擇地區,然後在新列名中命名一個名字,我將求計算方式設置為求和
  • html如何製作分頁
    一般的製作頁面都會使用到分頁,那麼你知道分頁功能是怎麼實現的嗎?讓我們一起來學習一下html如何製作分頁吧。新建html頁面。如圖:在html頁面找到body標籤,在body標籤裡新建一個div標籤,然後在div標籤中新建a標籤,並在a標籤中輸入頁數。
  • 實例,PHP+MySql 實現簡單的分頁功能
    參數:The offset 是返回集的初始標註,起始點是0,不是1The count 規定返回的數量簡單示例:SELECT * FROM user limit 10; // 取前 10 條數據SELECT * FROM user limit 10,10; // 查詢 11-20 這 10 條數據2、實現原理
  • 夏普AQUOS zero2通過軟體實現了首款240Hz刷新率手機
    為了有更好的流暢度,不少以遊戲功能為主打的手機均搭載了 90Hz 甚至 120Hz 的高刷新率。不過這個數值在夏普看來好像遠遠不夠,就在今天,夏普正式發布了全新旗艦手機 AQUOS zero2,主打一塊高達 240Hz 超高刷新率的電競級屏幕,來自夏普自家研發的有機 EL 顯示屏,這麼高的刷新率也成為了全球首款 240Hz 以及全球最高刷新率的手機。除此之外,這塊屏幕的解析度為 2430x1080,尺寸為 6.4 英寸,支持 HDR 10 和杜比視界。
  • API 分頁設計與實現探討
    通常我們通過一個 offset 偏移量或者頁碼來進行分頁,然後通過 API 實現類似請求:GET /api/products?page=10{"items": [...100 products]}如果要繼續訪問後續數據,則修改分頁參數即可。
  • excel操作技巧:幾個實現數據透視表動態刷新的方法
    >這也難怪,其實我們大多數人對excel的了解只停留在簡單的加減乘除畫表格的階段那今天就給大家介紹幾個實現數據透視表動態刷新的方法。如圖,這個數據源列出了不同城市的銷售額。通過這個例子,我們發現如果數據增加,數據透視表就需要進行更改數據源來更新,但是實際工作中如果遇到頻繁的數據變動,有沒有什麼方法可以快速實現動態刷新呢?
  • Python中使用pyqtgraph庫實現數據可視化之逐點刷新波形圖
    在使用pyqtgraph庫繪製圖形的編程方法上,前面一篇文章已經給了一個最簡單的例子以及一個連續刷新波形圖的例子,下面再給一個逐點刷新波形圖的例子。在數據的可視化方面,對於逐點刷新的情況也是比較多的,如在溫度採集的時候,可能需要採集到一個點就要實時顯示一個點,而前面的點不能丟掉,當顯示滿一屏時,整個波形向左逐點推進,右側再填充顯示一個新的數據點,給人一種整幅圖形是向左逐點移動的顯示效果。
  • 使用SpringData JPA 實現分頁
    本文公眾號來源:PandaJava  作者:panda-java本文由讀者投稿,這篇文章主要講解了使用SpringDataJPA如何實現分頁。之前我寫過兩篇SpringData JPA搭建的文章,但沒寫過分頁(前兩篇)使用SpringData JPA  實現分頁環境: Eclipse Mars.2 + JDK 1.8 + Gradle 3.5 + thymeleaf 3首先我們前臺html把分頁菜單導航欄弄出來。用bootstrap的分頁插件。
  • 高刷新率純屬徒增功耗?Redmi K30S的可變刷新率是什麼?
    這就是廠商技術儲備不足,被迫急於推出高刷新率的結果,也是我目前依然認為高刷還不成熟的原因。 別看iPhone雖然沒有上高刷新率,但是蘋果這方面的技術儲備其實比安卓陣營要更完善。前面我提到過,「也有例外的設備」,就是指的蘋果。一個是iPad Pro,一個是Apple Watch。
  • 色彩、高刷新、HDR、水桶機 618顯示器選購指南
    本內容來源於@什麼值得買APP,觀點僅代表作者本人 |作者:地鐵仔有關618的顯示器清單,各位看官想必已經看了不少,這裡我也不想太囉嗦,直接上本次要說的重點吧。本次推薦僅針對三種顯示器需求有用戶——追求色彩的、高刷新率的和千元以下水桶機的。假如你有其他需求,不妨在評論區留言,看到後會及早回復。
  • 微信小程序實戰篇-下拉刷新與加載更多
    哈嘍,大家好,看這標題是不是有點奇怪,你們期盼的微信小程序實戰篇-電商(三)沒出現,我是這麼想的,因為電商裡面的內容有很多,如何我只是以一二三那樣命名的話
  • 澎思科技宣布車輛再識別(Vehicle ReID)成績刷新世界紀錄
    據介紹,澎思科技基於自主研發的「全局和局部深度特徵融合算法模型」,實現了車輛再識別算法關鍵指標平均精度均值(Mean Average Precision,mAP)和首位命中率(Rank-1 Accuracy)的大幅度提升,在VERI-Wild數據集上平均精度均值mAP達到85.35%。隨著深度學習技術的發展,車輛再識別算法效率顯著提升。
  • Django實現分頁功能
    本節要講的分頁功能大家一定不陌生,就像課本上的一篇篇課文一樣,如果課文內容很多就會分成很多頁,展示給讀者。這和我們在開發階段處理數據信息是一樣的,因為大多數情況下,我們往往會面對很多的數據信息,為了讓這些信息顯示的更便於閱讀以及減小數據的提取量從而減少伺服器的壓力等,我們就會採用分頁的處理方法,Django 為開發者提供了內置的模塊 Paginator 類。
  • 大連日報評論丨統籌兼顧全局與局部在新的發展格局中實現更大作為
    大連日報評論丨統籌兼顧全局與局部在新的發展格局中實現更大作為 2020-12-16 16:12 來源:澎湃新聞·澎湃號·媒體
  • 【開源插件】Bootstrap-Table 實現表格的查詢、分頁、排序
    Bootstrap-table插件提供了非常豐富的屬性設置,可以實現查詢、分頁、排序、複選框、設置顯示列、Card view視圖、主從表顯示、合併列、國際化處理等處理功能,而且該插件同時也提供了一些不錯的擴展功能,如移動行、移動列位置等一些特殊的功能,插件可以用基於HTML5的data-*屬性標識設置,也可以使用Javascript方式進行設置,非常方便。
  • 「ThinkPHP5開發連載76」tp5連載雜項之分頁-分頁實現
    上一篇文章講解「模型-內置標籤之定義標籤」,本篇文章講解「雜項-分頁之分頁實現」。一、分頁實現ThinkPHP5.1內置了分頁實現,要給數據添加分頁輸出功能變得非常簡單。1.使用Db類實現分頁1)使用Db類查詢的時候調用paginate方法:①新建Index控制器,並新建dbpage方法②新建dbpage.html模板,並在模板中展示數據預覽: