1. 程式人生 > >springmvc專案的前後端分離使用ajax的坑

springmvc專案的前後端分離使用ajax的坑

  1. 出現跨域問題,報錯jquery-3.3.1.min.js:2 Failed to load localhost:8080/userLogin: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
    訪問本地是不行的,可以參考網上 windows系統啟動引數的設定,如果放在伺服器上,也出現了這個問題,在spring的配置檔案下加上如下內容
 <!--設定跨域請求-->
    <mvc:cors>
        <mvc:mapping path="/**/**"
                     allowed-origins="*"
                     allowed-methods="POST, GET, OPTIONS, DELETE, PUT"
                     allowed-headers="Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"
                     allow-credentials="true" />
    </mvc:cors>

2.ajax 報錯,表示資料格式不對,這是在傳form表單的時候出現的錯誤,具體的修改方法是在ajax裡面新增另外的兩個屬性:

 processData:false,
 contentType:false,

3.伺服器提示@RequestBody物件為空,異常Required request body is missing的解決辦法

在controller的方法上寫@RequestBody,如果傳多個值,我就寫了多個requestbody,像表單繫結一樣,但是 其實他會只穿過來一個值,這個值用String接受,用&間隔開,如下:

uaccount=123&upwd=123

當然如果是寫了一個值,而且還報上面的錯誤說明是把空值傳過來了,這時候就需要改為@RequestBody(required = false)
4.還有一個問題是在@RequestMapping上加了method = POST ,但是ajax中的Type也是post但是,提示傳的是get,不理解,將method去掉,而且Type依舊是post ,就成功了,可能是requestbody要求的就是post的傳值的原因吧

附帶一個ajax和controller


        function login() {
           $.ajax( {
               type: "POST",
               url: "http://xxxxxx/userLogin",
               contentType: "application/json; charset=utf-8",
               data: {
                   "a" :"123",
                   "b":"123",
               },
//               dataType: "json",//預期伺服器 返回的資料型別
               dataType: 'json',
               success : function (data) {
                   alert( data.statuscode );
                   console.log(data)
               }
           });
        }
 @RequestMapping(value = "/userLogin" )
    @ResponseBody
    public String userLogin(@RequestBody(required = false) String a ) throws Exception {
       System.out.println( a );
        HashMap<String ,Integer> map = new HashMap<>();
        //新增狀態碼
        map.put( StatusUtils.STATUSCODE , StatusUtils.LOGIN_SUCCESS  );
        return JSON.toJSONString(map);

    }