前后端交互工具 ---- Ajax 的使用

文章目录

• 前后端交互工具 ---- Ajax 的使用
  • 1. 在前端的页面里引入jQuery 第三方库
  • 2.基于jQuery里面的ajax进行使用
  • 回调函数
  • Ajax 的跨域问题
  • 怎么解决跨域问题呢？

前后端交互工具 ---- Ajax 的使用

1. 在前端的页面里引入jQuery 第三方库

在这里插入图片描述

直接加一个script标签，src指定对应的jQuery链接

在这里插入图片描述

2.基于jQuery里面的ajax进行使用

$ 是jQuery里面的一个对象(变量)

jQuery中的所有 API都是通过 $ 调用的

ajax是jQuery里面的一个api，要通过$ 进行调用

ajax 里面的参数是一个对象类型的参数，使用{}

这个对象里面，三个属性

在这里插入图片描述

在这里插入图片描述

(1) type

表示发送http请求的方法

(2) url

发送的服务器资源地址，从哪个具体地址返回响应

(3) success

  是一个回调函数，通过这个回调函数，拿到响应的相关信息。

  function() ，回调函数里面有两个参数，一个是data表示响应的正文body,一个是status表示响应的状态码描述信息。

回调函数

一定要在这里说清楚，到底啥事回调函数呢？

回调函数是在请求发送成功之后调用这个函数进行接收响应的响应。

Ajax 的跨域问题

  ajax为了保证安全性，要求发起ajax请求的页面，和接收ajax请求的服务器，应在同一个域名下/地址下。

  如果发起请求的页面 对应的域名(域名1) 和 接收ajax请求的服务器(域名2)，如果域名1 和域名2 不相同，那么就认为是一次跨域请求

在这里插入图片描述

ajax 默认情况下，不允许跨域

怎么解决跨域问题呢？

  在服务器代码这里做一些特别的设置，就可以解开ajax不能跨域的限制。比如加 @CrossOrigin 注解，或者写一个配置类