解决“使用Ajax发送请求时，响应数据对象.属性为undefined”的问题（将JSON串转换成JavaScript对象）

1.问题：在使用Servlet+Ajax进行前后端进行数据交互时，我在后端的数据响应回来是存在的，但是通过数据对象.属性获取属性值时，值全部为undefined。并且我也对前后端的数据进行简单的调试了。打印出来的对象都是存在的，但是获取的属性值全部为undefined。

2.代码分析：

// 前端中发送请求的代码：

 $(function() {
        // sessionStorage
        let bid = localStorage.getItem("bid");
        console.log("bid:"+bid);
        $.get({
            url:"/ketang7_27/book/SelectBookInfoServlet.do",
            data:"bid="+bid,
            success:function(book){
                console.log(book);
                // 进行页面的渲染
                $(".bookInfo").html("<p>图书名称："+book.bname+"</p>"+
                    "<p>图书作者："+book.author+"</p>"+
                    "<p>图书价格："+book.price+"</p>"+
                    "<p>图书图片：<img src='"+book.image+"' width=\"200\" height=\"200\"/></p>"
                );
            }
        })
    })

// 使用Servlet进行前后端数据交互的代码：

@WebServlet("/book/SelectBookInfoServlet.do")
public class SelectBookInfoServlet extends HttpServlet {

    private BookService bookService = new BookServiceImpl();

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 获取参数
        String bid = req.getParameter("bid");

        // 查询数据库的数据
        Book bookByBid = bookService.findBookByBid(bid);
        System.out.println("查询数据库的数据：");
        System.out.println(bookByBid);
        // JSON化
        String value = JSON.toJSONString(bookByBid);

        // 响应数据
        PrintWriter pw = resp.getWriter();
        pw.write(value);
        pw.close();

    }
}

3. 解决问题：在前端发送的请求中添加 dataType:"json"，这样就可以解决了。

理由：因为Servlet进行了JSON化（将java中的Bean对象转化为JSON串），将数据传给前端的是字符串，不设置 dataType:"json"，则封装的Ajax代码就不会将JSON串转化为我们需要的javaScript对象，导致我们通过对象名.对象属性的方式无法获取到值。但是我们也手动得将JSON串转换成javaScript对象。（第4点提到了）

// javaScript中完整代码：

$(function() {
        // sessionStorage
        let bid = localStorage.getItem("bid");
        console.log("bid:"+bid);
        $.get({
            url:"/ketang7_27/book/SelectBookInfoServlet.do",
            data:"bid="+bid,
            dataType:"json",
            success:function(book){
                console.log(book);
                // 进行页面的渲染
                $(".bookInfo").html("<p>图书名称："+book.bname+"</p>"+
                    "<p>图书作者："+book.author+"</p>"+
                    "<p>图书价格："+book.price+"</p>"+
                    "<p>图书图片：<img src='"+book.image+"' width=\"200\" height=\"200\"/></p>"
                );
            }
        })
    })

4. 手动得将JSON串转换成javaScript对象，使用JSON.parse(JSON串)。

$(function() {
        // sessionStorage
        let bid = localStorage.getItem("bid");
        console.log("bid:"+bid);
        $.get({
            url:"/ketang7_27/book/SelectBookInfoServlet.do",
            data:"bid="+bid,
            // dataType:"json",
            success:function(data){
                let book = JSON.parse(data);
                console.log(data);
                // 进行页面的渲染
                $(".bookInfo").html("<p>图书名称："+book.bname+"</p>"+
                    "<p>图书作者："+book.author+"</p>"+
                    "<p>图书价格："+book.price+"</p>"+
                    "<p>图书图片：<img src='"+book.image+"' width=\"200\" height=\"200\"/></p>"
                );
            }
        })
    })