ng-submit刷新頁面而不是提交

Question

您好我有一個角度的Web窗體，它從用戶接受輸入並插入到數據庫中。我使用澤西 - 傑克遜休息Web服務和hibernate.But當我嘗試提交形式，刷新了超鏈接到當前頁面的上一頁，並且當前頁面被重新加載（上一頁的加載在網絡日誌中看到）。http請求中指定的URL甚至沒有被調用。以下是我的代碼

<div id="main"> 
    <h1>Create Leave</h1> 
    <form class="form-horizontal" ng-controller="MyAddController" > 
     <div class="form-group"> 
      <label for="employeeName" class="col-sm-3 control-label">Employee Name</label> 
      <div class="col-sm-6"> 
       <input type="text" id="num" class="form-control" ng-model="num" /> 
      </div> 
      <div class="col-sm-3"></div> 

     </div> 
     
      <div class="form-group"> 
      <label for="leaveType" class="col-sm-3 control-label">Leave Type</label> 
      <div class="col-sm-2"> 
       <select id="leaveType" class="form-control" ng-model="leaveType"> 
        <option value="">Hospital</option> 
        <option value="female">leave type 2</option> 
        <option value="female">leave type 3</option> 
         <option value="female">leave type 4</option> 
         <option value="female">leave type 5</option> 
         <option value="female">leave type 6</option> 
       </select> 
      </div> 
      <div class="col-sm-7"></div> 
     </div> 
     
     <div class="form-group"> 
      <label for="leaveStartDate" class="col-sm-3 control-label">Leave Start Date</label> 
      <div class="col-sm-2"> 
       <input type="date" id="startDates" class="form-control" ng-model="startDate" /> 
      </div> 
      <div class="col-sm-7"></div> 
     </div> 
     
     <div class="form-group"> 
      <label for="leaveEndDate" class="col-sm-3 control-label">Leave End Date</label> 
      <div class="col-sm-2"> 
       <input type="date" id="endDate" class="form-control" ng-model="endDate" /> 
      </div> 
      <div class="col-sm-7"></div> 
     </div> 
     
     
     
     <div class="form-group"> 
      <div class="col-sm-3"></div> 
      <div class="col-sm-2"> 
       <span><b>Is Half Day leave</b></span> 
       <div class="radio"> 
        <label><input value="Yes" type="radio" name="halfDay" ng-model="isHalfDay" />Yes</label> 
       </div> 
       <div class="radio"> 
        <label><input value="No" type="radio" name="halfDay" ng-model="isHalfDay" />No</label> 
       </div> 
      </div> 
      
     </div> 

     <input type="submit" value="Save" ng-click='add();' class="btn btn-primary col-sm-offset-3" /> 
     <input type="reset" value="Reset" ng-click="resetForm()" class="btn" /> <br/> 
\t \t 
    </form> 
    
    <script> 
\t function MyAddController($scope, $http) { 
\t \t $scope.add = function() { 
\t \t \t $http.get("webapi/blog/create", { 
\t \t \t \t params : { 
\t \t \t \t \t 
\t \t \t \t \t signum : $scope.num, 
\t \t \t \t \t leaveType : $scope.leaveType, 
\t \t \t \t \t startDate : $scope.startDate, 
\t \t \t \t \t endDate : $scope.endDate, 
\t \t \t \t \t isHalfDay : $scope.isHalfDay 
\t \t \t \t } 
\t \t \t }).success(function(data, status, headers, config) { 
\t \t \t \t if (data) { 
\t \t \t \t \t $scope.data = data; 
\t \t \t \t \t alert("success") 
\t \t \t \t } 
\t \t \t }).error(function(data, status, headers, config) { 
\t \t \t \t alert("error"); 
\t \t \t }) 
\t \t } 

\t } 
</script>

和bean類

package com.king.entity; 

import java.util.Date; 

import javax.persistence.Entity; 
import javax.persistence.Id; 

@Entity 
public class LeaveDetails { 
\t 
\t @Id 
\t private String num; 
\t public String getnum() { 
\t \t return num; 
\t } 
\t public void setnum(String num) { 
\t \t this.num = num; 
\t } 
\t public String getLeaveType() { 
\t \t return leaveType; 
\t } 
\t public void setLeaveType(String leaveType) { 
\t \t this.leaveType = leaveType; 
\t } 
\t public Date getStartdate() { 
\t \t return startdate; 
\t } 
\t public void setStartdate(Date startdate) { 
\t \t this.startdate = startdate; 
\t } 
\t public Date getEndDate() { 
\t \t return endDate; 
\t } 
\t public void setEndDate(Date endDate) { 
\t \t this.endDate = endDate; 
\t } 
\t public String getIsHalfDay() { 
\t \t return isHalfDay; 
\t } 
\t public void setIsHalfDay(String isHalfDay) { 
\t \t this.isHalfDay = isHalfDay; 
\t } 
\t private String leaveType; 
\t private Date startdate; 
\t private Date endDate; 
\t private String isHalfDay; 
\t 
\t 
\t 

}

DAO

package com.king.dao; 

import java.util.Date; 
import java.util.List; 

import org.hibernate.Query; 
import org.hibernate.Session; 
import org.hibernate.Transaction; 

import com.king.entity.Blog; 
import com.king.entity.LeaveDetails; 
import com.king.test.HibernateTest; 

public class AddLeaveDao { 
\t 
\t public void addDetails(LeaveDetails data) { 
\t \t Session session = HibernateTest.getSession(); 
\t \t Transaction ts = session.beginTransaction(); 
\t \t session.saveOrUpdate(data); 
\t \t session.flush(); 
\t \t ts.commit(); 
\t \t session.close(); 
\t }

和WS

package com.king.webapi; 

import java.util.Collection; 
import java.util.Iterator; 
import java.util.List; 

import javax.ws.rs.BeanParam; 
import javax.ws.rs.GET; 
import javax.ws.rs.Path; 
import javax.ws.rs.Produces; 
import javax.ws.rs.QueryParam; 

import com.king.dao.AddLeaveDao; 
import com.king.dao.BlogDao; 
import com.king.dao.LeaveDao; 
import com.king.entity.Blog; 
import com.king.entity.LeaveBalance; 
//import com.king.entity.Love; 
import com.king.entity.LeaveDetails; 

@Path("/blog") 
public class BlogWS { 

\t @GET 
\t @Path("list") 
\t @Produces({ "application/json" }) 
\t public List<LeaveBalance> list() { 
\t \t List l= new LeaveDao().getAllLeaves(); 
\t \t Iterator i=l.iterator(); 
\t \t while(i.hasNext()) 
\t \t { 
\t \t \t LeaveBalance m=(LeaveBalance)i.next(); 
\t \t \t System.out.println(m.getLeaveBalance()); 
\t \t } 
\t \t 
\t \t return l; 
\t } 

\t @GET 
\t @Path("create") 
\t @Produces({ "application/json" }) 
\t public String create(@BeanParam LeaveDetails ld) { 
\t \t System.out.println("Entered here"); 
\t \t new AddLeaveDao().addDetails(ld); 
\t \t System.out.println("Returned here"); 
\t \t return "{}"; 
\t } 

\t @GET 
\t @Path("findById") 
\t @Produces({ "application/json" }) 
\t public Blog findById(@QueryParam("id") String id) { 
\t \t return new BlogDao().findBlogById(id); 
\t } 

\t @GET 
\t @Path("update") 
\t @Produces({ "application/json" }) 
\t public String update(@BeanParam Blog blog) { 
\t \t new BlogDao().updateBlog(blog); 
\t \t return "{}"; 
\t } 
}

編輯：實際JS我使用

var app = angular.module('myApp', ['ui.calendar','ui.router']); 
app.controller('myNgController', ['$scope', '$http', 'uiCalendarConfig', function ($scope, $http, uiCalendarConfig) { 
    
    $scope.SelectedEvent = null; 
    var isFirstTime = true; 
    
    $scope.events = []; 
    $scope.eventSources = [$scope.events]; 
    $scope.events.push({ 
     title: "Leave", 
     description: "jahsojoaisjjoijaso", 
     start: new Date("2017-05-03"), 
     end: new Date("2017-05-03"), 
     allDay : false, 
     stick: false 
    }); 
    
    
    /*//Load events from server 
    $http.get('/home/getevents', { 
     cache: true, 
     params: {} 
    }).then(function (data) { 
     $scope.events.slice(0, $scope.events.length); 
     angular.forEach(data.data, function (value) { 
      
     }); 
    });*/ 
    
    //configure calendar 
    $scope.uiConfig = { 
     calendar: { 
      height: 450, 
      editable: false, 
      displayEventTime: false, 
      header: { 
       left: 'month basicWeek basicDay agendaWeek agendaDay', 
       center: 'title', 
       right:'today prev,next' 
      }, 
      eventClick: function (event) { 
       $scope.SelectedEvent = event; 
      }, 
      eventAfterAllRender: function() { 
       if ($scope.events.length > 0 && isFirstTime) { 
        //Focus first event 
        uiCalendarConfig.calendars.myCalendar.fullCalendar('gotoDate', $scope.events[0].start); 
        isFirstTime = false; 
       } 
      } 
     } 
    }; 
    
}]); 

app.controller("MyDbController",function ($scope, $http) { 
\t //$scope.data = [{title: 'welcome hello'},{title: 'great testing'}]; 

\t $http.get("webapi/blog/list", {}).success(function(data, status, headers, config) { 
\t \t $scope.data = data; 
\t }).error(function(data, status, headers, config) { 
\t \t alert("error"); 
\t }) 
}); 
app.controller("MyAddController",function ($scope, $http) { 
\t $scope.add = function() { 
\t $http.get("webapi/blog/create", { 
\t \t params : { 
\t \t \t signum : $scope.num, 
\t \t \t leaveType : $scope.leaveType, 
\t \t \t startDate : $scope.startDate, 
\t \t \t endDate : $scope.endDate, 
\t \t \t isHalfDay : $scope.isHalfDay 
\t \t \t 
\t \t } 
\t }).success(function(data, status, headers, config) { 
\t \t if (data) { 
\t \t \t $scope.data = data; 
\t \t \t alert("success"); 
\t \t } 
\t }).error(function(data, status, headers, config) { 
\t \t alert("error"); 
\t }) 
\t } 
}); 

app.config(function($stateProvider){ 
\t $stateProvider 
\t .state("applyLeave",{ 
\t \t url:"/applyLeave", 
\t \t templateUrl:"html/LeaveApply.html", 
\t \t controller:"leaveController", 
\t \t controllerAs:"leaveController" 
\t }); 
\t v.controller("leaveController",function($scope) 
\t \t \t { 
\t \t 
\t \t \t }) 
});

當我點擊保存，這是在瀏覽器中顯示的URL模式。 http://localhost:8081/hibernate-jersey-angularjs/?halfDay=No#/applyLeave。我不明白爲什麼。運行 http://localhost:8081/hibernate-jersey-angularjs/webapi/blog/create與虛擬參數一切工作正常。但在提交我不認爲webservice沒有被調用。

請幫

Answer 1

嘗試把ng-submit="add()"您<form>元素，並移除任何提交按鈕ng-click。

就目前情況來看，我不認爲這是角攔截形式後，你就只發布表單值當前網址...