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

2023-12-24

您好,我有一个有角度的 Web 表单,它接受用户的输入并插入到数据库中。我正在使用 jersey-jackson Rest Web 服务和 hibernate。但是当我尝试提交表单时,上一页有指向当前页面的超链接刷新页面并再次重新加载当前页面(在网络日志中可以看到上一页的加载)。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>

和豆类

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)
			{
		
			})
});
When i click on save this is the url pattern shown in the browser. http://localhost:8081/hibernate-jersey-angularjs/?halfDay=No#/applyLeave http://localhost:8081/hibernate-jersey-angularjs/?halfDay=No#/applyLeave .I dont understand why

请帮忙


解决这个问题最简单的方法是删除type="submit"从调用 add() 方法的按钮中,将其替换为type="button"

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

否则,您需要添加ng-submit="add()"在您的表单上,然后删除ng-click="add()"从你的按钮 type=submit 。

您的表单应如下所示:

 <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 指令的末尾。另外,尝试使用按钮标签而不是输入进行保存button.

编辑:您忘记声明要在 html 中使用的应用程序。在 HTML 代码正文中,使用ng-app='myApp'

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ng-click刷新页面而不是提交 的相关文章

随机推荐

  • Java2D OpenGL 图形加速不起作用

    我想将 Swing 与 Java2D OpenGL 图形加速一起使用 然而 它不起作用 我自己回答了这个问题 因为我寻找解决方案很长一段时间 这是我的代码 import javax swing JFrame import javax swi
  • 回滚 GitHub Desktop(或 Windows 版 Github)中未提交的更改

    我在用着Github 桌面 https desktop github com 以前称为适用于 Windows 的 GitHub https windows github com 并且我对本地文件做了很多更改 事情变得如此混乱 我决定只想将本
  • WordPress 上的 Google Analytics 事件跟踪

    我试图在单击特定菜单项时发送事件 我的头脚本如下
  • BI 设计器多对多关系

    我是 Microsoft Power BI 设计器的新手 注意到了这一点文档 https support powerbi com knowledgebase articles 464155 create and manage relatio
  • 使用霍夫变换、OpenCV 和 python 进行平行线检测

    我需要有关我一直在研究的算法的帮助 我试图检测阈值图像中的所有线条 检测所有线条 然后仅输出平行的线条 阈值图像输出我感兴趣的对象 然后我通过精明的边缘检测器过滤该图像 然后将该边缘图像通过概率霍夫变换 现在 我希望该算法能够检测任何图像中
  • 将 Java byte[] 对象插入 H2 表中,然后再次检索它

    我正在尝试将 Java byte 插入 H2 数据库表中 然后再次检索它 但我没有取得成功 根据这一页 http www h2database com html datatypes html binary type BINARY 数据类型直
  • 无法使用 jdbcStorageHandler 创建 Hive 外部表

    我正在 Amazone EMR 中运行一个小型集群 以便使用 Apache Hive 2 3 5 据我了解 Apache Hive 可以从远程数据库导入数据并让集群运行查询 我正在遵循 Apache Hive Web 文档中提供的示例 ht
  • 遵循 Python/Flask Heroku 教程时出现“foreman start”错误

    遵循所有指示 运行的时候出现这个错误foreman start C Program Files x86 ruby 1 9 3 lib ruby gems 1 9 1 gems foreman 0 47 0 lib fo reman engi
  • 使窗口成为桌面的一部分

    我想创建一个窗口 CreateWindowEx WS EX TOOLWINDOW WS EX LAYERED wc lpszClassName 0 WS POPUP WS VISIBLE WS SYSMENU a part桌面的 我知道这可
  • 2020 年以上,Typescript 在运行时使用类型防护按类型或接口检查对象

    对我来说 大多数时候 需要动态检查来验证获取响应 我在想 对于具有多个道具和附加检查的任何类型的对象 可以使用用户定义的类型保护以通用方式完成此操作 因此可以使用类似的方法 这是一个带有示例对象的示例 但我想要一个没有它的函数 https
  • postgresql 中的慢 OR 语句

    我目前的 postgresql 查询由于 OR 语句而变慢 因此 它显然没有使用索引 到目前为止 重写此查询失败 查询 EXPLAIN ANALYZE SELECT a0 id AS id0 FROM advert a0 INNER JOI
  • 抑制 Xcode 中已弃用的警告

    由于所有 SDK 都在使用 因此能够方便地针对多个 SDK 和平台进行构建 然而 从 3 2 跳到 3 0 甚至偶尔跳到 2 x 我经常收到涉及已更改或被取代的方法的弃用警告 warning UIKeyboardBoundsUserInfo
  • JPA - 仅针对给定查询强制延迟加载

    如何仅针对给定的 NamedQuery 实施延迟加载策略 例如 考虑下面的伪代码 只是为了解释这种情况 我有一个实体 Entity class Xyz int a int b Fetch EAGER Set
  • pandas 数据框 groupby 和 join

    让我们假设有这样的 np random seed 123 df pd DataFrame A foo bar foo bar foo bar foo foo B one one two three two two one three C n
  • NLTK - 获取并简化标签列表

    我正在使用布朗语料库 我想要某种方法来打印所有可能的标签及其名称 而不仅仅是标签缩写 标签也不少 有没有办法 简化 标签呢 我所说的简化是指将两个极其相似的标签合并为一个 然后用另一个标签重新标记合并后的单词 之前以某种方式讨论过 Java
  • 仅 DIV 的两列 CSS 布局

    我正在重新设计当前使用表格进行两列设计的布局 并遇到了一些问题 div div div blah div div div div blah div div blah div div div leftCol margin right 10px
  • 如何使用反射获取泛型类的名称?

    如何使用反射获取泛型类的名称 eg public class SomeGenericClass
  • Android 地理围栏的最大限制?

    我从 Google Play 服务的地理围栏 API 开始 我想我理解了一般概念 但我不知道地理围栏是否有限制 我将地理围栏列表提供给位置客户端 然后由他处理其余的事情 但是我可以将多少个地理围栏传递给位置客户端 我想要多少就多少 每个设备
  • 直接在 .htaccess 文件内生成随机数

    目前我正在添加一个随机数到我的结束Ajax通过 Javascript 或 PHP 的 URL 我想知道我是否可以在我的内心做同样的事情 htaccess文件 当我使用 mod rewrite 重写它们时 有什么办法可以制作一个随机数 or
  • ng-click刷新页面而不是提交

    您好 我有一个有角度的 Web 表单 它接受用户的输入并插入到数据库中 我正在使用 jersey jackson Rest Web 服务和 hibernate 但是当我尝试提交表单时 上一页有指向当前页面的超链接刷新页面并再次重新加载当前页