Ajax实现异步加载数据
程序员文章站
2022-01-06 07:44:19
本文实例为大家分享了ajax实现异步加载数据的具体代码，供大家参考，具体内容如下项目结构如下 （需要导入一个jquery的包，配置文件web.xml和springmvc-servlet.xml，不在写...
本文实例为大家分享了ajax实现异步加载数据的具体代码，供大家参考，具体内容如下
项目结构如下 （需要导入一个jquery的包，配置文件web.xml和springmvc-servlet.xml，不在写了，不知道的可以看一下我其它的博客，上边都有）
异步加载数据
首先创建一个实体类
package com.zkw.pojo;
import lombok.allargsconstructor;
import lombok.data;
import lombok.noargsconstructor;
@data @allargsconstructor @noargsconstructor
public 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;
@restcontroller
public 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;
@restcontroller
public 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的聊天机器人