记录写MVC项目的时候遇到的第六个bug（ajax使用json接收对象以及拼接html代码动态修改部分界面）

在继ajax利用json接收对象出现问题之后 不出意外 我的接收对象也出现了问题
从前端传过来的json字符串不知道怎么解析 以及如何利用ajax更新div部分代码
主要是不会拼接字符串
直接上全部代码

<script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>
    <script>
        function a(id,menuid,menuname,price,pic,userid){
            var img = {};
            img['menuid'] = menuid;
            img['pic'] = pic;
            var menu = {};
            menu['menuid'] = menuid;
            menu['id'] = id;
            menu['menuname'] = menuname;
            menu['price'] = price;
            menu['img'] = img;
            // var menujson = JSON.stringify(menu);
            var shopping = {};
            shopping['userid'] = ${userid};
            shopping['menuid'] = menuid;
            shopping['num'] = 1;
            shopping['menu'] = menu;

            var shoppingJson = JSON.stringify(shopping);
            $.ajax({
                type:"post",
                url:"${pageContext.request.contextPath}/addShopping",
                //设置传递过去的data的类型为json
                contentType:"application/json;charset=utf-8",
                //设置接收的数据类型为text
                dataType:"text",
                data:shoppingJson,
                success:function (data){
                    // window.location.href = "/login?userid="+userid+"&password=123456";
                    var array = JSON.parse(data);

                    var str = "";
                    //先清空div代码（清空购物车）
                    $('.temp').html("");
                    //这里的tem我是理解成数组下标 当被遍历的元素不是数组是一个对象的时候 tem代表对象属性
                    for (tem in array) {
                        if (array[tem]!=null){
                            console.log("start")
                            console.log("array:"+array)
                            console.log("array[0].menuid:"+array[tem].menuid)
                            console.log("array[0].menu.img.pic:"+array[tem].menu.img.pic)
                            //这里注意双引号的转义
                            str += "<div class=\"thumbnail\">";
                            str += "<img src=\"../../uploadImg/"+array[tem].menu.img.pic+"\" width=\"100px\" height=\"200px\">";
                            str += "<div class=\"caption\">";
                            str += "<h3>"+array[tem].menu.menuname+"</h3>";
                            str += "<p>单价:"+array[tem].menu.price+"</p>";
                            str += "<p>数量:"+array[tem].num+"</p>";
                            str += "<p> <a href=\"#\" class=\"btn btn-primary\" role=\"button\">删除购物车</a> </p>";
                            str += "</div>";
                            str += "</div>";
                        }


                    }
                    $('.temp').html(str);
                    // alert(str);
                    console.log(str);
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    /*弹出jqXHR对象的信息*/
                    alert(jqXHR.responseText);
                    alert(jqXHR.status);
                    alert(jqXHR.readyState);
                    alert(jqXHR.statusText);
                    /*弹出其他两个参数的信息*/
                    alert(textStatus);
                    alert(errorThrown);
                }
            })
        }
    </script>

这里关于forin循环遍历josn数组 以及循环遍历json对象都可以参考一下这篇文章forin循环遍历json

success:function (data){
                    // window.location.href = "/login?userid="+userid+"&password=123456";
                    var array = JSON.parse(data);

                    var str = "";
                    //先清空div代码（清空购物车）
                    $('.temp').html("");
                    //这里的tem我是理解成数组下标 当被遍历的元素不是数组是一个对象的时候 tem代表对象属性
                    for (tem in array) {
                        if (array[tem]!=null){
                            console.log("start")
                            console.log("array:"+array)
                            console.log("array[0].menuid:"+array[tem].menuid)
                            console.log("array[0].menu.img.pic:"+array[tem].menu.img.pic)
                            //这里注意双引号的转义
                            str += "<div class=\"thumbnail\">";
                            str += "<img src=\"../../uploadImg/"+array[tem].menu.img.pic+"\" width=\"100px\" height=\"200px\">";
                            str += "<div class=\"caption\">";
                            str += "<h3>"+array[tem].menu.menuname+"</h3>";
                            str += "<p>单价:"+array[tem].menu.price+"</p>";
                            str += "<p>数量:"+array[tem].num+"</p>";
                            str += "<p> <a href=\"#\" class=\"btn btn-primary\" role=\"button\">删除购物车</a> </p>";
                            str += "</div>";
                            str += "</div>";
                        }


                    }
                    $('.temp').html(str);
                    // alert(str);
                    console.log(str);
                },

这里面对象的嵌套关系也要重点注意