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

回答

相關問題