Angularjs mit Spring verbinden RESTFul-Dienst mit AngularJS $ http-Dienst

Dies ist der Spring Rest-Controller im Backend, der einfach alle Schüler in die Liste aufnimmt. Ich habe es getestet und funktioniert gut.

@RestController 
@RequestMapping("a/rest") 
public class RestfulController { 

    @Autowired 
    private StudentDao studentDao; 
    @RequestMapping(method = RequestMethod.GET) 
    public ResponseEntity<List<Student>> index() { 
     ResponseEntity<List<Student>> studList = new ResponseEntity<List<Student>>(studentDao.getAll(), HttpStatus.OK); 
     return studList; 
    } 
}

Dies ist, was ich versuche ich diese Liste der Schüler tun möchte, in dem Absatz mit der ID (id = „displayData“)

definiert anzuzeigen

ich geschaffen habe Taste, die die Funktion showdata lädt (

)

Dann versuche ich, $ http Dienst von AngularJS zu implementieren in dieser Art und Weise an der Rückseite verbindet

<body> 

<input type="button" value="Get Data" onclick="showData()" /> 
<p id="displayData" /> 

</body> 

<script type="text/javascript"> 

function showData() { 
$http({ 
    method: 'GET', 
    url: 'a/rest' 
}).then(function (response) { 

    $('#displayData').html(JSON.stringify(response)); 

    }); 

} 
</script>

Hier brauche ich Hilfe .. !! Problem ist am Frontend. Wie kann ich $ http Service, der Datei funktioniert implementieren?

Quelle

2016-07-06 Prakash Bist

Was ist das Problem, vor dem Sie stehen? – Praveen

@ Praveen: Ich muss diese Daten in der

anzeigen, aber es funktioniert nicht. –

$ http Antwort enthält

Eigenschaften. $ http response.data enthält aktuelle JSON-Daten. Es funktioniert nicht so wie jquery ($.ajax()) funktioniert. Sie müssen Ihre eckige Anwendung starten, bevor Sie den Dienst $http verwenden können.

Unten ist minimaler Beispielanzug zu Ihrem Bedarf.

<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
</head> 
<body ng-app="studApp" ng-controller="StudController"> 

    <input type="button" value="Get Data" ng-click="showData()" /> 
    <p id="displayData" /> 

    <script type="text/javascript"> 
     angular.module('studApp', []) 
     .controller('StudController', function($http, $scope) { 
      $scope.showData = function() { 
      $http({ 
       method : 'GET', 
       url : 'a/rest' 
      }).then(function(response) { 
       $('#displayData').html(JSON.stringify(response.data)); 
      }); 
      } 
     }); 
    </script> 
</body> 
</html>

Quelle

2016-07-06 13:04:20 YROjha

Danke YR sir :) Es funktioniert glatt .. !! –

versuchen diese

$ ('# displayData') html (JSON.stringify (response.data)).

serverseitige Rückgabedaten sind JSON-Zeichenfolge?

Quelle

2016-07-06 08:59:09

Server gibt JSON-Daten zurück, JSON.stringify (respose) wird verwendet, um ihn in string und $ ('# displayData') zu konvertieren. Html wird verwendet, um diese Zeichenfolgendaten in

zu setzen. Dein Code hat nicht funktioniert. Sie können teilen, wenn Sie zuvor ähnliche Implementierung haben? –

versuchen, dann zum Erfolg zu wechseln –

Angularjs mit Spring verbinden RESTFul-Dienst mit AngularJS $ http-Dienst

Antwort

Verwandte Themen