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

猜你喜欢