SpringMVC学习笔记6：Ajax初识

最新推荐文章于 2024-08-23 15:54:50 发布

Vincent9847

最新推荐文章于 2024-08-23 15:54:50 发布

阅读量115

点赞数

分类专栏： SpringMVC 文章标签： ajax jquery js java

本文链接：https://blog.csdn.net/Vincent9847/article/details/116715833

版权

SpringMVC 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、Ajax是什么？

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

二、Ajax应用

1.原始的HttpServletResponse处理

1.编写AjaxController

@Controller
public class AjaxController {

   @RequestMapping("/test1")
   public void ajax1(String name , HttpServletResponse response) throws IOException {
       if ("ajax1".equals(name)){
           response.getWriter().print("true");
      }else{
           response.getWriter().print("false");
      }
  }
}

2.导入jquery

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js"></script>

3.编写页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
 <head>
   <title>$Title$</title>
  <%--<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>--%>
   <script src="${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js"></script>
   <script>
       function test1(){
           $.post({
               url:"${pageContext.request.contextPath}/test1",
               data:{'name':$("#txtName").val()},
               success:function (data,status) {
                   alert(data);
                   alert(status);
              }
          });
      }
   </script>
 </head>
 <body>

<%--onblur：失去焦点触发事件--%>
用户名:<input type="text" id="txtName" onblur="test1()"/>

 </body>
</html>

4.结果

当我们鼠标离开输入框的时候，可以看到发出了一个ajax的请求！后台返回结果！

2.Springmvc实现

1.编写

@RestController
public class AjaxController {
    @RequestMapping("/test1")
    public List<User> ajax1(){
       List<User> list = new ArrayList<User>();
       list.add(new User("xiaoyi",1,"男"));
       list.add(new User("xiaoer",2,"男"));
       list.add(new User("xiaosan",3,"男"));
       return list; //由于@RestController注解，将list转成json格式返回
    }
}

2.页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
   <title>Title</title>
</head>
<body>
<input type="button" id="btn" value="获取数据"/>
<table width="80%" align="center">
   <tr>
       <td>姓名</td>
       <td>年龄</td>
       <td>性别</td>
   </tr>
   <tbody id="content">
   </tbody>
</table>

<script src="${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js"></script>
<script>

   $(function () {
       $("#btn").click(function () {
           $.post("${pageContext.request.contextPath}/test1",function (data) {
               console.log(data)
               var html="";
               for (var 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>
</body>
</html>

3.注册提示效果

4.获取接口

Vincent9847

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SpringMVC学习笔记6：Ajax初识

一、Ajax是什么？AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。二、Ajax应用1.原始的HttpServletResponse处理 1.编写AjaxController@Controllerpublic class AjaxContr.
复制链接

扫一扫

专栏目录