web项目创建

创建普通的maven项目,我们手动添加依赖

1.<!--指定项目打包方式-->
<packaging>war</packaging>
2.<!--springBoot整合JSP添加依赖 -->
<!--servlet依赖 -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
</dependency>

<!--jstl依赖 -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
</dependency>

<!--使jsp页面生效 -->
<dependency>
<groupId>org.apache.tomcat.embed</groupId>
<artifactId>tomcat-embed-jasper</artifactId>
</dependency>

定义启动类

2020-10-30_192715.png

修改启动项目录

2020-10-30_192405.png

修改YML配置

2020-10-30_193034.png

创建jsp页面的目录结构

2020-10-30_193253.png

异步方式调用

AJAX原理

特点: 局部刷新:异步调用(加载)
调用原理说明:
1.用户将请求发给AJAX引擎进行处理.之后等待引擎返回数据.
2.ajax引擎接收到用户的请求之后.,代替用户访问后端服务器,
3.后端服务器接收请求之后,执行业务处理. 并且将返回值返回.
4.ajax引擎收到返回值结果之后,要在第一时间通知给用户. 利用回调函数将数据传给客户端.ajax调用成功.
在这里插入图片描述

AJAX的一些技巧
遍历索引用 in 遍历一条数据用 of

<script type="text/javascript">
   /* 页面加载完成后执行 */
   $(function(){
      
      /*
         需求:利用ajax方式动态获取user数据信息
         请求网址:localhost/findAjax
         知识点:
            返回值类型:可以根据数据自动匹配类型,所以可以省略
            1.$.get(url地址,param参数,回调函数,返回值类型)
            2.$.post(.....)
            3.$.getJSON(.....)
      */
      $.get("findAjax",{id:40},function(res){
         //1.可以使用js中的for循环
         /* for(let index in res){} */
         /* index表示索引 使用 in  */
         /* user 表示对象 使用 of */
            
         for(let user of res){
            let id=user.id;
            let name=user.name;
            let age=user.age;
            let sex=user.sex;
            let tr ="<tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+sex+"</td></tr>";
            $("#tableId").append(tr);
         }
      })
   })
</script>

禾白少二
57 声望26 粉丝