在AngularJs和Spring中使用$ http.post()发布数据时获取错误415(不支持的媒体类型)

时间:2015-11-17 12:48:52

标签: angularjs spring-mvc

您好我用angularjs应用程序创建了一个Spring。我正在尝试发布一些数据并获得响应。它始终显示 415(不支持的媒体类型)错误。如何解决它。

的index.jsp

<html data-ng-app="myModule">
<head>
<title>AngularJS POST Spring MVC</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script type="text/javascript">

    var myModule = angular.module('myModule', []);

    myModule.controller("MyController", function($scope, $http) {
            var dataObj = {
                name : "Ranga",
                location : "India",
                phone : "9986183"
            };


        $http.post('hello', dataObj).then(function(data){
            $scope.responseData = data;
        }, function(data){
            alert("Exception details: " + JSON.stringify({data: data}));
        });     

    });

</script>
</head>
    <body ng-controller="MyController">     
        <div>
            <p>Response:  {{responseData}}</p>      
        </div>
    </body>
</html>

HelloController.java

package com.ranga.controller;

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;


@Controller
public class HelloController {

    @RequestMapping(value = "/hello", method = RequestMethod.POST)
    public @ResponseBody String hello(@RequestBody Person person) { 
        System.out.println("Hello, Person info is: "+person);

        StringBuilder data = new StringBuilder();
        data.append("Name: "+person.getName()+" ");
        data.append("Location: "+person.getLocation()+" ");
        data.append("Phone: "+person.getPhone());       
        return data.toString();
    }

}

Person.java

package com.ranga.controller;

public class Person {

    private String name;
    private String location;
    private String phone;

    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getLocation() {
        return location;
    }
    public void setLocation(String location) {
        this.location = location;
    }
    public String getPhone() {
        return phone;
    }
    public void setPhone(String phone) {
        this.phone = phone;
    }
}

调度-servlet.xml中

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:context="http://www.springframework.org/schema/context"
    xmlns:mvc="http://www.springframework.org/schema/mvc" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="
        http://www.springframework.org/schema/beans     
        http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/context 
        http://www.springframework.org/schema/context/spring-context.xsd
        http://www.springframework.org/schema/mvc
        http://www.springframework.org/schema/mvc/spring-mvc.xsd">

    <context:component-scan base-package="com.ranga.controller" />
    <mvc:annotation-driven/>

</beans>

的pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.ranga</groupId>
    <artifactId>SpringMVCAngularJS</artifactId>
    <packaging>war</packaging>
    <version>1.0-SNAPSHOT</version>
    <name>SpringMVCAngularJS Webapp</name>
    <url>http://maven.apache.org</url>
    <properties>
        <junit.version>4.12</junit.version>
        <spring.version>4.1.8.RELEASE</spring.version>
        <jackson.version>1.9.10</jackson.version>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    </properties>

    <dependencies>
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>${junit.version}</version>
            <scope>test</scope>
        </dependency>
        <!-- Spring dependencies -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-core</artifactId>
            <version>${spring.version}</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-web</artifactId>
            <version>${spring.version}</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>${spring.version}</version>
        </dependency>
        <!-- Jackson JSON Mapper -->
        <dependency>
            <groupId>org.codehaus.jackson</groupId>
            <artifactId>jackson-mapper-asl</artifactId>
            <version>${jackson.version}</version>
        </dependency>
    </dependencies>
    <build>
        <finalName>SpringMVCAngularJSService</finalName>
        <plugins>
            <plugin>
                <artifactId>maven-compiler-plugin</artifactId>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                </configuration>
                <version>3.1</version>
            </plugin>
        </plugins>

</build>
</project>

3 个答案:

答案 0 :(得分:0)

按照编码,您的控制器知道它必须期望JSON但是当您进行ajax调用时,您需要添加到您实际发布JSON的标头。 在进行AJAX调用时使用它。

   password VARCHAR (50) NOT NULL

答案 1 :(得分:0)

您需要在发送数据之前对数据进行字符串化,在控制器中您可以执行以下操作:

var myModule = angular.module('myModule', []);

myModule.controller("MyController", function($scope, $http) {
        var dataObj = {
            name : "Ranga",
            location : "India",
            phone : "9986183"
        }; 

       jsonDataObj = JSON.stringify(dataObj);     

        var response = $http({
               method: 'POST',
               url: 'hello',
               data: jsonDataObj,
               headers: { 'Accept': 'application/json',
                        'Content-Type': 'application/json' 
         }}); 

        response.success(function(data, status, headers, config) {
            $scope.responseData = data;
        });
        response.error(function(data, status, headers, config) {
            alert( "Exception details: " + JSON.stringify({data: data}));
        });

});

此外,您可以采用更多&#34; Angular方式&#34;将AJAX调用更改为:

$http.post('hello', jsonDataObj).then(function(data){
    $scope.responseData = data;
}, function(data){
    alert("Exception details: " + JSON.stringify({data: data}));
});

答案 2 :(得分:0)

最后我解决了这个问题。我在pom.xml中添加了以下依赖项

   <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-core</artifactId>
        <version>2.4.2</version>
    </dependency>

    <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-databind</artifactId>
        <version>2.4.2</version>
    </dependency>