SpringMVC+JS实现Ajax请求返回Json

最新推荐文章于 2020-01-09 18:47:34 发布

叶遮沉阳

最新推荐文章于 2020-01-09 18:47:34 发布

阅读量274

点赞数

分类专栏：后端文章标签：原生JS实现Ajax

本文链接：https://blog.csdn.net/u014248473/article/details/89671230

版权

后端专栏收录该内容

45 篇文章 0 订阅

订阅专栏

1. 引入Json依赖

<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.8.5</version>
</dependency>
<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-core</artifactId>
    <version>2.8.5</version>
</dependency>
<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-annotations</artifactId>
    <version>2.8.0</version>
</dependency>

2. 加入json解析配置

<bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">
      <property name="messageConverters">
             <list>
                    <ref bean="mappingJackson2HttpMessageConverter" />
             </list>
      </property>
</bean>
<bean id="mappingJackson2HttpMessageConverter"
     class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
      <property name="supportedMediaTypes">
             <list>
                    <value>application/json;charset=UTF-8</value>
                    <value>text/html;charset=UTF-8</value>
                    <value>text/json;charset=UTF-8</value>
             </list>
      </property>
</bean>

3. 前端请求

<body>
    <h1>数据请求</h1><hr/>
    <input type="text" name="arg1" /><button onclick="arg1Submit()">提交</button>
    <h1>数据响应</h1><hr/>
    返回数据：<span id="res"></span>
</body>
<script>
  function arg1Submit(){
    var arg1Val = document.querySelector("input[name=arg1]").value;
    console.log(arg1Val);
    var json = {"arg1":arg1Val};

    var ajax = new XMLHttpRequest();
    ajax.open("post","/data/query01");
    ajax.setRequestHeader("Content-type","application/json; charset=utf-8");
    ajax.send(JSON.stringify(json));
    ajax.onreadystatechange = function () {
      if (ajax.readyState==4&&ajax.status==200) {
        document.querySelector("#res").innerHTML = ajax.responseText;
      }
    }
  }
</script>

4. 后端响应

@RequestMapping("query01")
@ResponseBody
public String query01(@RequestBody Map<String,Object> map){
    String result = "这个结果是："+map.get("arg1");
    return result;
}

5. 注意事项

a. 使用@ResponseBody注解出现404，需检查json依赖与配置是否正确。

b. 使用@RequestBody注解出现400，建议使用JSON.stringify方式传参。

叶遮沉阳

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SpringMVC+JS实现Ajax请求返回Json

1. 引入Json依赖<dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.8.5</version></dep...
复制链接

扫一扫

专栏目录