文章詳情頁
Ajax實現異步加載數據
瀏覽：138日期：2022-06-12 10:50:48
本文實例為大家分享了Ajax實現異步加載數據的具體代碼，供大家參考，具體內容如下
項目結構如下 （需要導入一個JQuery的包，配置文件web.xml和springmvc-servlet.xml，不在寫了，不知道的可以看一下我其它的博客，上邊都有）
異步加載數據
首先創建一個實體類
package com.zkw.pojo;import lombok.AllArgsConstructor;import lombok.Data;import lombok.NoArgsConstructor;@Data @AllArgsConstructor @NoArgsConstructorpublic class User { private String name; private int age; private String sex;}然后創建一個Controller
package com.zkw.controller;import com.zkw.pojo.User;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.IOException;import java.util.ArrayList;import java.util.List;@RestControllerpublic class AjaxController { @RequestMapping("/a2") public List<User> test2(){List<User> userList = new ArrayList<User>();userList.add(new User("七七",1,"女"));userList.add(new User("琪琪",1,"女"));userList.add(new User("琦琦",1,"女"));return userList; }}最后創建一個jsp頁面
<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> <title>Ajax異步數據加載</title> <script src="${pageContext.request.contextPath}/static/js/jquery-3.6.0.js"></script> <script>$(function () { $("#btn").click(function () {$.post("${pageContext.reques-t.contextPath}/a2",function (data) { var 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></head><body> <input type="button" value="加載數據" id="btn"> <table><thead> <tr><td>姓名</td><td>年齡</td><td>性別</td> </tr></thead><tbody id="content"></tbody> </table></body></html>結果如下
用戶登錄的異步驗證
先創建一個Controller
package com.zkw.controller;import com.zkw.pojo.User;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.IOException;import java.util.ArrayList;import java.util.List;@RestControllerpublic class AjaxController { @RequestMapping("/a3") public String test3(String username,String pwd){String msg ="";if (username != null){ if (username.equals("admin")){msg = "ok"; }else{msg = "用戶名不存在"; }}if (pwd != null){ if (pwd.equals("123456")){msg = "ok"; }else{msg = "密碼輸入錯誤"; }}return msg; }}然后創建一個jsp頁面
<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> <title>用戶登錄</title> <script src="${pageContext.request.contextPath}/static/js/jquery-3.6.0.js"></script> <script> function a1() { $.post({url:"${pageContext.request.contextPath}/a3",data:{"username":$("#username").val()},success(data){ if (data.toString()==="ok"){$("#userInfo").css("color","green"); }else {$("#userInfo").css("color","red"); } $("#userInfo").html(data);} }) } function a2() { $.post({ url:"${pageContext.request.contextPath}/a3", data:{"pwd":$("#pwd").val()}, success(data){ if (data.toString()==="ok"){ $("#pwdInfo").css("color","green"); }else { $("#pwdInfo").css("color","red"); } $("#pwdInfo").html(data); } }) } </script></head><body> <p>用戶名：<input type="text" id="username" οnblur="a1()"><span id="userInfo"></span> </p> <p>密碼名：<input type="password" id="pwd" οnblur="a2()"><span id="pwdInfo"></span> </p></body></html>結果如下
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。
標簽：
Ajax
上一條：Ajax異步刷新功能及簡單案例下一條：基于Ajax的聊天機器人功能的實現
排行榜
網公網安備