通过ajax得到数据,显示http://localhost:8081/项目名/[object%20Object] 404 (Not Found) 错误。

今天在使用easyui-datagrid 中的toolbar,通过ajax得到数据时,出现http://localhost:8080/项目名/[object%20Object] 404 (Not Found) 错误。

toolbar: [{
               id: 'btnAdd',
               text: '添加',
               iconCls: 'icon-add',
               handler: function () {
                   $.get({
                       url:"/rz/MyServlet?method=fun",
                       });
};
}]

折腾了一个小时,不论是get还是post方法都尝试了,还是不行,最后将get|post修改成ajax,并添加type属性,就正常了。

toolbar: [{
               id: 'btnAdd',
               text: '添加',
               iconCls: 'icon-add',
               handler: function () {
                   $.ajax({
type:”get”,
                        url:"/rz/MyServlet?method=fun",
                       });
};
}]

有人说,出现标题中的问题的原因是jquery包版本太低。
  解决方法:
  1、将 .post使 .ajax;
  2、使用较高的jquery包版本。

GEThttp://localhost:8282/TaobaoVisualization/ [HTTP/1.1 200 12ms] GEThttps://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js [HTTP/2 200 OK 0ms] GEThttps://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js [HTTP/2 200 OK 0ms] GEThttp://localhost:8282/favicon.ico [HTTP/1.1 404 0ms] GET http://localhost:8282/favicon.ico 状态404 版本HTTP/1.1 传输21.31 KB(大小 21.12 KB) Referrer 政策strict-origin-when-cross-origin Accept image/webp,*/* Accept-Encoding gzip, deflate Accept-Language zh-CN,zh;q=0.8,zh-TW;q=0.7,zh-HK;q=0.5,en-US;q=0.3,en;q=0.2 Cache-Control max-age=0 Connection keep-alive Host localhost:8282 Referer http://localhost:8282/TaobaoVisualization/ User-Agent Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:88.0) Gecko/20100101 Firefox/88.0 XHRGEThttp://localhost:8282/rebuyPrediction [HTTP/1.1 404 0ms] GET http://localhost:8282/rebuyPrediction 状态404 版本HTTP/1.1 传输902 字节(大小 715 字节) Referrer 政策strict-origin-when-cross-origin Connection keep-alive Content-Language zh-CN Content-Length 715 Content-Type text/html;charset=utf-8 Date Mon, 16 Jun 2025 02:27:31 GMT Keep-Alive timeout=20 Accept */* Accept-Encoding gzip, deflate Accept-Language zh-CN,zh;q=0.8,zh-TW;q=0.7,zh-HK;q=0.5,en-US;q=0.3,en;q=0.2 Connection keep-alive Host localhost:8282 Referer http://localhost:8282/TaobaoVisualization/ User-Agent Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:88.0) Gecko/20100101 Firefox/88.0 X-Requested-With XMLHttpRequest 网络请求失败 TaobaoVisualization:170:25 ​
06-17
<template> <div class="dialog-wrapper"> <el-dialog :title="dialogTitle" v-model="dialogVisible" @close="resetForm" width="60%"> <!-- 第一行:课程称 + 课程图片 --> <div class="row-container"> <!-- 左侧:课程称输入框 --> <el-form :model="form" class="form-item-container"> <el-form-item prop="cou_name" class="input-container"> <label for="cou_name" class="label-inside">课程称</label> <textarea id="cou_name" v-model="form.cou_name" placeholder="请输入内容(最多100个字符)" class="course-name-input" maxlength="100" ></textarea> </el-form-item> </el-form> <!-- 右侧:课程图片上传框 --> <el-form :model="form" class="form-item-container"> <el-form-item prop="cou_logo" class="upload-container"> <label for="cou_logo" class="label-inside">课程图片</label> <el-upload :action="''" :on-change="handleFileChange" :show-file-list="false" :before-upload="beforeUpload" class="upload-box" > <div class="image-upload-area"> <!-- 显示已上传的图片,使用 object-fit 进行裁剪和适应 --> <img v-if="form.cou_logo" :src="form.cou_logo" alt="Uploaded Image" class="uploaded-image" /> <!-- 如果没有图片,显示上传占位文字 --> <div v-else class="upload-placeholder"> 点击上传图片 </div> </div> </el-upload> <!-- 错误提示区域 --> <div v-if="errorMessage" class="error-message"> {{ errorMessage }} </div> </el-form-item> </el-form> </div> <!-- 第二行:课程专业下拉框 --> <el-form :model="form" label-width="120px" class="form-item-container"> <el-form-item label="课程专业" prop="sbj_id" label-width="80px"> <CustomTreeSelect v-model="form.sbj_id" :data="form.subjectOptions" placeholder="请选择课程专业" :width="250" @change="handleSubjectChange" @clear="handleSubjectClear" /> </el-form-item> </el-form> <!-- 底部按钮 --> <template #footer> <div class="dialog-footer"> <el-button type="primary" @click="createNewCourse">创建新课程</el-button> <el-button @click="resetForm">取消</el-button> </div> </template> </el-dialog> </div> </template> <script setup> import {reactive, computed, ref, watch} from 'vue' import CustomTreeSelect from "@/views/training/teachManage/customTreeSelect.vue"; import {uploadCourseImage} from "@/api/system/courses.js"; // 初始化表单数据 const form_data_init = { subjectOptions: [], cou_name: '', cou_logo: '', sbj_id: '', } const errorMessage = ref(''); // 错误信息 const isUploading = ref(false); // 用于防止重复提交 // 使用 reactive 创建表单数据 const form = reactive({...form_data_init}) // 接收父页面传递的 props 数据 const props = defineProps({ dialogTitle: String, dialogVisible: Boolean, formData: Object, // 父页面传递的 formData }) // 父页面传递数据变化时更新 form.subjectOptions watch(() => props.formData, (newVal) => { if (newVal?.form?.subjectOptions) { form.subjectOptions = newVal.form.subjectOptions; } }, {immediate: true}) // immediate: true 表示初始化时就触发一次 const emit = defineEmits(['update:dialog-visible', 'reloaded']) const dialogVisible = computed({ get: () => props.dialogVisible, set: (value) => emit('update:dialog-visible', value) }) const resetForm = () => { form.cou_name = '' form.cou_logo = '' form.sbj_id = '' errorMessage.value = ''; // 清除错误信息 dialogVisible.value = false; // 关闭弹窗 } // 文件上传前的验证 const beforeUpload = (file) => { const validTypes = ['image/jpeg', 'image/png', 'image/gif']; const isValid = validTypes.includes(file.type); if (!isValid) { errorMessage.value = '* 上传文件类型限仅:jpg、png、gif,当前文件被禁止上传'; form.cou_logo = ''; // 清除图片显示 } else { errorMessage.value = ''; // 清除错误信息 } return isValid; // 验证通过才允许上传 }; const handleFileChange = (file, fileList) => { // 创建一个临时URL显示图片 const imageUrl = URL.createObjectURL(file.raw); // 生成临时 URL form.cou_logo = imageUrl; // 将临时 URL 设置为 form.cou_logo }; // 上传图片到后端的函数 const uploadImage = async (file) => { try { const formData = new FormData(); formData.append('file', file.raw); const response = await uploadCourseImage(formData); if (response) { const imageUrl = `http://192.168.0.205/upload/Course/`+response; form.cou_logo = imageUrl; // 更新上传的图片路径 } } catch (error) { errorMessage.value = '图片上传失败,请重试'; } finally { isUploading.value = false; } } const createNewCourse = () => { } const handleSubjectChange = (value) => { } const handleSubjectClear = () => { } </script> <style scoped> .row-container { display: flex; justify-content: space-between; gap: 25px; /* 中间保留25px空白 */ width: 100%; margin-bottom: -5px; } /* 每个 form 占一半宽度 */ .form-item-container { flex: 1; position: relative; } /* 左侧输入框样式 */ .input-container { width: 100%; } .course-name-input { width: 100%; height: 200px; font-size: 16px; border: 1px solid #dcdfe6; border-radius: 8px; padding-top: 35px; padding-left: 12px; resize: none; margin: 0; box-sizing: border-box; } .course-name-input::placeholder { color: #999; font-style: italic; } /* 图片上传样式 */ .upload-container { width: 100%; position: relative; } .upload-box { width: 100%; height: 200px; border: 2px dashed #dcdfe6; border-radius: 8px; display: flex; justify-content: center; align-items: center; cursor: pointer; } .upload-placeholder { color: #999; font-size: 16px; } .label-inside { position: absolute; top: -12px; left: 10px; font-size: 14px; color: #999; background: #fff; padding: 0 5px; } .input-container label, .upload-container label { top: 3px; } .dialog-footer { display: flex; justify-content: flex-end; gap: 10px; } /* 错误信息样式 */ .error-message { color: red; font-size: 14px; margin-top: 5px; text-align: center; } /* 图片上传容器样式 */ .upload-container { width: 100%; position: relative; } .upload-box { width: 100%; height: 200px; /* 设置容器的高度 */ border: 2px dashed #dcdfe6; border-radius: 8px; display: flex; justify-content: center; align-items: center; cursor: pointer; } .upload-placeholder { color: #999; font-size: 16px; } /* 图片上传容器样式 */ .upload-container { width: 100%; position: relative; } .upload-box { width: 100%; height: 200px; /* 设定容器高度 */ border: 2px dashed #dcdfe6; border-radius: 8px; display: flex; justify-content: center; align-items: center; cursor: pointer; overflow: hidden; /* 防止超出的图片部分溢出 */ } .upload-placeholder { color: #999; font-size: 16px; } .uploaded-image { width: 100%; /* 让图片宽度占满容器 */ height: 100%; /* 让图片高度占满容器 */ object-fit: cover; /* 保证图片保持比例并覆盖整个容器 */ object-position: center; /* 确保图片居中显示 */ } .image-upload-area { width: 100%; height: 100%; position: relative; display: flex; justify-content: center; align-items: center; } </style> 为啥我这个页面会一直提示这个异常,我根本没有去调用这个接口啊:ajax.ts:80 POST http://localhost:88/manage/courseInfo/courseInfoIndex 404 (Not Found) ajaxUpload @ ajax.ts:80 doUpload @ upload-content.vue:187 await in doUpload upload @ upload-content.vue:124 await in upload uploadFiles @ upload-content.vue:80 handleChange @ upload-content.vue:197 callWithErrorHandling @ runtime-core.esm-bundler.js:199 callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:206 invoker @ runtime-dom.esm-bundler.js:716 use-handlers.ts:27 UploadAjaxError: fail to post 404 at getError (ajax.ts:22:10) at XMLHttpRequest.<anonymous> (ajax.ts:62:29) handleError @ use-handlers.ts:27 onError @ upload-content.vue:183 () @ ajax.ts:62 XMLHttpRequest.send ajaxUpload @ ajax.ts:80 doUpload @ upload-content.vue:187 await in doUpload upload @ upload-content.vue:124 await in upload uploadFiles @ upload-content.vue:80 handleChange @ upload-content.vue:197 callWithErrorHandling @ runtime-core.esm-bundler.js:199 callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:206 invoker @ runtime-dom.esm-bundler.js:716 2client:223 [vite] hot updated: /src/views/training/courseInfo/courseAdd.vue
最新发布
10-30
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值