javascript如何监听form 表单提交请求?

前端form 表单提交请求如何监听?就像ajax请求可以通过xmlHttpRquest对象去监听
所有的ajax请求,对其中的参数做一层包装再发送到后台,后台返回的数据也可以在此
处做一次封装再发给指定的页面一样,但是xmlHttpRquest捕捉不到form表单提交的
请求,请问各位大神form表单提交的请求前端如何捕获?

0

6个回答

表单的onsubmit事件,或者给input为submit的类型添加onclick事件也行,返回false阻止表单提交

 <form onsubmit="return check(this)>
用户名:<input type="text" name="un"/>
......
</form>
<script>
function check(f){
   if(f.un.value==''){alert('');f.un.focus();return false}
     //...其他验证
}
</script>
0

给所有的form注册submit事件不就可以了?
$('form').submit(function () { });

0

<!DOCTYPE html>










<br> window.onload = function(){<br> function validate(value){<br> return /^\d+$/g.test(value);<br> };<br> var form = document.getElementById(&quot;mimi&quot;);<br> var num = document.getElementById(&quot;num&quot;);<br> form.onsubmit = function(){<br> if(validate(num.value)){<br> alert(&quot;true&quot;);<br> return true;<br> }else{<br> alert(&quot;false&quot;);<br> return false;<br> }<br> }<br> }<br>


0
<script>
    window.onload = function(){
        function validate(value){
            return /^\d+$/g.test(value);
        };
        var form = document.getElementById("mimi");
        var num = document.getElementById("num");
        form.onsubmit = function(){
            if(validate(num.value)){
                alert("true");
                return true;
            }else{
                alert("false");
                return false;
            }
        }
    }
</script>
0





0
 <form onsubmit="alert('你确定要提交表单吗?')">
0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
如何用javascript以post方式提交form表单
有时候在做页面跳转的同时传递一些数据过去,如果采用url链接的方式就会被人看到,想要隐藏数据又不想写html,可以采用下面的方法。   目的:将接收到的用户名和密码发送到另一个地址(相对地址/绝对地址均可)   servlet+js方法: &amp;lt;% String username = request.getParameter(&quot;username&quot;); String passwo...
jQuery-form表单事件
&amp;lt;form action=&quot;#&quot; method=&quot;get&quot;&amp;gt; &amp;lt;input type=&quot;text&quot; name=&quot;user&quot;&amp;gt; &amp;lt;input type=&quot;password&quot; name=&quot;pwd&quot;&amp;gt; &amp;lt;button type=&quot;submit
js_使用原生js方法提交post表单
var url = &quot;/ssm/role/setRoleModules.action&quot;; var postForm = document.createElement(&quot;form&quot;);//表单对象 postForm.method=&quot;post&quot; ; postForm.action = url; var roleidInput = d...
在JS中模拟表单的post提交,进行页面的跳转
封装为Post(URL, PARAMTERS) 函数: /* *功能: 模拟form表单的提交 *参数: URL 跳转地址 PARAMTERS 参数 */ function Post(URL, PARAMTERS) { //创建form表单 var temp_form = document.createElement(&amp;quot;form&amp;quot;); ...
JavaScript之form表单提交前验证的onSubmit事件
在前端使用JavaScript验证表单数据时,对验证不通过的form表单要阻止其提交到后台。这时,可以使用onSubmit事件来阻止其提交。 &amp;lt;form method=&quot;post&quot; onsubmit=&quot;return checkBeforeSubmit()&quot; action=&quot;registerSubmit&quot;&amp;gt; &amp;lt;div&amp;gt; ...
iOS 使用form表单形式提交post请求
今天朋友刚到新公司遇到个问题,后台只支持form表单形式提交post数据,纠结了很久不知道改怎么搞,后台提供了一份样例。 Exception { String wsFormInfo = ZqkjCore.createLinkString(saveContractInfo); String wsSignVal=DecryptData.sign(w...
js 监听表单提交事件,防止表单重复提交
调用时用提交按钮click 事件,监听提交后按钮变灰可将监听事件单写函数 如下 $('#btn').click(function() {     var items = {         inputemail : [{type:'null', errMsg:zhffTip.langs.errTpl.noText.stringFormat('邮箱')}, {type:'email', err
js 模拟表单post方式提交
即使js给form对象提供了submit()方法
JavaScript 创建一个 form 表单并提交
页面布局有些复杂的情况下,可能需要在页面中动态创建一个 form,JavaScript 创建 form 演示如下:创建div也是类似的function MakeForm()  {        // 创建一个 form      var form1 = document.createElement(&quot;form&quot;);      form1.id = &quot;form1&quot;;      form1.name ...
在JS中写form表单的提交与判断
form表单提交 var f = document.getElementById('f'); //输入框获取 var a = document.getElementById('a'); //提交表单的事件监听 f.onsubmit = function (){ //判断是否存在内容 if(a.v
js实现的模拟form提交数据
三月的最后一天,再来发篇博文,由于需要使用window.open的方式去访问URL,但是所需要传递的参数比较多,window.open默认使用的是get方式提交数据,这使开发很不爽。 在别人的指导下,在js中模拟form提交也是一个不错的想法,但是很尴尬,我用jQuery实现的form提交不能够请求到后台,以下是我写的代码, var form = $(''); form
模拟form提交表单
表单结构 模拟form提交表单,当点击按钮时执行form的submit()事件,表单的Name为接口所需参数名称,表单value为接口所需参数值 &amp;lt;!-- 模拟form表单提交 --&amp;gt; &amp;lt;form action=&quot;&quot; method=&quot;post&quot; target=&quot;_blank&quot; id=&quot;form_export&quot; hidden&amp;gt; &amp;lt;input
layui表单在监听提交事件中,用ajax提交刷新页面问题,弹出窗无效
今天用layui中form表单提交,使用了提交监听事件用$.ajax提交,想用弹出层给页面提示效果,可惜弹出层无效,。页面刷新??? 代码如下: layui.use(['form', 'jquery', 'layer'], function () { var form = layui.form; var $ = layui.jquery; var layer ...
Node.js 处理post请求(表单提交)
显示一个文本区(textarea)供用户输入内容,然后通过POST请求提交给服务器。最后,服务器接受到请求,通过处理程序将输入的内容展示到浏览器中。
js模拟支付宝提交表单
最近在改一个项目,客户要求从选择商品到购物车的页面不能使用地址栏传参,可这个地方已经是米已成炊不能推到重做,忽然灵光一闪想起了前段时间对接支付宝接口的事情,因此用它的那套思想解决了地址栏传参的难题。
form表单如何使用js来发送请求?
假如一个页面的form标签的id属性为objForm。下面提供两种方法: 1. 通过$('#objForm').serialize()序列化表单中的数据,得到的结果是不同参数之间用&连接起来的字符串 解决方法:http://www.yayihouse.com/yayishuwu/chapter/1030
监听from的submit事件
首先来看段demo<DOCTYPE html> <html> <head> <title>test</title> <meta charset="UTF-8"> </head> <body> <form id='from' action='./'> <input type='text' id='inOne
关于form提交的中文字符串错误笔记
最近在做web的项目,easyui的前台页面上的输入框输入中文的时候,输入OK的,进行submit以后,后台取request的parameter的数据是乱码,在form所在的html文件里也定义了&amp;lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;/&amp;gt;,后台采用的是Jfinal的框架,对request的字符...
JS创建表单提交后台设置请求方式
JS 创建表单并提交 用途:在界面上选择几千个订单,读取ID号提交到后台处理,有几种方法实现,$.ajax方法提交不能打开新窗口,form表单提交可能被其他功能占用。 创建表单并设置参数类型、提交方式等,可以实现 form 一样的功能。 适用于创建任何HTML元素、追加到指定元素后、设置元素属性 var f = document.createElement("form"); //
解决刷新页面造成的Form重复提交触发监听方法
解决刷新页面造成的Form重复提交触发监听方法  Form和DirectLink组件都是使用DirectServcie,刷新页面时的重复提交,是由于DirectService生成的URL造成了。例如DirectLink的URL:为了解决重复提交问题,当时的做法就是将DirectServcie所生成的URL修改为ExternalService的URL,如果DirectServcie的URL中没有
如何通过纯javascript实现表单提交
如何通过纯javascript实现表单提交通常,如果是POST方法,一般使用vuejs+axios,或使用Jquery实现表单提交。有些地方,我想使用纯JS实现,比方简单的登陆跳转。话不多说,看原代码,laravel中的HTML部分,如果不是laravel,去掉 {{csrf_field()}}这一行即可<form class="form-signin" id="myform"> {{csr
js改变form提交路径
页面内容 form role="form" action="#" method="get" th:action="@{/url1/}" id="myFrom"> button type="button" onclick="exportlist();">buttonbutton> form> JS内容 script type="text/javascript"> f
form的另外一种提交方式(伪装提交)
方法一:(伪装form表单提交) linkredwin = function(A,B,C,D,E,F,G){         var formredwin = document.createElement("form");         formredwin.method = 'POST';         document.body.appendChild(formredwin);
Form表单的监听事件
&amp;lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.0 Transitional//EN&quot;&amp;gt; &amp;lt;HTML&amp;gt; &amp;lt;HEAD&amp;gt; &amp;lt;TITLE&amp;gt; Form表单的监听事件 &amp;lt;/TITLE&amp;gt; &amp;lt;META NAME=&quot;Generator&quot; CONTENT=&quot;EditPlus&qu
js表单提交方式与表单事件
1、表单提交方式(1)使用submit提交<form> ... <input type="submit"> </form>提交form内内容(2)使用button提交表单body内代码<form id="form1"> <input type="text" name="username"> <br> <input
form表单改为AJAX提交
一、form表单改成AJAX提交 原来的form格式 form action="xxx" method="get"> //action的值是请求的url地址 div class="form-group"> label for="name">姓名label> input type="text" class="form-control" name="n
模拟form表单同步方式下载文件
function xxxx(){ var url = baseUrl+'/order/exportOrder/exportInWarehouseOrderJson.do';                 var form = $("").attr("action", url).attr("method", "post");                 form.append($("")
js模拟表单提交数据..
var form = $('&amp;lt;form&amp;gt;&amp;lt;/form&amp;gt;'); form.attr('method','post') form.attr('action','/manage/index') var input1 = $('&amp;lt;input name...
http模拟from表单提交,进行跨域请求和上传资源
关于跨域就不多说了,毕竟本人也是小白。 网上的资料很多 From: 上传文件必须将http协议Content-Type设置为multipart/form-data,表示可以上传文件 还要设置boundary :这个参数是由应用程序自行产生,它会用来识别每一份资料的边界 ,但我们是自己模拟所以必须手动创建。 网上浏览资料发现from模板 "\r\n--" + boundary
ios中的表单的传递
这个确实是弄了好久,纠结了好久,在网上借鉴了这个方法,在这浪费了太多的时间,分享给大家,少走弯路吧…… 这个自己定义的 //  RequestPostUploadHelper.h //  PocketIdol1 // //  Created by  on 16/1/22. //  Copyright © 2016年 . All rights rese
SSM框架下实现form表单提交的方式
实现form表单的提交有多种方式,这里我们主要讲两种常用的。 注:此Demo是在SSM框架下完成的,数据库采用MySQL,关于ssm整合的相关知识,这里不做过多赘述。主要展示表单提交方式,暂不考虑代码健壮性。 一、常见的form表单提交方式 分析:常见的表单提交方式,在表单中添加一个submit按钮,当点击按钮后,通过请求表单的action中的url,跳转到表现层从而完成对...
【Layui】var form = layui.form的意思 监听提交事件
author:咔咔 wechat:fangkangfk   看了文档后,说这种写法是获取form模块,也就是说操作from模块需要使用form来调用   保存按钮的lay_fileter的值,就是监听提交事件的test  //监听提交按钮 form.on('submit(test)', function(data){ console.log(data); })...
Form表单提交到Web服务器
 Form表单: &amp;lt;%@ page language=&quot;java&quot; import=&quot;java.util.*&quot; pageEncoding=&quot;UTF-8&quot;%&amp;gt; &amp;lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &a
form表单的回调
背景:平时使用的form表单只能单方向提交,不能进行和ajax类似的回调,在这种背景下给大家介绍一下这种新的方法实现form表单的回调 用到的js脚本   应用:提交文件到服务器(form表单最简单),同时进行回调。 注,文件提交的代码没写,本案例目标是掌握form表单回调 本文档使用方法: 把文件放在phpstudy的WWW目录   浏览器访问   成功显示   ...
layui框架,form提交了两次,问题原因解决
请先阅读原文; 原文地址 : https://blog.csdn.net/u010742206/article/details/80348422 问题 : 原文说, 因为layui.js中包含了form.js文件, 所以单独引用两次layui.js应该也会触发两次, 但是我测试的并没有, 不知道问什么??? 补充 : 不过我遇到了另外一个问题, 如果连续引用两次layui.all.js文件...
js 回车键监听和js 提交表单
//回车的键值为13 function document.onkeydown(){ if (event.keyCode == 13) { //js 监听对应的id document.getElementById(&quot;login_1&quot;).click(); return false ; ...
js 创建一个post虚拟表单
js 创建post提交请求
submit的form表单提交事件
表单提交get和post
一 get和post的区别   二 实战(post方式提交) 1、login.jsp  page language="java" import="java.util.*" contentType="text/html; charset=utf-8" %> String path = request.getContextPath(); String basePath = re
IE下面JavaScript提交form表单提交失败,JS报拒绝访问
代码大致如下[HTML] 纯文本查看 复制代码?0102030405060708091011121314151617181920212223242526272829303132333435    &amp;lt;script&amp;gt;        function picchange() {            if (document.all) {                var b = doc...
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 web请求教程 java监听学习