2017-05-09 19 views
0

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

<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。我不明白爲什麼

請幫助解決這個問題是從你的按鈕調用add()方法去除type="submit"

+0

爲什麼使用'get'創建並且實體字段與您從ajax發送的json數據不匹配。 –

+0

+哈迪..Dint完全按照你剛纔的說法。我是初學者..請讓我知道是什麼問題 –

回答

0

最簡單的方式,與type="button"

<input type="button" value="Save" ng-click='add()' class="btn btn-primary col-sm-offset-3" /> 

替換它,否則,你需要在表單上添加ng-submit="add()",然後使用type = submit從您的按鈕中刪除ng-click="add()"

你的形式應該是這樣的:

<form class="form-horizontal" ng-controller="MyAddController" ng-submit="add()"> 

而且你的按鈕是這樣的:

<input type="submit" value="Save" class="btn btn-primary col-sm-offset-3" /> 

無論這些應該工作。

順便說一句,你不需要使用;在ng-click指令的末尾。此外,請嘗試使用按鈕標記,而不是輸入按鈕按鈕

編輯:你忘了聲明應用程序在你的HTML中使用。在您的HTML代碼的正文中,使用ng-app='myApp'

+0

已嘗試給出同樣的問題 –

+0

看看[這個問題的答案](http://stackoverflow.com/questions/14524020/angular-js-does-not-allow-preventdefault-or-返回false到工作表單傳遞) –

+0

@vikk,你是否爲你的控制器創建了一個模塊?看看有關角度如何工作在這裏的文檔:https://docs.angularjs.org/guide/controller –