天天看點

SpringMVC+AJAX+JSON

  在做一個ajax發送json到springmvc的控制層,控制層的對象中有一個List集合,ajax調用總是報415錯誤。發現了一個一直沒有注意到的問題,借機記錄一下。

SpringMVC+AJAX+JSON

(細節部分都忽略了,在最後的demo項目位址中會有。這裡隻寫主要的步驟)

一、添加pom.xml依賴

  springmvc的pom.xml依賴在demo工程裡都有,這裡主要強調要添加以下兩個依賴,否則@RequestBody和@ResponseBody這兩個注解就不起作用。

<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-core</artifactId>
    <version>2.5.4</version>
</dependency>
<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-annotations</artifactId>
    <version>2.5.4</version>
</dependency>
<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.5.4</version>
</dependency>
<dependency>
    <groupId>com.fasterxml.jackson.jaxrs</groupId>
    <artifactId>jackson-jaxrs-json-provider</artifactId>
    <version>2.5.4</version>
</dependency>      

二、Controller層

package org.hope.lee.controller;

import org.hope.lee.model.User;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import com.alibaba.fastjson.JSONObject;

@Controller
@RequestMapping("/user")
public class UserController {
    @RequestMapping("index")
    public ModelAndView toAddUserPage() {
        return new ModelAndView("addUser");
    }
    
    @RequestMapping(value = "/add",method = RequestMethod.POST)
    @ResponseBody
    public ResponseEntity<String> addUser(@RequestBody User user) {
        JSONObject object = new JSONObject();
        object.put("success", "成功");
        return new ResponseEntity<>(object.toString(), HttpStatus.OK);
    }
    
}      

三、JSP頁面

  注意"②"處的代碼,這種方式傳遞list參數給controller層種的@RequestBody對象是會報415錯誤的。我發現是因為"②"處addresses的value會多一個雙引号

  {"name":"李四","age":"59","gender":"男","addresses":"[{\"addressName\":\"A區\"},{\"addressName\":\"B區\"}]"}。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../static/js/jquery-1.11.0.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#btn").click(function() {
            var vname = $('#name').val();
            var vage = $('#age').val();
            var vgender = $("input[name='gender']:checked").val();
            var checkedParams = $("input:checkbox:checked");
            checked_val = [];
            for(k in checkedParams){
                if(checkedParams[k].checked)
                    checked_val.push(checkedParams[k].value);
                
            };
            var arr = new Array();
            for(var i = 0; i < checked_val.length; i++) {
                arr.push({'addressName':checked_val[i]});
            }
            var arrs = JSON.stringify(arr);
            var params = {
                name : vname,
                age : vage,
                gender : vgender,
                addresses:arrs
            }
            
            var params2 = '{"name":\"'+vname+'\","age":'+vage+',"gender":\"'+vgender+'\","addresses":'+arrs+'}' //如果有更好的辦法,希望給我留言。
            console.log("params=" + JSON.stringify(params));
            console.log("params2=" + params2);
            $.ajax({
                url : "add",
                type : 'POST',
                data : params2, //①
                //data:JSON.stringify(params), //②
                dataType : 'json',
                contentType : "application/json;charset=utf-8",
                beforeSend: function() {
                },
                success : function(data) {
                    alert("儲存成功");
                },
                error : function(XMLHttpRequest, textStatus, errorThrown) {
                    console.log(textStatus + "伺服器異常,請稍後嘗試!");
                }
            });
        });
    });
</script>
</head>
<body>
    姓名:<input type="text" id="name" /><br/>
    年齡:<input type="text" id="age" /><br/>
    性别:
    男:<input type="radio" checked="checked" name="gender" value="男"/>
    女:<input type="radio" name="gender" value="女"/><br/>
    位址:
    A區<input type="checkbox" id="checkbox" value="A區" />
    B區<input type="checkbox" id="checkbox" value="B區" />
    C區<input type="checkbox" id="checkbox" value="B區" /><br/>
    <button id="btn" >儲存</button>
</body>
</html>      

https://gitee.com/huayicompany/spring-learn/tree/master/springmvc-json

轉載于:https://www.cnblogs.com/happyflyingpig/p/8425399.html