ajax 传实体对象,前端ajax或axios发送数据后端实体类接受(实例和报错原因)

本文介绍了在前端使用Ajax或Axios发送数据到后端时可能遇到的报错原因及解决方案。包括前端数据获取、发送、数据类型设置,以及后台实体类接收的注意事项,如变量的public属性、数据类型和驼峰命名法。通过实例和代码展示了解决这些问题的方法。
摘要由CSDN通过智能技术生成

小喵最近在学习用java做前后端数据双向交互。

用到最多的就是ajax和vue组件的axios来传数据到后端。

首先,小喵在学习的过程中发现如果在数据传输过程中各种报错的话,可能是在哪些方面的。

报错原因

情况1,有可能是js都没有获取到数据(表单数据,或者是其他数据)。这个时候需要通过html的开发者工具里,小喵一般是用console.log()来输出结果看是否会是js没有获取到表单数据

情况2,有可能是js获取到数据,但是并没有成功发送数据出去。遇到这种情况,小喵会打开html的开发者工具的Network里,看对应的数据包的错误代码是否是404错误,如果是404就可能是js获取到数据但没有发送成功,如果是200正确就是发送成功。

bb5558ca69f3be64d7aaea1f01e12e80.png

(Network里,看发送数据包的代码)

下拉后可以看到对应的具体数据

如果是404错误,前台发送错误的原因有哪些呢?

检查ajax的type是post还是get,然后去看后台是否对应写错了。

检查ajax的url地址是否写对,再去看后台接受的url地址。

检查ajax的dataType是什么类型?一般是json。一般有6种,xml,html,script,json,jsonp,text

contentType:"application/json;charset=UTF-8"

### Vue.js 前端网站开发与 MySQL 数据库交互大作业示例 #### 一、项目概述 为了帮助理解如何利用Vue.js构建前端网站并与其后端的MySQL数据库进行有效交互,可以设计一个简单的在线书店管理系统作为实例。此系统允许用户查看书籍列表、添加新书目至个人收藏夹,并能管理员工执行增删改查操作。 #### 二、环境准备 - 安装Node.js和npm工具链来支持JavaScript包管理和运行时环境。 - 使用`express-generator`创建Express服务器应用程序骨架[^3]。 ```bash npx express-generator bookstore --view=ejs && cd bookstore ``` - 初始化Git仓库以便版本控制: ```bash git init . ``` - 设置MySQL数据库连接参数,在根目录下新建`.env`文件配置如下变量: ```plaintext DB_HOST=localhost DB_USER=root DB_PASSWORD=yourpassword DB_NAME=bookstore_db PORT=3000 ``` #### 三、建立模型层(Model Layer) 定义Book实体类表示每一条记录的数据结构, 并编写相应的CRUD方法用于访问存储于关系型数据库内的信息表单. ```javascript // models/bookModel.js const { Pool } = require('pg'); require('dotenv').config(); class Book { constructor(id, title, author) { this.id = id; this.title = title; this.author = author; } static async getAll() { const pool = new Pool({ host: process.env.DB_HOST, user: process.env.DB_USER, password: process.env.DB_PASSWORD, database: process.env.DB_NAME }); try { let res = await pool.query(`SELECT * FROM books`); return res.rows.map(row => new Book(row.id, row.title, row.author)); } finally { await pool.end(); } } // ... other CRUD methods ... } module.exports = Book; ``` 注意这里使用的是PostgreSQL客户端池化机制(Pool),对于实际部署建议采用持久化的连接方式而不是每次查询都重新初始化Pool对象. #### 四、视图层(View Layer) 在前端部分我们将基于Vue CLI脚手架搭建SPA(Single Page Application), 创建名为`vue-bookstore-client`的新工程. 安装依赖项之后编辑main.js引入axios HTTP client library方便发起AJAX请求获取远程API响应数据. ```bash vue create vue-bookstore-client cd vue-bookstore-client yarn add axios element-plus ``` 接着修改App.vue组件模板以展示来自后端接口返回的结果集. ```html <template> <div class="app"> <h1>Online Book Store</h1> <ul v-if="books.length > 0"> <li v-for="(item,index) in books" :key="index">{{ item.title }} by {{ item.author }}</li> </ul> <p v-else>No book found.</p> <button @click="fetchBooks">Refresh List</button> </div> </template> <script setup lang="ts"> import { ref,onMounted} from 'vue'; import axios from "axios"; let books = ref([]); async function fetchBooks(){ try{ let response =await axios.get('/api/books'); console.log(response.data); books.value=response.data; }catch(error){ alert("Failed to load data"); } } onMounted(() => { fetchBooks() }) </script> ``` 上述代码片段展示了如何通过Axios发送GET请求调用位于同一域名下的/api/books路径对应的RESTful Web Service从而取得JSON格式编码后的图书集合[^2]. #### 五、控制器层(Controller Layer) 最后一步是在server side即node server内部实现业务逻辑处理程序负责解析HTTP Request并将结果封装成Response反馈给Client Side. 修改routes/index.js文件加入必要的路由映射规则. ```javascript var express = require('express'); var router = express.Router(); const Book=require('../models/bookModel'); /* GET home page */ router.get('/', (req,res,next)=>{ res.render('index',{title:'Express'}); }); /* API endpoint for fetching all books */ router.get("/api/books", async(req,res)=>{ try{ let result=await Book.getAll(); res.json(result); }catch(err){ next(err); }}); module.exports = router; ``` 以上就是整个前后端分离架构的应用案例说明,它不仅涵盖了基本的功能需求同时也体现了现代web应用开发过程中所遵循的最佳实践原则.
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值