简单了解Ajax

yui方木

已于 2024-04-24 09:20:41 修改

阅读量180

点赞数 2

CC 4.0 BY-SA版权

分类专栏： SSM整合文章标签： ajax java

于 2021-01-24 23:25:40 首次发布

本文链接：https://blog.csdn.net/weixin_44976835/article/details/113100124

SSM整合专栏收录该内容

10 篇文章

订阅专栏

Ajax：异步的JS和XML（一种无需重新加载整个页面的情况下，能够更新部分网页的技术）
Ajax不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序技术

例如，百度搜索框，输入一个词联想出数个关键字，就是Ajax请求

传统网页，想要更新内容或者提交一个表单，需要重新加载整个网页，使用Ajax技术的网页，通过在后台服务器进行少量的数据交换，就可以实现异步局部更新，使用Ajax。用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。

在这里插入图片描述
前端请求，并提交数据给后端判断

<%--
Created by IntelliJ IDEA.
User: shadowpee
Date: 2021/1/24
Time: 22:04
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/jquery-3.5.1.js"></script>
<script>
function judge(){
$.ajax({
url:"${pageContext.request.contextPath}/Ajax/judge",
data:{"name":$("#username").val()},
success:function (data){
alert(data);
}
})
}
</script>
</head>
<body>
用户名：<input type="text" id="username" onblur="judge()">
</body>
</html>

后端提供数据：

@RequestMapping("/judge")
public void a1(String name, ModelMap modelMap) {
System.out.println("a1:param->" + name);
if ("zhangsan".equals(name)) {
modelMap.addAttribute("true");
} else {
modelMap.addAttribute("false");
}
}
@RequestMapping("/ajax")
public String AjaxTest(){
return "Ajax";
}