1. 程式人生 > >springMVC與前端Ajax互動

springMVC與前端Ajax互動

介面方法統一用@ResponseBody處理返回json資料

一、多部分檔案上傳

(@RequestParam(value = "files",required = false) MultipartFile[] files,@RequestParam(value = "id",required = false) Integer id)

 表單:

<form id="ff" method="post"  enctype="multipart/form-data">
        <input type="file" name="files"/>
        <input type="file" name="files"/>
</form>

Ajax方法:

$(function(){  
         $("#xxx").click(function(){  
              var formData = new FormData($('#ff'));
              formData.append("id",1) ;//可以添加發送的引數
              $.ajax({
               type: "POST",
               dataType: "json",
               url: "" , 
               data: formData,
               cache: false,  
               contentType: false,  
               processData: false,  
               success: function (data) {
                   alert("成功")
               },
               error : function() {
                   alert("異常!");
               }
           });
         });  
     });  

二、@RequestParam接收Ajax方式

(@RequestParam(value = "id",required = false) Integer id)

Ajax方法:

$(function(){  
         $("#xxx").click(function(){  
              $.ajax({
               type: "POST",
               dataType: "json",
               url: "" , 
               data: {"id":1},
               contentType: "application/x-www-form-urlencoded;charset=utf-8",  
               success: function (data) {
                   alert("成功")
               },
               error : function() {
                   alert("異常!");
               }
           });
         });  
     });  

三、@RequestBody接收Ajax方式

(@RequestBody People people)

People.java 自定義實體類

public class People extends BaseEntity{
    private Integer peopleId;
    private String peopleName;
......

Ajax方法:

$(function(){  
         $("#xxx").click(function(){  
              $.ajax({
               type: "POST",
               dataType: "json",
               url: "" , 
               data: {"peopleId":1,"peopleName":"p1"},
               contentType: "application/json;charset=utf-8",  
               success: function (data) {
                   alert("成功")
               },
               error : function() {
                   alert("異常!");
               }
           });
         });  
     });