本文实例为大家分享了Ajax实现异步加载数据的具体代码，供大家参考，具体内容如下
项目结构如下 （需要导入一个JQuery的包，配置文件web.xml和springmvc-servlet.xml，不在写了，不知道的可以看一下我其它的博客，上边都有）
异步加载数据
首先创建一个实体类
1 2 3 4 5 6 7 8 9 10 11 12 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | 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; }}</user></user></user> |
最后创建一个jsp页面
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <title>Ajax异步数据加载</title><script src="%24%7BpageContext.request.contextPath%7D/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>" + data[i].age +""+ "<td>" + data[i].sex +""+ "" } $("#content").html(html); }) }) })</script><input type="button" value="加载数据" id="btn"> |
| 姓名 | 年龄 | 性别 |
结果如下
用户登录的异步验证
先创建一个Controller
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | 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页面
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <title>用户登录</title><script src="%24%7BpageContext.request.contextPath%7D/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><p> 用户名：<input type="text" id="username"><span id="userInfo"></span></p><p> 密码名：<input type="password" id="pwd"><span id="pwdInfo"></span></p> |
结果如下
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持IT俱乐部。
