使用ajax的目的:实现异步请求,客户端发送的请求携带数据到达服务器,服务器接收到请求后进行处理,然后返回处理后的数据。客户端接收到返回的数据后对数据进行解析,并通过局部刷新显示数据
一 接收ajax请求
步骤:
第一步:导入jar包
image.png
在jsp页面中引入jar包

<script src="js/jquery.min.js"></script>

第二步:通过配置让springmvc框架不再拦截一些静态请求

    <!--配置不拦截哪些静态资源-->
    <mvc:resources location="/js/" mapping="/js/**"></mvc:resources>  
    <mvc:resources location="/images/" mapping="/images/**"></mvc:resources>
    <mvc:resources location="/css/" mapping="/css/**"></mvc:resources>

第三步:写ajax

<script>
        $(function (){
            $("#btn").click(function () {
                //alert("hello btn");
                $.ajax({
                    url:"userController/testAjax",   //请求的url地址
                    contentType:"application/json;charset=UTF-8",       //给服务器端传递的数据类型
                    data:'{"name":"小明","age":20}',            //请求传递的数据(这里是json格式)
                    dataType:"json",                       //预期从服务器端接收到的数据类型
                    type:"POST",            //请求方式
                    success:function (data) {           //请求成功后回调的函数
                        //data:从服务器端返回的数据
                    }
                });
            });
        });
    </script>

第四步:写服务器端代码

    @RequestMapping("testAjax")
    public void testAjax(@RequestBody String data){
        System.out.println("testAjax方法执行了");
        System.out.println(data);
        return;

二 响应ajax请求
使用@ResponseBody响应

     /**
     * 客户端发送的是json数据,服务器接收到之后转换成User对象。
     * 服务器查询数据库得到的是User对象,通过@ResponseBody标签转换成json对象,再返回给客户端
     * 要导入相应的jar包完成JavaBean对象和json数据之间的转换(在pom.xml中导入坐标)
     * @param user
     * @return
     */
    @RequestMapping("testAjaxResponse")
    public @ResponseBody User testAjaxResponse(@RequestBody User user){
        System.out.println("testAjaxResponse方法执行了");
        user.setUsername("小王");
        return user;
    }

导入的依赖:

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

dali
10 声望0 粉丝

引用和评论

0 条评论