表单提交时候我们应该控制提交按钮,不能点击多次进行数据的重复提交。要不然就会有冗余的重复的数据在系统中,造成系统出现数据垃圾。...jQuery很简单的就可以实现对表单提交按钮控制,下面就是相关的例子和代码。 [html] view plain copy print ?...> $(“#submit”).click(function(){ $(this).attr(“disabled”,”true”); //设置变灰按钮...; //设置三秒后提交按钮 显示 }) <form action="${pageContext.servletContext.contextPath...设置三秒后<em>提交</em><em>按钮</em> 显示 }) 附:其他的实现方法,也使用了js 第一种: [html] view plain copy
编写一个注册信息填写界面,使用jQuery和JavaScript处理输出的信息,该页面能完成多种信息检查,并能利用jQuery发送Ajax请求。...创建的JavaWeb项目名称为JQueryTest 这次一看就是前端的框架使用了 我就不多说 不熟练哈 编写一个注册信息填写界面,使用jQuery和JavaScript处理输出的信息,该页面能完成多种信息检查...text/javascript"> $(document).ready(function() { $("#test").hide(); <%--填写详细信息按钮单击事件...$("#emlabel").empty(); } }); }); <%--填写简要信息按钮单击事件...$("form a").first().text("查看使用内容").attr("id","protocol"); } }); <%--单击提交按钮响应事件
需求说明: 在页面中有一个图片和一个关闭按钮 当滚动条向下或向右移动时,图片和关闭按钮随滚动条移动,相对于浏览器的位置固定 单击“关闭”按钮时,页面中的图片和关闭按钮不显示 <script...弹出窗口,提示信息为“我编写的第一个jQuery程序” $(function() { alert('我编写的第一个jQuery...{ window.close(); } }) 上机练习3 制作课工场论坛发贴 需求说明; 单击“我要发帖”按钮,弹出发帖界面 在标题框中输入标题...email格式如web@sohu.com 手机号码必须是11位数字,首位必须是1 密码由4-10个字符,包含字母和数字 再次输入密码必须一致 光标离开后验证数据的合法性,不合法直接在文本框后提示 提交表单时...,选择“是”就删除选中行数据 点击“提交”按钮,将课程评分结果显示出来 代码如下: HTML部分 JS部分 CSS部分 <!
表单对象.submit(); //让表单提交 $(function () { //使用on给按钮绑定单击事件 click $("#btn...}) ; //使用off解除btn按钮的单击事件 $("#btn2").click(function (...) { //解除btn按钮的单击事件 $("#btn").off("click");...当单击jq对象对应的组件后,会执行fn1.第二次点击会执行fn2..... 注意:1.9版本 .toggle() 方法删除,jQuery Migrate(迁移)插件可以恢复此功能。
/jquery.min.js"> //1.使用ajax方法进行请求服务器 $(function...() { $("#btnTJ").click(function () { //1..确认两次密码是否一致 if...= $("#pwd").val()) { alert("两次输入的密码不一致!")...; return; }; //2..单击后调用ajax $.ajax...监听提交按钮的单击事件 });//1》。
//1.获取name对象,绑定click事件 /*$("#name").click(function () { alert("我被点击了......") // $("#name").focus();//让文本输入框获得焦点 //表单对象.submit();//让表单提交 });..."> $(function () { //1.使用on给按钮绑定单击事件 click $("#btn").on("click",function...() { alert("我被点击了。。。")...使用off解除btn按钮的单击事件 $("#btn2").click(function () { //解除btn按钮的单击事件
-- 需求:按钮 div,按钮单击控制div隐藏 display:none style --> 按钮 <...在前端中100px可以写成100,字典中属性key的value值100可以不加引号,但是100px必须写引号。 文字1 文字2 文字3...***事件属性 click() 鼠标单击 ready() DOM加载完成 blur() 元素失去焦点 focus()元素获得焦点 submit()用户提交表单 hover()同时为mouseenter...submit 组织默认提交行文 return false <!
采用Ajax整合表单数据进行提交给Servlet后台代码、可以完成同步或者异步操作。 以下中,并没有去声明同步或者异步。该属性为async,默认值为true[异步]....那么需要注意的是同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。 通俗来说,同步操作会导致步骤内容具有阻塞性的操作 目录 1....--引入JQuery插件--> 图书的名称: 图书的名称: <input type="text"...| 当被单击会触发匿名函数 $("#btn").click(function () { // 调用JQuery中的 .ajax()方法【url
看如下实例: (1)把单击事件处理程序注册到一个锚元素,而不是一个外层的上,那么就要面对另外一个问题:当用户单击链接时,浏览器会加载一个新页面。...(2)当用户在编辑完表单后按下回车键时,会触发表单的submit事件,在此事件发生后,表单提交才会真正发生。 这种行为与我们讨论的事件处理程序不是同一个概念,它是单击标签元素的默认操作。...既然是说默认行为,当然是元素必须有默认行为才能被取消,如果元素本身就没有默认行为,调用当然就无效了。什么元素有默认行为呢?如链接,提交按钮等。...false代替的 8 //return false只能取消元素 9 } 10 } 2、return false; javascript的return false只会阻止默认行为,而是用jQuery...1 //jQuery,既阻止默认行为又停止冒泡 2 $("#testA").on('click',function(){ 3 return false;//当然 也阻止了事件本身 4 }); 总结使用方法
表单类型选择器 需求描述:选中表单中的文本框密码框文件框按钮提交按钮重置按钮等,设置其背景为红色 <input type="...注意:如果存在(不存在)就删除(添加)一个样式类 需求描述:当<em>单击</em><em>按钮</em>的时候,隐藏 div,再次<em>单击</em><em>按钮</em>的时候,显示 div .hide { width: 100px; height...需求描述:为<em>按钮</em>添加<em>单击</em>事件,当<em>按钮</em><em>单击</em>的时候,向控制台输出 “<em>按钮</em>被<em>单击</em>了” <em>按钮</em> $('button').on('click',function () {...() { alert('表单<em>提交</em>了'); }); # 3.4.6 鼠标事件 # 1. click() 方法描述:当鼠标<em>单击</em>时调用所绑定的函数。...需求描述:为<em>按钮</em>绑定一个<em>单击</em>函数,然后点击<em>按钮</em>,在控制台输出 “<em>按钮</em>被<em>单击</em>了” <em>按钮</em> $('button').click(function () { console.log
完成后,重新部署运行程序,于登录页上故意不输入任何内容而直接单击“登录”按钮,提交后系统显示验证错误提示信息,如图所示: ?...刚进入页面时,借书功能是不可用的,但当输入了借书证号后,单击“查询”按钮,会在右边显示该读者所借书籍,同时“借书”按钮变亮,表示可以进行借书操作了,如图所示: ?...输入正确的ISBN及图书ID,单击“借书”按钮,就可借得此书,如图所示,会发现最下面是新借的书: ?...当输入正确的借书证号,单击“查询”按钮时,提交到“selectBook.action”,根据struts.xml配置下面的代码: ?...可以发现,“图书追加”提交按钮代码: ? ? ?
的核心函数,为 ()方法传入一个function() {} 作为参数,就相当于window.οnlοad=function(){写代码}重点2:使用 {}查找元素,使用.click()来绑定点击响应函数,把单击响应函数作为...因此我们需要用数组下标去取出来 按钮变色小案例 选择器 多个属性选择器并排写,选取结果为取交集。...子元素过滤器里面nth-child(2n-1),这里的n是从1开始取值 表单里面的button标签,会被默认作为submit提交按钮 jquery里面提供的增强for循环.each方法 对选择器的小总结...元素筛选方法----对选择器筛选后的方法,再次进行筛选 next筛选出来的是下一个紧邻元素,如果$("#one").next("span")那么下一个紧邻元素必须是span标签,否则查找不到 next...内容过滤选择器 可见性过滤选择器 属性过滤选择器 子元素过滤选择器 子元素过滤器里面nth-child(2n-1),这里的n是从1开始取值 表单里面的button标签,会被默认作为submit提交按钮
本章将详细讨论和学习如何使用jQuery AJAX来调用RESTful Web服务。... ...在HTML文件中,添加jQuery库,并在单击按钮时编写了将表单提交到RESTful Web服务的代码。... ...:8080/view-products ,可以看到如下所示的输出 - 访问URL => http://localhost:8080/add-products ,可以看到如下所示的输出 - 现在,单击按钮提交表单
* 表单对象.submit();//让表单提交 2. on绑定事件/off解除绑定 * jq对象.on("事件名称",回调函数) * jq对象.off("事件名称...给开始按钮绑定单击事件 1.1 定义循环定时器 1.2 切换小相框的src属性...给结束按钮绑定单击事件 1.1 停止定时器 1.2 给大相框设置src属性 */ var...给开始按钮绑定单击事件 $("#startID").click(function () { // 1.1 定义循环定时器 20毫秒执行一次...给结束按钮绑定单击事件 $("#stopID").click(function () { //处理按钮是否可以使用的效果
事件切换:toggle jq对象.toggle(fn1,fn2…) 当单击jq对象对应的组件后,会执行fn1.第二次点击会执行fn2… 注意:1.9版本 .toggle() 方法删除,jQuery...给开始按钮绑定单击事件 1.1 定义循环定时器 1.2 切换小相框的src属性 * 定义数组,存放图片资源路径 * 生成随机数。数组索引 2....给结束按钮绑定单击事件 1.1 停止定时器 1.2 给大相框设置src属性 */ var imgs = ["../img/man00.jpg", ".....给开始按钮绑定单击事件 $("#startID").click(function () { // 1.1 定义循环定时器 20毫秒执行一次 startId = setInterval...给结束按钮绑定单击事件 $("#stopID").click(function () { //处理按钮是否可以使用的效果 $("#startID").prop("disabled"
PHP+HTML表单上传文件 2. webuploader上传原理 使用php+html表单上传可以完成文件的上传工作,但是有缺点, 上传文件时必须提交整个页面,这样页面会被刷新 上传图片是没办法进行图片预览...webuploader解决了这两个问题,webuploader使用ajax技术提交表单,上传的时候不需要提交页面,可以利用事件监听机制监听上传的结果,在页面中做出反馈,而且还能做图片预览。...jquery来增强页面的体验。...--jquery 1.12-- <script src="https://cdn.jsdelivr.net/npm/<em>jquery</em>@1.12.4/dist/<em>jquery</em>.min.js" </script...}); /* * 设置上传按钮的单击事件 */ $('.btn-upload').click(function(){ imgUploader.upload(); /
我是灰小猿!一个超会写bug的程序猿!...在jquery框架的使用中,难免会遇到按钮或文本框等各种各样的要求要进行相应事件的绑定操作,进行事件的绑定能够增加页面的交互效果,相信在html和js中进行事件的绑定大家都不陌生,那么今天我就来和小伙伴们分享一下利用...Jquery对象.mouseout();鼠标移出时触发 表单对象.submit();//让表单提交*** 在这里需要注意:如果调用事件方法,不传递回调函数,则会触发浏览器默认行为。...当单击jq对象对应的组件后,会执行fn1.第二次点击会执行fn2…依次执行下去,当执行完之后会重新从第一个事件开始执行。...之后继续和大家分享应用jquery框架的实战案例! 我是灰小猿!我们下期见!
* 表单对象.submit();//让表单提交 2. on绑定事件/off解除绑定 * jq对象.on("事件名称",回调函数) * jq对象.off("事件名称") * 如果off方法不传递任何参数...给开始按钮绑定单击事件 1.1 定义循环定时器 1.2 切换小相框的src属性...给结束按钮绑定单击事件 1.1 停止定时器 1.2 给大相框设置src属性 */...给开始按钮绑定单击事件 $("#startID").click(function () { // 1.1 定义循环定时器 20毫秒执行一次...给结束按钮绑定单击事件 $("#stopID").click(function () { //处理按钮是否可以使用的效果
当单击jq对象对应的组件后,会执行fn1,第二次单击会执行fn2..... 【注意】1.9版本 .toggle() 方法删除,jQuery Migrate(迁移)插件可以恢复此功能。...(2)分析 给开始按钮绑定单击事件 定义循环定时器 切换小相框的src属性。首先定义数组,存放图片资源路径,然后生成随机数,作为数组索引。 2....给结束按钮绑定单击事件 停止定时器 给大相框设置src属性 (3)代码实现 <!....prop("disabled",false); $("#stopID").prop("disabled",true); }) //1.给开始按钮绑定单击事件...插件,在插件里面定义了两个方法,分别是check()和uncheck(),然后再给两个单击按钮绑定不同的方法事件。
表单重复提交是在多用户Web应用中最常见、带来很多麻烦的一个问题。有很多的应用场景都会遇到重复提交问题,比如: 点击提交按钮两次。 点击刷新按钮。...使用浏览器后退按钮重复之前的操作,导致重复提交表单。 使用浏览器历史记录重复提交表单。 浏览器重复的HTTP请求。 几种防止表单重复提交的方法 1.禁掉提交按钮。...表单提交后使用JavaScript使提交按钮disable。这种方法防止心急的用户多次点击按钮。但有个问题,如果客户端把Javascript给禁止掉,这种方法就无效了。 ...我之前的文章曾说过用一些jQuery插件效果不错。 2.Post/Redirect/Get模式。在提交后执行页面重定向,这就是所谓的Post-Redirect-Get (PRG)模式。...简言之,当用户提交了表单后,你去执行一个客户端的重定向,转到提交成功信息页面。
领取专属 10元无门槛券
手把手带您无忧上云