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

时间：2017-05-09 11:18:31

标签： angularjs jersey

嗨我有一个有角度的网页表格，它接受用户的输入并插入数据库。我正在使用jersey-jackson休息网络服务和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/>
		
   </form>
   
  <script>
	function MyAddController($scope, $http) {
		$scope.add = function() {
			$http.get("webapi/blog/create", {
				params : {
					
					signum : $scope.num,
					leaveType : $scope.leaveType,
					startDate : $scope.startDate,
					endDate : $scope.endDate,
					isHalfDay : $scope.isHalfDay
				}
			}).success(function(data, status, headers, config) {
				if (data) {
					$scope.data = data;
					alert("success")
				}
			}).error(function(data, status, headers, config) {
				alert("error");
			})
		}

	}
</script>

和bean类

package com.king.entity;

import java.util.Date;

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

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

}

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 {
	
	public void addDetails(LeaveDetails data) {
		Session session = HibernateTest.getSession();
		Transaction ts = session.beginTransaction();
		session.saveOrUpdate(data);
		session.flush();
		ts.commit();
		session.close();
	}

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

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

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

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

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

编辑：我使用的实际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) {
	//$scope.data = [{title: 'welcome hello'},{title: 'great testing'}];

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

app.config(function($stateProvider){
	$stateProvider
	.state("applyLeave",{
		url:"/applyLeave",
		templateUrl:"html/LeaveApply.html",
		controller:"leaveController",
		controllerAs:"leaveController"
	});
	v.controller("leaveController",function($scope)
			{
		
			})
});
当我点击保存时，这是浏览器中显示的网址模式。 http://localhost:8081/hibernate-jersey-angularjs/?halfDay=No#/applyLeave。我不明白为什么。使用虚拟参数运行http://localhost:8081/hibernate-jersey-angularjs/webapi/blog/create一切正常。但提交时我不认为没有调用web服务。

请帮忙

1 个答案:

答案 0 :(得分：0)

尝试将AcroPDDoc pdfd = new AcroPDDoc(); pdfd.Open(filename);[enter image description here][1] Object jsObj = pdfd.GetJSObject(); Type jsType = pdfd.GetType(); //have to use acrobat javascript api because, acrobat object[] saveAsParam = { "newFile.docx", "com.adobe.acrobat.docx", "", false, false }; jsType.InvokeMember("saveAs", BindingFlags.InvokeMethod | BindingFlags.Public | BindingFlags.Instance, null, jsObj, saveAsParam, CultureInfo.InvariantCulture); 放在ng-submit="add()"元素上，然后从提交按钮中删除<form>。

根据情况，我不认为Angular会拦截表单帖子，而您只是将表单值发布到当前网址...

相关问题
最新问题