文件上传，ajax异步交互json数据

1.单文件上传
   （1）导包
    （2）webapp下创建上传目录
    （3）上传页面
          

  <form action="${pageContext.request.contextPath}/fileUpLoad" method="post" enctype="multipart/form-data">
               用户名 <input type="text" name="username" >
                 备注 <input type="text" name="password">
               <input type="file" name="fileUpload">   
             <input type="submit" value="保存">
        </form>

        
    （4）上传control类
    

 @RequestMapping("/fileUpLoad")
    public String fileUpLoad(String username,String password,MultipartFile fileUpload,HttpServletRequest request) throws IllegalStateException, IOException{
        System.out.println(username+","+password+","+fileUpload);
        //文件类型，文件名 文件大小
        String ftype=fileUpload.getContentType();
        String fname=fileUpload.getOriginalFilename();
        long fsize=fileUpload.getSize();
        System.out.println("文件类型"+ftype);
        System.out.println("文件名称"+fname);
        System.out.println("文件大小"+fsize);
    
        //上传：位置upfiles下，如何获取upfiles文件夹路径
        String savepath=request.getServletContext().getRealPath("upfiles");
        File dir=new File(savepath);
        //判断目标文件夹存在性
        if(!dir.exists()){ //不存在文件夹
            dir.mkdir();//创建文件夹
        }
        //在upfiles下保存上传的文件
        File targetFile=new File(savepath+"/"+fname);
        if(!targetFile.exists()){
            targetFile.createNewFile();//创建文件
        }
        
        //上传保存
        fileUpload.transferTo(targetFile);
        
        return "success";
    }

    （5）配置
    
     <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
          <property name="defaultEncoding" value="utf-8"></property>
          <property name="maxUploadSize" value="54000000"></property>
          <property name="uploadTempDir" value="uploadTempDir"></property>
     </bean>
2.多文件上传
    //页面
       

 <form action="${pageContext.request.contextPath}/mutiFileUpLoad" method="post" enctype="multipart/form-data">
               用户名 <input type="text" name="username" >
                 备注 <input type="text" name="password">
               <input type="file" name="fileUpload">   
               <input type="file" name="fileUpload">   
               <input type="file" name="fileUpload">   
             <input type="submit" value="保存">
        </form>

    //控制类

    @RequestMapping("/mutiFileUpLoad")
    public String mutiFileUpLoad(String username,String password, @RequestParam("fileUpload") MultipartFile[] fileUpload,HttpServletRequest request) throws IOException{
        System.out.println(username+","+password+","+fileUpload);
        
        //上传：位置upfiles下，如何获取upfiles文件夹路径
        String savepath=request.getServletContext().getRealPath("upfiles");
        File dir=new File(savepath);
        //判断目标文件夹存在性
        if(!dir.exists()){ //不存在文件夹
            dir.mkdir();//创建文件夹
        }
        
        for(MultipartFile upfile:fileUpload){
            //文件类型，文件名 文件大小
            String ftype=upfile.getContentType();
            String fname=upfile.getOriginalFilename();
            long fsize=upfile.getSize();
            System.out.println("文件类型"+ftype);
            System.out.println("文件名称"+fname);
            System.out.println("文件大小"+fsize);
            //fname.substring(fname.lastIndexOf("."), fname.length())
            //在upfiles下保存上传的文件
            File targetFile=new File(savepath+"/"+fname);
            if(!targetFile.exists()){
                targetFile.createNewFile();//创建文件
            }
            //上传保存
            upfile.transferTo(targetFile);
        }
        return "success";
    }
    //@RequestParam  指定该请求必须传入的参数

    
3.ajax异步交互json数据

 （1）导包 
 （2）页面ajax
  (3)控制类
  
  

  <input type="text">
    <input type="button" id="btn" value="测试json串">
    <input type="button" id="btn1" value="测试userInfo">
    <input type="button" id="btn2" value="测试List<userInfo>">

    <div id="box"></div>
    <script src="${pageContext.request.contextPath }/js/jquery-3.2.1.min.js"></script>
    <script >
     $(function(){
        $("#btn").click(function(){
            $.ajax({
                url:"testAjax",
                type:"post",
                data:{username:"admin",password:"123"},
                cache:false,
                async:false,
                dataType:"json",
                success:function(resData){
                    //alert(resData)
                    alert(resData.age)
                    alert(resData.hobby)
                }
                
            })
        });
        
        $("#btn1").click(function(){
            alert(1243)

            $.ajax({
                url:"testUserInfo",
                type:"post",
                data:{username:"ddd",password:"dddd"},
                cache:false,
                async:false,
                dataType:"json",
                success:function(resData){
                    alert(resData.username)
                    alert(resData.password)
                    alert(resData.id)
                }
                
            })    
         });
        
        $("#btn2").click(function(){
            alert(1243)

            $.ajax({
                url:"testUserInfoList",
                type:"post",
                data:{username:"ddd",password:"dddd"},
                cache:false,
                async:false,
                dataType:"json",
                success:function(resData){
                    //遍历
                    $.each(resData,function(k,user){
                        $("#box").append(user.id+","+user.username+","+user.password+"<br>")
                    })
                    
                }
                
            })    
         });
        
     })
    </script>

    
    //控制类

    @RequestMapping("/testAjax")
    public void testAjax(String username,String password,HttpServletRequest request,HttpServletResponse response) throws IOException{
            System.out.println(username+"---"+password);
            response.setContentType("text/html;charset=utf-8");
            //response.getWriter().print("这是响应的数据");
            //{"age":18,"hobby":"programming"}
            response.getWriter().print("{\"age\":18,\"hobby\":\"programming\"}");    
    }
    
    @ResponseBody
    @RequestMapping("/testUserInfo")
    public UserInfo testUserInfo(String username,String password) {
            System.out.println(username+"---"+password);
            
            UserInfo user=new UserInfo();
            user.setUsername("张三");
            user.setPassword("zhang123");
            return user;
    }
   
    @RequestMapping("/testUserInfoList") 
    @ResponseBody
    public List<UserInfo> testUserInfoList( String username,String password){
          System.out.println(username+"---"+password);
          List<UserInfo> list=new ArrayList();
          UserInfo user1=new UserInfo();
             user1.setUsername("张三");
             user1.setPassword("zhang123");
          list.add(user1);
          UserInfo user2=new UserInfo();
            user2.setUsername("张三222");
            user2.setPassword("zhang123");
             list.add(user2);
             
              UserInfo user3=new UserInfo();
             user3.setUsername("张三");
             user3.setPassword("zhang123");
          list.add(user3);
          
          return list;
        
    }
    

    //采用注解   @ResponseBody 使返回值作为响应正文
                 @RequestBody 请求正文，客户端传给服务的请求参数
                 
3.RESTful风格
    传统的url   http://localhost:8080/springmvc_302/test_json.jsp?id=100&uname=tom
    RESTful url: http://localhost:8080/springmvc_302/test_json.jsp/100/tom
    
    <a href="${pageContext.request.contextPath }/testFul/100/tom"> 测试RESTful</a>

    @RequestMapping("/testFul/{id}/{uname}")
    public String testFul(@PathVariable("id") int i,@PathVariable("uname")String username){
        System.out.println(i+"---"+username);
        return "success";
    }
    
    //@PathVariable 用于将url中的值赋值给映射模板{}