访问静态资源及处理AJAX请求-蒲公英云

访问静态资源及处理AJAX请求

如何访问静态资源
1.在配置文件中设置

springmvc.xml文件中加入

<mvc:annotation-driven></mvc:annotation-driven>
<!--**配置解释:** 将静态资源(图片,css,js,html)放入了webApp/static文件夹下! 直接访问DispatcherServlet会拦截出现404问题!-->
<!--location元素表示webapp目录下的static包下的所有文件；-->
<!--mapping元素表示将 location对应文件加下的资源对应到 /static路径下!-->
<!--该配置的作用是：DispatcherServlet不会拦截以/static开头的所有请求路径，并当作静态资源-->
<mvc:resources mapping="/static/**" location="/static/" ></mvc:resources>

静态资源是放在webapp/static/下面

访问

<img src="static/images/1.jpg" width="100" height="100" />

八. 怎么处理ajax请求的数据
@ResponseBody 注解

设置@ResponseBody 注解返回的是内容而不是转发页面

1.返回的是一个值

@RequestMapping("/checkUname")
@ResponseBody //注解  响应内容  不转发页面 直接返回内容
public String checkUname(String uname)
{
    if(uname.equals("zhangsan"))
        return "not ok";
    else
        return "ok";
}

测试案例

reg.jsp

<script src="static/js/jquery1.11.3.min.js"></script>
<script src="static/js/reg.js"></script>
用户名:<input type="text" name="uname" id="uname" /><span id="s1"></span>

AjaxController.java

@Controller
@RequestMapping("/ajax")
public class AjaxController {
    @RequestMapping("/checkUname")
    @ResponseBody //注解  响应内容  不转发页面 直接返回内容
    public String checkUname(String uname)
    {
        if(uname.equals("zhangsan"))
            return "not ok";
        else
            return "ok";
    }
    }

reg.js

$(function(){
    $("#uname").blur(function(){
        //1.获得输入的用户名
        var uname=$(this).val();
        //2.通过ajax将用户名传到服务器判断是否存在 并将结果返回
        $.get("ajax/checkUname?uname="+uname,function(msg){
             $("#s1").html(msg);
        })
       /* $.ajax({
            "type":"get",
            "url":"",
            "data":"uname="+uname,
            "success":function(msg){
            }
        })*/
    })
    })

2.需要返回多个值则需要将其转换为json字符串
方式1: 用springmvc支持的 jar包，让前端控制器帮你转换为json 字符串
2.1 导入jar包

支持:

jackson : jackson-databind/jackson-annotations/jack-core

gson: gson

**注意: ** jackson需要三个jar包!如果使用maven引入jackson-databind会连带引入 core和annotations。

如果非maven项目,必须加入三个jar包!

<dependency>
    <groupId>com.google.code.gson</groupId>
    <artifactId>gson</artifactId>
    <version>2.2.4</version>
</dependency>

2.2 添加配置

springmvc.xml加入

<mvc:annotation-driven></mvc:annotation-driven>

2.3 在控制器使用

@Controller
@RequestMapping("/ajax")
public class AjaxController {
    //会将list转换为json字符串
    @RequestMapping("/selectUserList")
    @ResponseBody
    public List<User> selectUserList()
    {
        List<User> userList=new ArrayList<User>();
        userList.add(new User("zhangsan1","123",23,new Address("湖北","武汉","汉口大道100号")));
        userList.add(new User("zhangsan2","123",23,new Address("湖北","武汉","汉口大道100号")));
        userList.add(new User("zhangsan3","123",23,new Address("湖北","武汉","汉口大道100号")));
        return userList;  //直接返回list  不用返回json字符串
    }
}

2.4 在js中接收

$("#span1").mouseover(function(){
       $.getJSON("ajax/selectUserList",function(jsonarr){
              $("#userList").empty();
              $.each(jsonarr,function(k,v){
                   $("#userList").append("<li>"+v.uname+"</li>");
              })
       })
})

方式2: 用fastjson ，自己转换为json字符串
2.1 导入jar包

<!-- json依赖 -->
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.47</version>
</dependency>

2.2 添加配置

springmvc.xml加入

<mvc:annotation-driven></mvc:annotation-driven>

2.3 在控制器使用

@Controller
@RequestMapping("/ajax")
public class AjaxController {
    //会将list转换为json字符串
    @RequestMapping("/selectUserList")
    @ResponseBody
    public String selectUserList()
    {
        List<User> userList=new ArrayList<User>();
        userList.add(new User("zhangsan1","123",23,new Address("湖北","武汉","汉口大道100号")));
        userList.add(new User("zhangsan2","123",23,new Address("湖北","武汉","汉口大道100号")));
        userList.add(new User("zhangsan3","123",23,new Address("湖北","武汉","汉口大道100号")));
        return JSON.toJSONString(userList);  //返回json字符串
    }
}

2.4 js接收:

$("#span1").mouseover(function(){
$.getJSON("ajax/selectUserList",function(jsonarr){
          $("#userList").empty();
          $.each(jsonarr,function(k,v){
               $("#userList").append("<li>"+v.uname+"</li>");
          })
   })
})