Javascript $http未从Spring MVC REST控制器返回值_Javascript_Java_Angularjs_Spring_Spring Mvc

Javascript $http未从Spring MVC REST控制器返回值

javascript java angularjs spring spring-mvc

Javascript $http未从Spring MVC REST控制器返回值,javascript,java,angularjs,spring,spring-mvc,Javascript,Java,Angularjs,Spring,Spring Mvc,如何更改下面的简单代码，以便下面的简单AngularJS代码能够成功地从下面的简单Spring MVC REST控制器检索值？目前，当我单击html表单中的按钮时，什么都没有发生下面是index.html： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Find Book By ISBN</title> </head> <body

如何更改下面的简单代码，以便下面的简单AngularJS代码能够成功地从下面的简单Spring MVC REST控制器检索值？目前，当我单击html表单中的按钮时，什么都没有发生

下面是

index.html

：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Find Book By ISBN</title>
</head>
<body ng-app="bookApp">
    <div ng-controller="bookController">  
    <table>
        <tr>
            <td width=200>
                ISBN:<input type="text" ng-model="book.isbn" />
                <br>
                <button ng-click="findBook()">Find Book</button>
            </td>
            <td>
                ISBN: <span ng-bind="book.isbn"></span>
                <br/>
                Title: <span ng-bind="book.title"></span>
                <br/>
                Author: <span ng-bind="book.author"></span>
            </td>
        </tr>
    </table>
</div>
</body>
</html>

下面是

Book.java

model类：

public class Book {

    private String isbn;
    private String title;
    private String author;

    public void setIsbn(String id){isbn=id;}
    public String getIsbn(){return isbn;}

    public void setTitle(String t){title=t;}
    public String getTitle(){return title;}

    public void setAuthor(String a){author=a;}
    public String getAuthor(){return author;}

}

这是Spring MVC REST控制器：

@RestController
@RequestMapping("/api")
public class BookRestController {

    @RequestMapping(value = "/findbook/{bookId}", method = RequestMethod.POST)
    public @ResponseBody Book create(@PathVariable("bookId") String bookId, @RequestBody Book book) {
        System.out.println("The Server Heard The Request!");
        Book newBook = new Book();
        if (book.getIsbn().equals("123a")){
            newBook.setAuthor("J.K. Rowling");
            newBook.setTitle("Harry Potter");
            newBook.setIsbn(bookId);
        }
        else if(book.getIsbn().equals("b321")) {
            newBook.setAuthor("Stan Lee");
            newBook.setTitle("Spiderman");
            newBook.setIsbn(bookId);
        }
        else {
            newBook.setAuthor("Author not specified.");
            newBook.setTitle("Title note specified.");
            newBook.setIsbn(bookId);
        }
        return newBook;
    }

}

不确定，但如果我记得的话，SpringMVC不支持GET请求的请求体

将$scope.findBook更改如下：

  $scope.findBook = function() {
        $http.get('/findbook/' + bookId).then(function(response) {          
            $scope.book = response.data;
        });
    };

一旦承诺得到解决，它将更新$scope.book，这将反映在您的HTML中

我不确定您的代码中是否有http.get（'/findbook/'+bookId，$scope.book），$scope.book做什么？

对Spring一无所知，但代码看起来需要url

'/api/findbook/{bookId}'

，我说得对吗？@Icycool谢谢，但将行改为

$http.post（'/api/findbook/'+bookId，$scope.book）未解决问题。也没有将行更改为$http.post（'api/findbook/'+bookId，$scope.book）。这是我第一次使用angular或REST，所以我整天都在阅读和实验中学习。嗯，您的控制器名称中有一个输入错误（区分大小写），这不会在控制台日志中引发错误吗？并且ng app
也不见了。@Icycool谢谢。但在重试之前，我做了两项更改并刷新了浏览器中的index.html
，但它仍然没有连接。我在OP中也做了修改，以便在一个地方更容易阅读。OP现在反映了IDE中的当前代码。当我这样做时，eclipse控制台打印输出中没有任何内容，因为它都是javascript。不知道还能在哪里找到日志。这是一条评论，不是答案。另外，请注意，评论指出，这是在尝试获取之前，通过POST尝试的。礼仪是以互动的方式发表评论，直到得到答案。然后通过提出好的、经过充分研究的问题来建立resp。meta.stackoverflow.com有很多关于什么是好问题的信息。我做了你的更改，但它们没有解决问题。当我提交表格时，仍然没有发生任何事情。我以为$scope.book会将一个book对象发送回服务器。这周我对安格拉利斯是全新的。我正在尝试开发一个非常简单的构建块，以便更容易一步一步地学习更高级的东西。还有其他想法吗？您不需要在GET请求中将任何内容发送回服务器。您的URL可能是/findbook/1
，它应该返回JSON格式的Book对象。您可以检查网络选项卡并确认AJAX请求是否确实返回JSON对象吗？如何检查网络选项卡？我正在eclipse中进行测试，也在firefox中分别进行测试。另外，虽然你关于GET的观点是正确的，但我需要让这篇文章起作用，因为我将在后面用这个简单的例子做些什么。我不认为GET和POST会比彼此更困难，因为问题在于与服务器的连接。工具菜单-->Web开发人员-->网络。在指责前端之前，确认AJAX调用是否返回JSON响应是很重要的。也许我知道了，我们需要使用$scope.book=response.data
而不是$scope.book=response。我已经修改了上面的代码。你能试试看吗？
  $scope.findBook = function() {
        $http.get('/findbook/' + bookId).then(function(response) {          
            $scope.book = response.data;
        });
    };