ajax函数实例

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;
}