Ajax请求的常用方式记录（作为常用copy模板）

一、Get 请求的模板（不带参数，普通请求，接收返回JSON格式的反馈数据）

  $.ajax({
    type: 'GET',
    url: ipprefix + '/GetAllTestTasksStatusData',
    dataType: 'json', //期望的后端返回数据格式
    async: false,
    success: function (res) {
      result = res;
    },
    error: function (xhr, status, error) {
      console.error('Request failed:', status, error);
    }
  });

 

二、Get 请求的模板（带请求参数，接收返回JSON格式的反馈数据）

var result = null;
$.ajax({
  type: 'GET',
  url: ipprefix + '/GetAllDataIndicators',
  data: {
    taskType: 1  // 这里添加你的请求参数
  },
  dataType: 'json', // 期望的后端返回数据格式
  async: false,
  success: function (res) {
    result = res;
  },
  error: function (xhr, status, error) {
    console.error('Request failed:', status, error);
  }
});

 

三、GET请求模板（表单提交，请求参数格式：x-www-form-urlencoded，设置接收反馈的数据格式为二进制blob，再转换为图片）

 // 发起AJAX请求获取图片
    $.ajax({
      type: 'GET',
      url: ipprefix_img + '/testUnmannedSystem/image/download',
      data: {
        path: result.data.usimage  // 这是x-www-form-urlencoded格式的参数
      },
      contentType: 'application/x-www-form-urlencoded', // 设置正确的contentType
      xhrFields: {
        responseType: 'blob' // 重要！告诉jQuery我们要接收二进制数据
      },
      success: function (response) {
        // 创建图片URL
        const imageUrl = URL.createObjectURL(response);
        console.log('无人系统图片处理后的地址imageUrl',imageUrl); 
        //结果：无人系统图片处理后的地址imageUrl blob:http://172.18.54.213:2888/5eb237ec-b911-4f10-a5fe-5a4bebfc6de9
        // 创建img元素并设置src
        const imgElement = $('<img>', {
          src: imageUrl,
          alt: '无人机系统图片',
          style: 'width:92%;height:88%; background-color: rgba(20, 255, 243, 0.53);background-size:cover;background-repeat: no-repeat;background-position:center;border:1.5px solid rgba(20, 255, 243, 1);' 

        });

        // 添加到容器中
        $('#row_1_1').empty().append(imgElement);
      },
      error: function (xhr, status, error) {
        console.error('图片加载失败:', error);
        $('#row_1_1').html('<p>图片加载失败，请稍后再试</p>');
      }
    });

 

四、POST请求（JSON格式请求参数，接收的返回数据也是JSON格式）

  $.ajax({
    type: 'POST',
    url: ipprefix + '/GetCameraInfo',
    data: JSON.stringify(
      {
        "testfieldid": Number(clickedTestFieldId)
      }
    ),
    contentType: 'application/json',
    async: false,
    success: function (res) {
      result = res;
    },
    error: function (xhr, status, error) {
      console.log('Error:', error);
    }
  });