SpringMVC+AJAX+JSON

時間 2019-11-10

標籤 springmvc+ajax+json springmvc ajax json 欄目 Spring 简体版

原文原文鏈接

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

(細節部分都忽略了，在最後的demo項目地址中會有。這裏只寫主要的步驟)html

1、添加pom.xml依賴

　　springmvc的pom.xml依賴在demo工程裏都有，這裏主要強調要添加如下兩個依賴，不然@RequestBody和@ResponseBody這兩個註解就不起做用。java

<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>

2、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);
    }
    
}

3、JSP頁面

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

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

<%@ 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-jsonweb

更多相關文章...

相關標籤/搜索

JavaScript

Spring

Ajax

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。