JQuery+Ajax, Success回调函数未能正常运作问题

最新推荐文章于 2024-04-11 19:16:04 发布

一个闲散之人的闲散

最新推荐文章于 2024-04-11 19:16:04 发布

阅读量550

点赞数

分类专栏：短文 java web

本文链接：https://blog.csdn.net/qq_31620591/article/details/117931014

版权

java web 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

短文

3 篇文章 0 订阅

订阅专栏

最近一段时间研究Java Spring Boot框架，用Ajax实现了一个很简单的跨域请求。

后端控制器的写法如下所示：

@RestController
public class BookController {
    @GetMapping("/book")
    @ResponseBody
    public Book bookHandler(Book book){
        return book;
    }
}

后端用的JsonHttpMessageConverter是FastJson。

前端代码如下所示：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Title</title>
    <script src="jquery.js"></script>
</head>
<body>
<div id="contentDiv"></div>
<input type="button" value="query" onclick="getData()">
<script>
    function getData(){
        $.ajax({
            url:'http://localhost:8080/book/',
            type:'get',
            
            dataType: "json",
            

            data:{name:'ddd',author:'dxt',id:2},
            success:function (msg){
                //错误写法↓
                $("#contentDiv").html(msg);
            }
        })
    }
</script>
</body>
</html>

错误现象是：点击"query"按钮之后，可以在控制台-NetWork栏中看到被接收的json串，但是页面没有反应。

错误原因是：由于Ajax配置中加上了dataType: "json"，msg被从json串自动解析为字典类型对象，而字典传入$(..).html(...)函数时，页面上不会有任何回显，也不会有任何报错。

那如果把dataType: "json"去掉，会怎么样呢？回答是问题照旧：

首先Response头部包含了：“Content-Type: application/json”这一项，这一点从控制台或Postman能确认。

其次W3Cschool里提到：

....jQuery 将自动根据 HTTP 包 MIME 信息来智能判断....

因此，即使把 dataType: "json" 去掉，JQuery也会根据Response头将json串自动解析为字典类型对象。

遇到类似问题时，可以通过游览器-控制台对JQuery.js文件下断点来分析问题：

			if ( isSuccess ) {

				// Set the If-Modified-Since and/or If-None-Match header, if in ifModified mode.
				if ( s.ifModified ) {
					modified = jqXHR.getResponseHeader( "Last-Modified" );
					if ( modified ) {
						jQuery.lastModified[ cacheURL ] = modified;
					}
					modified = jqXHR.getResponseHeader( "etag" );
					if ( modified ) {
						jQuery.etag[ cacheURL ] = modified;
					}
				}

				// if no content
				if ( status === 204 || s.type === "HEAD" ) {
					statusText = "nocontent";

				// if not modified
				} else if ( status === 304 ) {
					statusText = "notmodified";

				// If we have data, let's convert it
				} else {
					statusText = response.state;
					success = response.data;
					error = response.error;
					isSuccess = !error;
				}
			}

对这里的"success = response.data;"下断点，便可通过success变量的值，确认从服务器response中返回的数据是字符串还是已被自动转化为对象类型。