post方法不适用于角度js

时间:2017-07-22 07:28:44

标签: angularjs spring spring-mvc

我正在尝试使用angularjs,spring和hibernet在表中添加数据。 以下是我正在使用的代码:

addCustomer.js

var addNewCustomerModule = angular.module('addNewCustomer',[]);
var c=angular.module('addCustomerController',[]);

addNewCustomerModule.controller('addCustomerController', function ($scope,$http) {

    //$http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";

     var urlBase="http://localhost:8081/manufacturing";
     var customerDetails={};
     $scope.addCustomer = function addCustomer() {
         customerDetails=$scope.customer;  
         alert("hai");
         $http.post(urlBase + '/addCustomer/new/',customerDetails).
            success(function(data) {
               alert("Customer added");
               $scope.customer = data; 
              });
          } 
     });

addCustomer.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"

    pageEncoding="ISO-8859-1"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="addNewCustomer">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Add Customer</title>
<script data-require="angular.js@*" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="<c:url value="/resources/js/addCustomer.js"/>"></script>
</head>
<body>
<div ng-controller="addCustomerController">

<table>

     <tr>
      <td> FirstName:</td>
      <td><input type="text" ng-model="customer.firstName"/></td>
      <td>LastName:</td>
      <td><input type="text" ng-model="customer.lastName"/></td>    
     </tr>

     <tr>
      <td>Designation</td>
      <td><input type="text" ng-model="customer.designation"/></td>
      <td>Email</td>
      <td><input type="text" ng-model="customer.email"/></td>
     </tr>

     <tr>
      <td>Phone</td>
      <td><input type="text" ng-model="customer.phone"/></td>
      <td>Fax</td>
      <td><input type="text" ng-model="customer.fax"/></td>
     </tr>

     <tr>
      <td>Website</td>
      <td><input type="text" ng-model="customer.website"/></td>         
      <td>ContactType</td>
      <td><input type="text" ng-model="customer.contact_type"/></td>
     </tr>

     <tr>
      <td>AddressTitle</td>
      <td><input type="text" ng-model="customer.addressTitle"/></td>         
      <td>AddressLine1</td>
      <td><input type="text" ng-model="customer.addressLine1"/></td>         
     </tr>

     <tr>
      <td>AddressLine2</td>
      <td><input type="text" ng-model="customer.addressLine2"/></td>
      <td>City</td>
      <td><input type="text" ng-model="customer.city"/></td>
     </tr>

     <tr>
      <td>State</td>
      <td><input type="text" ng-model="customer.state"/></td>
      <td>Country</td>
      <td><input type="text" ng-model="customer.country"/></td>
     </tr>

     <tr>
      <td>PinCode</td>
      <td><input type="text" ng-model="customer.pincode"/></td> 
     </tr>

     <tr>
      <td>Type</td>
      <td><input type="text" ng-model="customer.type"/></td>
      <td>Name</td>
      <td><input type="text" ng-model="customer.name"/></td>
     </tr>

     </table>

     <button ng-click="addCustomer()" class="btn-panel-big">Add New Customer</button></td>
     </div>
</body>
</html>

弹簧控制器

 @RequestMapping(value="/addCustomer/new/",method=RequestMethod.POST)
    public String updateUser(@RequestBody Customer cu,HttpSession session) throws ParseException{
      customerService.addCustomer(cu);
      return "addCustomer";
  }  

这里 $ http.post(urlBase +&#39; / addCustomer / new /&#39;,customerDetails)它没有调用我的spring controller.i在浏览器调试中检查它说网址404错误,但我有这个网址的控制器。我不知道如何解决这个问题,任何人都可以帮我解决这个问题

1 个答案:

答案 0 :(得分:1)

问题是你正在使用带有角度js版本1.6.X的$ http。(..)。sucess()函数。 Angular js团队已从$ http中删除了success()和error()方法。 这是链接:Why are angular $http success/error methods deprecated? Removed from v1.6?

你需要使用$ http的then()函数。像这样:

    $http.post(urlBase +'/addCustomer/new/',customerDetails).then(function(data) {
        console.log(data);
    },function(error){
        console.log(error);
    });