SpingMVC + Angularjs + POST与jsp

新增至angularjs。我相信我错过了一些东西。如果我使用angularjs的$http指令访问服务器，我无法呈现服务器在jsp页面上发送的响应。SpingMVC + Angularjs + POST与jsp

angularcode

// Read button Handler 
$scope.readAll=function(){ 
    readTable($scope.clnfamilyArray); 
    //send data to server 
    testAddItem=function(){ 
     $http({ 
      'url' : 'http://localhost:9090/QuantumM/orbital/sendstatement/', 
      'method' : 'POST', 
      'headers': {'Content-Type' : 'application/json'}, 
      'data' : $scope.clnfamilyArray 
     }).success(function(data){ 
      console.log(data); 
     }) 
    }//end of function 
    testAddItem(); 
}////end of readAll

弹簧代码

@RequestMapping(value = "/sendstatement/", method = RequestMethod.POST) 
public ModelAndView welcome(@RequestBody String map) {  
    ModelAndView model = new ModelAndView();   
    // BL 
    model.addObject("name",hTable.toHtml()); 
    model.setViewName("test"); 
    return model; 
}

test.jsp的

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
</head> 

<h1>Gradle - Spring MVC Hello World</h1> 
<h2>Hello ${name}</h2> 

</body> 
</html>

相反渲染test.jsp的的。我登陆同一页面。但在控制台上，我可以看到预期的输出..

<!DOCTYPE html> 
<html lang="en"> 
<head> 
</head> 

<h1>Gradle - Spring MVC Hello World</h1> 
<h2>Hello <table border=1><tr><td colspan=2>s</td></tr><tr><td colspan=1>f</td><td colspan=1>d</td></tr></table></h2> 

</body> 
</html>

有什么我失踪？我想降落在test.jsp不在我目前的呼叫页面上...

来源

2015-05-09 sailor

您错过了某些东西，正如您猜测的那样。 $ http调用的目的是获取HTTP调用的结果并将其提供给您的AngularJS应用程序的模型。这并不意味着将您重定向到另一台服务器上的新页面。

你在控制台看到页面输出是由于HTTP调用的.success（）部分原因是：

$http({ 
'url' : 'http://localhost:9090/QuantumM/orbital/sendstatement/', 
    'method' : 'POST', 
    'headers': {'Content-Type' : 'application/json'}, 
    'data' : $scope.clnfamilyArray 
}).success(function(data){ // The data is passed here when received 
    console.log(data); 
})

这是一个异步调用handled by a promise。所以你的应用程序会进行http调用，然后继续其快乐的方式。当来自http调用的数据可用时，它将传递给.success（）调用，然后将其记录到控制台。 Here's a Plunk demo I did显示承诺如何在串行和并行方式下工作，因此您可以看到它们的一些好处。

这不是角度的方式。你应该为AngularJS中的单页面应用程序做什么是从服务器获取数据，而不是渲染页面，然后用AngularJS视图将其显示给用户。

而不是让您的SpringMVC应用程序呈现视图，让它将模型作为JSON数据传回。这样，您就可以在AngularJS视图中轻松地将其展示给用户。

我的猜测是，如果你把你的榜样，把它返回JSON，它会返回类似：

{ 
    "name": "Bob" 
}

然后你会改变.success（）调用做这样的事情：

<p>Hi {{name}}</p>

希望这有助于：

.success(function(data) { 
    $scope.name = data.name; 
})

而且在你看来，你会用表现出来。

来源

2015-05-09 15:17:26

哦。但是在这种情况下，ModelAndView中的视图在使用angularjs时将无用吗？如果没有选项，那么我必须打开单个页面...... – sailor

就是这样。你当然可以尝试制作一堆单独的单页应用程序，但这不是AngularJS的真正意义。这将是很多额外的工作和资源，没有任何好处。来自Java自己，我明白异步的Javascript/Angular的思维方式有多不同。下面是一个Plunk演示可能会有所帮助的更多信息：http://plnkr.co/edit/lv8Kyu?p=info –

@sailor我们一直使用SpringMVC将AngularJS添加到现有的基于Java/JSP的Web应用程序中。我们将Spring MVC控制器添加到提供JSON数据的Web应用程序中，然后使用它将交互式方面添加到应用程序中。该公式工作得很好。 –

SpingMVC + Angularjs + POST与jsp

回答

相关问题