ng-submit aktualisiert die Seite anstelle von submit

Question

Hallo ich habe eine eckige Web-Formular, die Eingabe vom Benutzer und fügt in die Datenbank.Ich benutze Jersey-Jackson Rest Web-Services und Hibernate.But wenn ich versuche, die zu übermitteln form, die vorherige Seite, die den Hyperlink zur aktuellen Seite hatte, wird aktualisiert und die aktuelle Seite wird erneut geladen (Laden der vorherigen Seite wird im Netzwerkprotokoll angezeigt). Die in der HTTP-Anfrage angegebene URL wird nicht einmal aufgerufen. Folgend ist mein

Code

<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>

und die Bean-Klasse

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 }

und der 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 } 
}

edit: Ist js Ich bin mit

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 }) 
});

Wenn ich auf klicken Sie auf Speichern dies das URL-Muster im Browser angezeigt wird. http://localhost:8081/hibernate-jersey-angularjs/?halfDay=No#/applyLeave .Ich verstehe nicht, warum .On http://localhost:8081/hibernate-jersey-angularjs/webapi/blog/create mit Dummy-Parametern läuft alles funktioniert gut.Aber auf submit, ich glaube nicht, dass der Webservice nicht aufgerufen wird. Bitte

helfen

Answer 1

Versuchen ng-submit="add()" auf Ihrem <form> Element setzen und entfernen Sie die ng-click von Ihrem Absenden-Button.

Wie die Dinge glaube ich nicht ertragen, dass Angular die Form Post abfängt und Sie sind nur Werte Form auf die aktuelle URL veröffentlichen ...