网站首页 > 知识剖析 正文
一、键值对方式提交
AJAX提交
<script type="text/javascript">
function submitData() {
//1.获取需要提交的数据
var num = $("#num").val();
var name = $("#name").val();
var sex = $("#sex").val();
var age = $("#age").val();
//2.通过ajax提交数据到“stu/add”
$.post("stu/add",{stuNum:num,stuName:name,stuSex:sex,stuAge:age},function(data){
console.log(data);
},"json");
}
</script>
控制器接收
方式1:属性接收
@RequestMapping("stu/add")
@ResponseBody
public HashMap<String,Object> add(String stuNum,String stuName,String stuSex,int stuAge){
System.out.println(stuNum);
System.out.println(stuName);
System.out.println(stuSex);
System.out.println(stuAge);
HashMap<String,Object> map = new HashMap<>();
map.put("code",1);
return map;
}
方式2:对象接收
@RequestMapping("stu/add")
@ResponseBody
public HashMap<String,Object> add(Student stu){
System.out.println(stu);
HashMap<String,Object> map = new HashMap<>();
map.put("code",1);
return map;
}
小结:当你提交的是键值对的格式的时候,你可以用属性接受,也可以用对象直接接受。
二、提交JSON格式的字符串
AJAX提交 如果ajax提交的是满足json格式的字符串,则需要设置:contentType:"application/json"
function submitData() {
//1.获取需要提交的数据
var num = $("#num").val();
var name = $("#name").val();
var sex = $("#sex").val();
var age = $("#age").val();
var obj = {}; // var obj = [];
obj['stuNum'] = num;
obj['stuName'] = name;
obj['stuSex'] = sex;
obj['stuAge'] = age;
//转换成json格式
var jsonStr = JSON.stringify(obj);
$.ajax({
url:"stu/add",
type: "POST",
//data:jsonStr,表示提交到控制器的是字符串(字符串满足json格式) -->contentType:"application/json"
data:jsonStr,
contentType:"application/json",
success:function(data){
console.log(data);
}
});
}
控制器接收数据如果前端提交数据
contentType的值只要为"application/x-www-form-urlencoded"一律使用@RequestBody注解处理数据
@RequestMapping("stu/add")
@ResponseBody
public HashMap<String,Object> add(@RequestBody Student stu){
System.out.println(stu);
HashMap<String,Object> map = new HashMap<>();
map.put("code",1);
return map;
}
①@RequestBody是作用在形参列表上,用于将前台发送过来固定格式的数据【xml格式 或者 json等】封装为对应的 JavaBean 对象。
②@ResponseBody的作用其实是将java对象转为json格式的数据。
小结:前端一定要学会利用JSON.stringify(obj)转换成字符串,后台响应的数据转换成json格式用@ResponseBody 即可。
三、提交对象
AJAX提交
如果提交的数据是对象,设置 contentType=“application/x-www-form-urlencoded”,或者不设置contentType
(默认值即为application/x-www-form-urlencoded)
function submitData() {
var num = $("#num").val();
var name = $("#name").val();
var sex = $("#sex").val();
var age = $("#age").val();
var obj = {}; // var obj = [];
obj['stuNum'] = num;
obj['stuName'] = name;
obj['stuSex'] = sex;
obj['stuAge'] = age;
$.ajax({
url:"stu/add",
type: "POST",
//data:obj,表示提交到控制器的是JSON对象 -->ontentType:"application/x-www-form-urlencoded"
data:obj,
contentType:"application/x-www-form-urlencoded",
success:function(data){
console.log(data);
}
});
}
后台实现代码
@RequestMapping("stu/add")
@ResponseBody
public HashMap<String,Object> add(Student stu){
System.out.println(stu);
HashMap<String,Object> map = new HashMap<>();
map.put("code",1);
return map;
}
猜你喜欢
- 2024-11-15 AJAX教程(ajax教程 csdn)
- 2024-11-15 php手把手教你做网站(二十四)jquery ajax上传大的附件
- 2024-11-15 前端开发之用以处理表单的jQuery控件之AJAX请求
- 2024-11-15 全新web前端开发教程之Jquery Ajax
- 2024-11-15 Ajax异步操作集合啦(ajax异步处理)
- 2024-11-15 前端面试题《AJAX》(ajax面试题2020)
- 2024-11-15 Python | Django 通过 form 表单和 ajax 上传文件
- 2024-11-15 前端监控 SDK 开发分享(前端监控 sdk 开发分享方案)
- 2024-11-15 Ajax请求时,请求类型,常用的几种 Content-Type json form-data xml
- 2024-11-15 [前端请求]Ajax知识点 Jquery接口封装 fetch原生js请求
- 04-26workerman 自定义的协议如何解决粘包拆包
- 04-26Everything 在应急响应中的使用
- 04-26后端开发干货:PHP源码阅读技巧
- 04-26php8属性注解使用教程
- 04-26PHP 中不可能存在的 XXE
- 04-26PHP-FPM 学习记录
- 04-26【玩法悉知】:领地战玩法全解析!
- 04-26PHP实现URL编码、Base64编码、MD5编码的方法
- 最近发表
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)