V3-04 : 利用ssm, ajax实现动态页面

目录

使用ajax

ajax小结: (复习)

CROS介绍

[不完整,等待整改]

---

1.SpringMvc 常用规则

2. 请求方式: get/post/put/delete

get: 查询  post : form表单提交
put: 修改操作

delete:  删除操作

restful---get请求方式

3. Ajax业务问题

4. 跨域问题@CrossOrigin

层级代码: ---->

2. Json结构

2.1 json介绍

由来: http请求协议;  1. 字符串 2. 字节信息  a-->b获取数据  http请求

2.2 JSON基本格式(两种结构)

        ---->1. 对象格式(object)  无序key-value集合  {}

        ---->2. 数组  []

2.3 嵌套格式[{  },{  },...]

扩展练习: 五层嵌套

[1]

使用ajax

下载jQuery官网上的文件js

1. 特点 : 异步访问 局部刷新

2. ajax说明:  实现前后端交互 最为常用的一种方式

发展: 

3. ajax为何能异步访问(原理)

   异步:  用户发起请求, 要求作出相应, 用户可以做其他操作 如果后端服务器返回数据则通过

回调函数 通知客户(多次刷新)

/**
   data参数传递: 
 * 1. 对象的方式实心数据传递
 * 语法: {key: value,key2:value2}
 * 2. 拼接字符串的方式
 * 语法: key1=value1&key2=value2
 */

---------->ajax代码:

关于ajax返回值的数据说明

for循环三种操作

2.

3.(最简单,最常用)

js模板字符串语法

说明: 原生的js中经常出现字符串拼接  换行  ""+CRLF+

优化: ES6-7 提供新的模板语法反引号 ``

***

ajax代码展示:

<script src="jquery-3.6.0.min.js"></script>
<script>
    $(function () {
        alert("页面加载完成!!!")
       
        $.ajax({
            type: "get",//制定请求方式
            url: "http://localhost:8090/findAll",
            contentType: "application/json;charset=utf-8",
            data: "id=100&name=tom&age=18", //?后面拼接的参数(代替form表单)
            //回调函数
            success: function (data) {
              
                for (user of data) {
                   
                    let tr = `
					<tr align="center" height="20px">
                        <td>${user.id} </td>
                        <td>${user.name} </td>
                        <td>${user.age} </td>
                        <td>${user.sex} </td>
                    </tr>
					`
                    $("#tab1").append(tr)
                }
            },
            error: function (data) {
                alert("失败!!");
            }
        })
    });
</script>

var与let的区别

var  id: 表示定义了一个变量ID, 全局范围, 

let(作用域问题) 局部变量

var 可以重名  之前方法很容易被覆盖 var非常不好,不用

const: 全局变量(常量)

--------> 索引:  var 与let的区别

ajax小结: (复习)

1. 局部刷新, 异步访问

2. 问什么可以异步:  核心思想 ajax引擎(第三方代理)

3. 回调函数  success/error 进行给用户返回是否成功信息

4. ajax传值两种写法

        1. 对象写法: {key:value, key1: value1}

        2. 字符串拼接 key=value&key2=value2

5. 循环变量方式

        1. 常规

        2. in 下标

        3. of  对象   user of data

6. 模板字符串的用法  ``

        取值方式:   ${对象. 属性}

7. let var const的区别--->不要用var

8. 跨域问题

同源策略

8.1 介绍: 

练习:   

1. --------------->

这个是跨域请求: DNS不同  一模一样才可以,对应也不行,映射也是跨域

2. ---------------->

这个同域请求:  http默认端口号是80  上下相同

如果改成8080等 则为跨域请求

CROS介绍

跨域资源共享

***

[不完整,等待整改]