日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問(wèn) 生活随笔！

生活随笔

當(dāng)前位置： 首頁(yè) > 前端技术 > javascript >内容正文

javascript

SpringMVC(四)——Ajax技术

發(fā)布時(shí)間：2025/3/13 javascript 30 豆豆
生活随笔 收集整理的這篇文章主要介紹了 SpringMVC(四)——Ajax技术 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

文章目錄

  • 1. 什么是Ajax技術(shù)
  • 2. 偽造Ajax
  • 3. Ajax相關(guān)測(cè)試

1. 什么是Ajax技術(shù)

  • AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。
  • Ajax 是一種在無(wú)需重新加載整個(gè)網(wǎng)頁(yè)的情況下，能夠更新部分網(wǎng)頁(yè)的技術(shù)。
  • Ajax 不是一種新的編程語(yǔ)言，而是一種用于創(chuàng)建更好更快以及交互性更強(qiáng)的Web應(yīng)用程序的技術(shù)。
  • 傳統(tǒng)的網(wǎng)頁(yè)(即不用ajax技術(shù)的網(wǎng)頁(yè))，想要更新內(nèi)容或者提交一個(gè)表單，都需要重新加載整個(gè)網(wǎng)頁(yè)。
  • 使用ajax技術(shù)的網(wǎng)頁(yè)，通過(guò)在后臺(tái)服務(wù)器進(jìn)行少量的數(shù)據(jù)交換，就可以實(shí)現(xiàn)異步局部更新。

利用Ajax可以做：

  • 注冊(cè)時(shí)，輸入用戶名自動(dòng)檢測(cè)用戶是否已經(jīng)存在。
  • 登陸時(shí)，提示用戶名密碼錯(cuò)誤
  • 刪除數(shù)據(jù)行時(shí)，將行ID發(fā)送到后臺(tái)，后臺(tái)在數(shù)據(jù)庫(kù)中刪除，數(shù)據(jù)庫(kù)刪除成功后，在頁(yè)面DOM中將數(shù)據(jù)行也刪除。
    …等等

2. 偽造Ajax

可以使用前端的iframe標(biāo)簽來(lái)偽造一個(gè)ajax的樣子
1、新建一個(gè)項(xiàng)目，構(gòu)建web模塊
2、編寫一個(gè) ajax-frame.html 使用 iframe 測(cè)試，感受下效果

<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title>zz</title> </head> <body><script type="text/javascript">window.onload = function(){let myDate = new Date();document.getElementById('currentTime').innerText = myDate.getTime();};function LoadPage(){let targetUrl = document.getElementById('url').value;console.log(targetUrl);document.getElementById("iframePosition").src = targetUrl;}</script><div><p>請(qǐng)輸入要加載的地址：<span id="currentTime"></span></p><p><input id="url" type="text" value="https://www.pku.edu.cn/"/><input type="button" value="提交" onclick="LoadPage()"></p> </div><div><h3>加載頁(yè)面位置：</h3><iframe id="iframePosition" style="width: 50%;height: 300px;"></iframe> </div></body> </html>

3、配置Tomcat測(cè)試

可以看出，只有加載頁(yè)面位置區(qū)域局部更新頁(yè)面，其余區(qū)域不變。

3. Ajax相關(guān)測(cè)試

用以下兩種均可實(shí)現(xiàn)Ajax

  • jQuery ：用的比較多
  • axios ：vue推薦使用 axios

在這里使用 jquery

1. 失去焦點(diǎn)(鼠標(biāo)離開輸入框)觸發(fā)一個(gè)ajax請(qǐng)求

頁(yè)面ajax01.html

<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><html><head><title>Title</title><!--注意：script標(biāo)簽不要自閉合--><script src="http://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script></head> <body>百度：<input type="text" id="baidu" onblur="baidu()"><script>function baidu() {// 失去焦點(diǎn)觸發(fā)一個(gè)ajax請(qǐng)求alert("ajax請(qǐng)求")} </script> </body> </html>

測(cè)試
鼠標(biāo)先點(diǎn)擊輸入框，再移動(dòng)離開輸入框，即失去焦點(diǎn)

2. 失去焦點(diǎn)觸發(fā)一個(gè)ajax請(qǐng)求，后臺(tái)返回ok，顯示測(cè)試成功

控制類AjaxController

package com.zz.controller;import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController;@RestController public class AjaxController {@RequestMapping("/a2")public String ajax(String name){System.out.println(name);return "ok";} }

頁(yè)面ajax02.html

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="http://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> </head> <body>百度：<input type="text" name="name" id="baidu" onblur="baidu()"><script>function baidu(){// 失去焦點(diǎn)觸發(fā)一個(gè)ajax請(qǐng)求$.post({url:'/a2',data:{name:$("#baidu").val()},//成功的回調(diào)函數(shù)success:function (data,status) {console.log(data)console.log(status)}});} </script> </body> </html>

測(cè)試


3. 失去焦點(diǎn)觸發(fā)一個(gè)ajax請(qǐng)求，后臺(tái)返回一個(gè)集合對(duì)象

控制類AjaxController

@RequestMapping("/aj2")public List<User> ajax2(String name){User user1 = new User("鐵牛1", 18, "女");User user2 = new User("鐵牛2", 18, "男");User user3 = new User("鐵牛3", 18, "女");User user4 = new User("鐵牛4", 18, "男");User user5 = new User("鐵牛5", 18, "女");User user6 = new User("鐵牛6", 18, "男");List<User> users = Arrays.asList(user1, user2, user3, user4, user5, user6);return users;}

同時(shí)把頁(yè)面ajax02.html中的地址改成 /aj2

測(cè)試


4. 觸發(fā)一個(gè)事件，數(shù)據(jù)回顯到前端界面

頁(yè)面ajax03.html

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="http://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> </head> <body><input type="button" id="btn" value="點(diǎn)擊"/> <table width="70%" border="1px" align="center"><tr><td>姓名</td><td>年齡</td><td>性別</td></tr><tbody id="content"><!--應(yīng)該從后臺(tái)自動(dòng)刷新數(shù)據(jù)過(guò)來(lái)--></tbody> </table> <script>$('#btn').click(function(){//post(url,data,success的回調(diào)函數(shù))$.post("/aj2",function (data){console.log(data);//基本的dom操作let html="";for (let i = 0; i <data.length ; i++) {html+= "<tr>" +"<td>" + data[i].name + "</td>" +"<td>" + data[i].age + "</td>" +"<td>" + data[i].sex + "</td>" +"</tr>"}$("#content").html(html);})}) </script> </body> </html>

測(cè)試


總結(jié)

以上是生活随笔為你收集整理的SpringMVC(四)——Ajax技术的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。