Ajax初体验、Ajax配置、异步加载数据_ajax context.request["p"]-优快云博客

本文链接：https://blog.youkuaiyun.com/Solitude_w/article/details/108321318

Ajax初体验

1、下载JQuery包
2、在jsp页面中映入jQuery文件

<script src="${pageContext.request.contextPath}/static/js/jquery-3.4.1.js"></script>

3、编写Ajax请求

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.4.1.js"></script>

    <script>
      function a() {
        $.post({
          url:"${pageContext.request.contextPath}/t1/ajax",
          data:{"name":$("#username").val()},
          success:function (data) {
            alert(data);
          }
        })
      }

    </script>

  </head>
  <body>

  <!--失去焦点的时候，发送一个请求到后台-->
    <input type="text" id="username" onblur="a()">

  </body>
</html>

可能出现的问题：

- 在配置的时候可能会影响到静态文件的使用，如js、css
关于在SpringMVC环境访问web-inf目录下文件，其一有在SpringMVC.xml问价下加

<!-- 对静态资源文件的访问 不支持访问WEB-INF目录 -->  
    <mvc:default-servlet-handler />

如果还是不能访问，继续在配置文件中追加

<mvc:resources mapping="/res/**" location="/WEB-INF/res/" />

Ajax异步加载数据

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>

    <script src="${pageContext.request.contextPath}/static/js/jquery-3.4.1.js"></script>

    <script>
            $(function () {
                $("#btn").click(function(){
                    $.post("${pageContext.request.contextPath}/t1/a1",function (data) {
                        console.log(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="submit" value="获取数据" id="btn">
<table>
    <tr>姓名</tr>
    <tr>年龄</tr>
    <tr>性别</tr>
    <tbody id="content">

    </tbody>
</table>