6.1 概述
? 所谓ajax其实就是，异步无刷新。即不刷新网页，实现局部数据更新。具体应用呢，比如使用搜索引擎时，数据一个字，即可出现很多候选项，这就是使用的ajax。而jQuery只是一个库，拥有大量的方法，通过这个文件，我们即可使用ajax。
url:地址
data:数据
success：请求成功
error：请求失败
6.3 例子
index.jsp:
<%--
Created by IntelliJ IDEA.
User: yun
Date: 2021/10/11
Time: 10:50
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>首页</title>
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>
<script>
function a(){
$.post({
url:"${pageContext.request.contextPath}/a1",
data:{"name":$("#username").val()},
success:function (data){
alert(data)
}
})
}
</script>
</head>
<body>
用户名：<input type="text" id="username" οnblur="a()">
</body>
</html>
AjaxController.java:
package com.yun.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@RestController
public class AjaxController {
@RequestMapping("/a1")
public void a1(String name, HttpServletResponse response) throws IOException {
System.out.println("你好啊"+name);
response.getWriter().print("则是返回数据");
}
}
6.3 使用
AjaxController.java:
package com.yun.controller;
import com.yun.pojo.User;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
@RestController
public class AjaxController {
@RequestMapping("/t1")
public List<User> test2(){
List<User> userList = new ArrayList<User>();
userList.add(new User("张三",23,"男"));
userList.add(new User("张二",22,"女"));
userList.add(new User("张一",21,"男"));
return userList;
}
}
table.jsp:
<%--
Created by IntelliJ IDEA.
User: yun
Date: 2021/10/11
Time: 14:50
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>数据展示</title>
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>
<script>
$(function (){
$("#btn").click(function (){
$.post("${pageContext.request.contextPath}/t1",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>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tbody id="content">
</tbody>
</table>
</body>
</html>
6.4 同户名判断
AjaxController.java:
package com.yun.controller;
import com.yun.pojo.User;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
@RestController
public class AjaxController {
@RequestMapping("/login")
public String User(String name,String pwd){
String msg = "";
if (name!=null){
if ("admin".equals(name)){
msg= "ok";
}else {
msg = "用户不存在";
}
}
if (pwd!=null){
if ("1234".equals(pwd)){
msg="ok";
}else {
msg="密码错误";
}
}
return msg;
}
}
login.jsp:
<%--
Created by IntelliJ IDEA.
User: yun
Date: 2021/10/11
Time: 15:09
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>登录</title>
<script src="statics/js/jquery-3.6.0.js"></script>
<script>
function a1(){
$.post({
url:"${pageContext.request.contextPath}/login",
data:{"name":$("#name").val()},
success:function (data){
if (data.toString()==='ok'){
$("#userInfo").css("color","green");
}else {
$("#userInfo").css("color","red");
}
$("#userInfo").html(data);
}
})
}
function a2(){
$.post({
url:"${pageContext.request.contextPath}/login",
data:{"pwd":$("#pwd").val()},
success:function (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="name" οnblur="a1()">
<span id="userInfo"></span>
</p>
<p>
密 码:<input type="password" id="pwd" οnblur="a2()">
<span id="pwdInfo"></span>
</p>
</body>
</html>
10月，薄衣敌不过寒风。
|