实验九 Restful和ajax实现
一 实验目的
掌握restful风格程序开发；理解restful的本质；掌握axios ajax环境搭建及使用；掌握ajax两种请求（post,get）的异同；熟悉vue.js的基本原理。
二 实验内容
1、 四种方法的Restful实现
1）Get方法实现查询单条或多条数据
2）Post方法实现添加数据
先写封装数据的POJO
然后表单收集数据
Controller方法接收数据
3)使用put请求实现修改数据
首先:
然后编写请求页面
控制器处理put请求
4）使用表单结合Delete请求删除数据
请求页面:
控制器方法:
5）使用超链接控制表单发送delete请求删除数据
a.导入vue.js文件
b.创建一个a标签和一个form表单放入一个div中（为此div设置id，交由vue.js处理）
c.在html页面中导入vue.js，并创建一个vue实例挂载到上述div:
d.在控制器方法中处理请求:
附:在部署项目时找不到所需的module的解决方法,如下列图示:
若下图中第3步找不到所需的模块或项目
则点击下图第"+"号
选择"from module"
找到创建的module,按ok
然后就可以在部署中看到此module。
2 使用 ajax向服务器传送key=value数据
1）导入相关js文件
2）页面中写一按钮，挂载到vue实例，用以处理按钮click事件
3）控制器方法中处理请求
3 使用 ajax向服务器传送json数据
1）页面发送json数据请求
2）编写相应的pojo类
3）编写控制器方法进行处理
4 服务器向前端返回json数据
1）页面请求
2）控制器处理
实验内容
1、 四种方法的Restful实现
1）Get方法实现查询单条或多条数据
2）Post方法实现添加数据
先写封装数据的POJO
然后表单收集数据
Controller方法接收数据
3)使用put请求实现修改数据
首先:
然后编写请求页面
控制器处理put请求
4）使用表单结合Delete请求删除数据
请求页面:
控制器方法:
5）使用超链接控制表单发送delete请求删除数据
a.导入vue.js文件
b.创建一个a标签和一个form表单放入一个div中（为此div设置id，交由vue.js处理）
c.在html页面中导入vue.js，并创建一个vue实例挂载到上述div:
d.在控制器方法中处理请求:
2 使用 ajax向服务器传送key=value数据
1）导入相关js文件
2）页面中写一按钮，挂载到vue实例，用以处理按钮click事件
3）控制器方法中处理请求
3 使用 ajax向服务器传送json数据
1）页面发送json数据请求
2）编写相应的pojo类
3）编写控制器方法进行处理
4 服务器向前端返回json数据
1）页面请求
2）控制器处理
三 实验收获及感想
通过本次实验，我对 RESTful 风格开发有了更深入的理解，其核心在于将资源通过 URI 定位并使用标准 HTTP 方法（如 GET、POST、PUT、DELETE）操作，使接口设计更简洁规范。在搭建 Axios 环境时，学会了通过配置请求头，简化了 AJAX 操作流程。对比 GET 与 POST 请求发现，前者用于获取资源，参数暴露于 URL 且有长度限制，后者用于提交数据，参数封装在请求体中更安全。