ajax函数
$.ajax({
url:"/deleteFromCart", //请求的url地址
type:"post", //请求方式
async: true, //请求是否异步,默认为异步,这也是ajax重要特性
data:{"cartId":cartId}, //参数值 可以是各种类型的,名称与java方法参数一致即可(参数绑定)
dataType:"json", //返回格式为json
success:function(data){ //请求成功后的回调函数
},
error:function(){ //请求失败后的回调函数
alert("操作失败");
}
});
需要注意的是 各参数间的分隔符是"," 各参数名与值间的分隔符":"
ajax函数后台传回的数据(参考链接https://blog.csdn.net/dreamstar613/article/details/61913970)
1.后台返回list集合并遍历(下面是自己写的代码 感觉其他应该类似)
java代码
@ResponseBody
@RequestMapping("/selectOrderJudge")
public Map<String,Object> selectOrderJudge(HttpServletRequest request,String status) {
Map<String,Object> map = new HashMap<String,Object>();
String memberId = request.getSession().getAttribute("memberId").toString();
//System.out.println(status);
List<BusinessOrder> businessOrderList = orderJudgeService.selectOrderJudge(status,memberId);
//System.out.println(businessOrderList);
if(businessOrderList.size()>0) {
map.put("businessOrderList", businessOrderList);
map.put("code", 1);
}else {
map.put("code", 0);
}
return map;
}
js代码
$(".content-nav li").on("click", function(event){
$(".content-nav li").removeClass("nav-active");
$(event.target).addClass("nav-active");
//alert("value=" + $(".nav-active .status").val());
var status = $(".nav-active .status").val();
$.ajax({
url:"/selectOrderJudge",
type:"post",
data:{"status":status},
success:function (data) {
//console.log(data);
if(data.code==1){
var str = "";
$.each(data.businessOrderList,function(index,item){
if(item.serviceJudge.status==1){
//console.log(item.id);
str+=`
<div class="article">
<img src="" alt="图片" />
<ul class="article-info">
<li text="` + item.orderInfo +`"> ` + item.orderInfo + `</li>
</ul>
<p th:text="` + item.createTime + `">`+ item.createTime +`</p>
<p class="evaluate_btn" onclick="gotoEvaluation('` + item.serviceJudge.id +`')">去评价</p>
</div>
`;
}else{
str+=`
<div class="article">
<img src="" alt="图片" />
<ul class="article-info">
<li text="` + item.orderInfo +`"> ` + item.orderInfo + `</li>
</ul>
<p th:text="` + item.createTime + `">`+ item.createTime +`</p>
<p class="evaluate_btn">已评价</p>
</div>`;
}
});
$(".box").html(str);
}else{
$(".box").html("<p style='font-size:20px'>未找到订单</p>");;
}
},
error:function(){
console.error(arguments[1]);
}
});
})
2.返回一个页面
java代码
不能有注解@ResponseBody
return "error"
js代码
$("#content-wrapper").html(data);
3.返回一个基本类型String,Long等
java代码
用@ResponseBody注解
return msg; //返回一个String类型
js代码
alert(msg);
4.返回一个实体类
java代码
添加注解@ResponseBody
return ajaxMsg; // 返回给前台一个实体类,包括是否操作成功,及失败原因
js代码
success : function(data) {
var jsonData = JSON.parse(data);
if (jsonData .flag == 0) {//请求成功
alert("后台操作成果");
} else {
alert(jsonData.msg);
}
}
前后台交互的方式
<form action="delete"></form> 表单action提交
<a href="@{/delete?id=} + ${user.id}"></a>
<img th:src="@{/headImg?id=} + ${session.member.id}" onerror="defaultImg(this)"/>
$.ajax()
ajax参数类型
1.字符串
data:{
"id":id,
"name":name,
"age":age
},
2.对象类型
var id = $(".id").val();
var name = $(".name").val(); //var id = $("#name").text();
var age = $(".age").val();
var student = {
"id":id,
"name":name,
"age":age
};
...
data{student},
...
public Map<Sting,Object> myStudent(Student student){
...
return map;
}