原生JQ利用AJAX写项目的基本思路

蟹蟹22

已于 2022-08-29 19:27:05 修改

阅读量246

点赞数 2

文章标签： servlet

于 2022-08-29 19:20:31 首次发布

本文链接：https://blog.csdn.net/m0_55673399/article/details/126590730

版权

先引入jq文件、创建一个生命周期函数

下面引入的jq是在线的，也可以引入本地的

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

$(function(){

})

把基本请求路径，后续需要的变量设为全局变量

var urlBase='基本路径'

给对应的按钮绑定响应的事件

$('类名').click(function(){

})

封装AJAX

$.ajax(function(){

//声明变量

        var obj={

        变量：' ',

        变量：' '

        }

        url:'',

        method:'',

        data:Qs.stringify(obj),

        success(res){

        },

        erro(res){

        }

})

示例：

$(function () {
      // 声明全局Ajax请求基础路劲
      var baseUrl = "http://"
      // 全局user对象
      var user = null
      // 登录按钮：点击登录 要获取token并存储起来，并配置带Ajax的全局中
      $('.login').click(function () {
        var obj = {
          username: "admin1",
          password: 123321
        }
        // 发送登录请求
        $.ajax({
          // 请求路径
          url: baseUrl + '/user/login',
          // 请求方式
          method: 'post',
          // 请求头
          headers: {
            "Content-Type": "application/json"
          },
          // 携带参数
          data: JSON.stringify(obj),
          // 成功回调
          success (res) {
            console.log(res);
            // 存储token
            sessionStorage.setItem('token', res.data.token)
            // 全局配置请求全部携带token
            $.ajaxSetup({
              headers: {
                "Authorization": sessionStorage.getItem('token')
              }
            })
            $('.load').trigger('click')
          },
          // 失败回调
          error (res) {
          }
        })
      })
})