技术标签: ajax提交方式 Ajax的多种提交方式 form表单提交前验证 form表单的提交 form表单的多种提交方式
以下是本人总结处来的一些form的提交方式,网上还有别的提交方式,这里我总结了大小分为7类,其实就是三类的提交方式,若有哪里不对的,还请评论指出来,大家一起学习学习
该方式不提供任何的验证方式,当我们点击提交时(提交的前提一定是 <input> 的type="submit"或者加粗样式<button>的type=“submit”)
form直接与后台交互,后台通过表单里面的name属性来获取表单里的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form表单提交</title>
</head>
<body>
<!-- 只是提供简单的例子,所以未添加任何的css样式 -->
<form action="Controller/method" method="post">
<input type="text" name="name"/>
<input type="submit" value="提交"/>
<button type="submit">提交</button>
</form>
</body>
</html>
当type = submit时,该点击发生后,就直接启动了form的提交,而type = botton时,只是表明了该标签是一个按钮,当发生点击时,form没有任何的反应
该提交方式中 input 或者 button 的type还是 submit类型的,但是在form 表元素里面需要加上 οnsubmit=“return check()”
其中 check(),是我们用来做验证的函数,且前面必须加 return,否则无论我们的返回值是什么,表单就都将会提交,这样我们的验证函数就相当于名存实亡了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form表单提交</title>
</head>
<body>
<!-- 只是提供简单的例子,所以未添加任何的css样式 -->
<form action="Controller/method" method="post" onsubmit="return check()">
<input type="text" name="name"/>
<input type="submit" value="提交"/>
<button type="submit">提交</button>
</form>
</body>
<script type="text/javascript">
function check() {
if(){
return true; //return true; 时,表单将提交
}
else {
return false; //return false; 时,表单不提交
}
}
</script>
</html>
上述提交的check函数中,我们可以对表单里面的数据进行判断或者验证,当验证结果是我们需要的,我们就可以返回true,将表单提交,如果是错误的,那么我们可以对表单做接下来的一些处理再 return true,或者干脆return false,做到不提交吗,这样就保证了我们数据的安全性,当数据不需要时,我们就不提交
该提交方式中 input 或者 button 的type则应该是button类型的,因为这样写就是为了做到验证,然后判断是否需要提交,如果写成了submit的话,就是变成无论如何都要提交了,将type=button,然后后给元素添加一个onclick事件,绑定函数,当在函数里面判断后,如果需要提交,则可以添加 $(“form”).submit(); 语句,表示需要提交了,如果不想提交,则将该语句规避就可以了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form表单提交</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<!-- 只是提供简单的例子,所以未添加任何的css样式 -->
<form action="../../Controller/method" method="post">
<input type="text" name="name"/>
<input type="button" value="提交" onclick="check()">
<button type="button" onclick="check()">提交</button>
</form>
</body>
<script type="text/javascript">
function check() {
/**
* 编写验证代码,若不想提交,就可以提前return;达到不提交
*/
$("form").submit();
}
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form表单提交</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
</head>
<body>
<!-- 只是提供简单的例子,所以未添加任何的css样式 -->
<form action="../../Controller/method" method="post">
<input type="text" name="name"/>
<input type="submit" value="提交">
<button type="submit">提交</button>
</form>
</body>
<script type="text/javascript">
$(function () {
$("form").validate({
/**
* 只是写一个例子,所以验证并没有给出
*/
submitHandler:function (form){
/**
* 添加我们需要的验证信息
* 如果不需要提交,还是直接return就行了,规避form.submit();
*/
form.submit();
}
});
});
</script>
</html>
使用该方法时,我们必须引入jQuery的插件(上述代码已给出),并且我们的 input 或者 button 的type则应该是submit类型的,否则不会响应,所谓的不会响应就是压根就不会执行submitHandler:function 下面的这个函数因为当表单验证成功并提交时执行,存在此方法时表单只能在此方法内部执行form.submit()才能提交,可理解成它替代了表单的onsubmit方法;,但是button在前面已经说过了,它并不是一个提交,而是表明它只是一个按钮而已,所有input 或者 button 的type则应该是submit类型的
在submitHandler:function 函数的最后如果需要提交,执行的一定是form.submit();而不是$(“form”).submit();因为后者会造成一个死循环,因为上面解释过了,submitHandler:function 是在表单验证改成并且执行提交时才会执行,而$(“form”).submit();就是表单执行提交,所以每一次都执行提交,然后跳转submitHandler:function ,然后在该函数里面又执行了提交,所以就变成了一个死循环
当我们需要提交一些数据,且想获取一些返回信息,且不想刷新页面时,就可以利用我们的Ajax的方式提交了
该方式必须引入jQuery的表单插件,下面的是该表单插件的在线方式
<script src=“https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js”></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form表单提交</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
$('form').ajaxSubmit({
</head>
<body>
<!-- 只是提供简单的例子,所以未添加任何的css样式 -->
<form action="../../Controller/method" method="post">
<input type="text" name="name" value="form表单提交"/>
<input type="button" value="提交" onclick="submitTest()"/>
<button type="button" onclick="submitTest()">提交</button>
</form>
</body>
<script type="text/javascript">
function submitTest(){
$('form').ajaxSubmit({
url: $("from").attr("action"),
type: $("from").attr("method"),
dataType: 'json',
beforeSubmit: function () {},
success: function (result) {
/**
* 成功的回调函数
*/
},
error:function(){
/**
* 失败的回调函数
*/
},
clearForm: false,//禁止清楚表单
resetForm: false //禁止重置表单
});
}
</script>
</html>
这种方式是jQuery的插件Ajax提交,需要注意的是,input 和button的type都必须是button,然后给他们绑定一个事件函数,在函数里写上Ajax的提交,如果不是button而是submit的话,点击一次的按钮将会执行两次的提交,一次是form的自身提交,一次是Ajax的提交,所以type必须为button
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form表单提交</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.form/4.2.1/jquery.form.min.js"></script>
</head>
<body>
<!-- 只是提供简单的例子,所以未添加任何的css样式 -->
<form action="../../Controller/method" method="post">
<input type="text" name="name" value="form表单提交"/>
<input type="submit" value="提交" onclick="submitTest()"/>
<button type="submit" onclick="submitTest()">提交</button>
</form>
</body>
<script type="text/javascript">
function submitTest(){
$('form').ajaxForm({
url: $("from").attr("action"),
type: $("from").attr("method"),
dataType: 'json',
beforeSubmit: function () {},
success: function (result) {
/**
* 成功的回调函数
*/
},
error:function(){
/**
* 失败的回调函数
*/
},
clearForm: false,//禁止清楚表单
resetForm: false //禁止重置表单
});
}
</script>
</html>
这个和上面的代码几乎是一样的,区别就是 上面的是 $(‘form’).ajaxSubmit,而这个是 $(‘form’).ajaxForm,且上面的input 和button的type类型都是button的,而这个的input 和button的type类型都是submit,因为$(‘form’).ajaxForm不会自动提交,所以需要我们的form表单自己来提交,所以input 和button的type类型都必须是submit,否则点击将没有任何的反应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form表单提交</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
</head>
<body>
<!-- 只是提供简单的例子,所以未添加任何的css样式 -->
<form action="../../Controller/method" method="post">
<input type="text" name="name" value="form表单提交"/>
<input type="button" value="提交" onclick="submitTest()"/>
<button type="button" onclick="submitTest()">提交</button>
</form>
</body>
<script type="text/javascript">
function submitTest() {
$.ajax({
url: $("form").attr("action"),
type: $("form").attr("method"),
dataType: 'json',
data: $("form").serialize(),
success: function (result) {
/**
* 执行成功时,调用的回调函数
* 其中返回值result的类型由上面的dataType决定,像这就是一个json类型
*/
},
error:function () {
/**
* 如果是异常,说明压根没有加入后台,在前台就炸了
* 提交异常时,执行error回调函数
*/
}
});
}
</script>
</html>
这是一个较简单的Ajax方法,我们给按钮绑定一个事件函数,在函数里编写我们的ajax代码,但是需要注意的是,我们的 <input>和<button> 的type 必须为button,否则点击一次提交,我们的form表单将提交两次,一次是form自身的submit提交,一次是我们的Ajax提交,所以type不能为submit,只能是button
这中方法,一定要在ajax里里面的 data:项里面添加我们需要向后台传输的数据,因为这种方式并没有和我们的form表单绑定,也就是说,如果没有写data,就相当于我们没有提交任何数据到达后台
文章浏览阅读1.6k次。里面那个关于NVIDIA的程序文件不见了。存在的话,也可以看看里面还剩下什么,可以搜索看看。除了这2个(NVIDIA图形处理程序,NVIDIA physX系统软件)把其它的也删掉。可以用杀毒软件垃圾扫描下,清理下电脑,主要是清理注册表。这样就可以安装你需要的CUDA版本。控制面板–程序–卸载。电脑—开始—所有程序。_cuda之前的版本怎么删除
文章浏览阅读884次,点赞30次,收藏12次。在C++11中,使用条件变量(condition_variable)可以实现多个线程间的同步操作;当条件不满足时,相关线程被一直阻塞,直到某种条件出现,这些线程才会被唤醒。条件变量用于阻塞一个或多个线程,直到某个线程修改线程间的共享变量,并通过condition_variable通知其余阻塞线程。从而使得已阻塞的线程可以继续处理后续的操作。条件变量是利用线程间共享的全局变量进行同步的一种机制,主要包括两个动作:1、一个线程因等待"条件变量的条件成立"而挂起;_c++ 条件变量实现阻塞等待
文章浏览阅读2.3w次,点赞12次,收藏71次。我们在做嵌入式产品的开发过程中,有时需要输出指定数目的脉冲。实现它的方法较多,这里介绍一种利用STM32定时器的单脉冲模式来实现的方法。STM32定时器的单脉冲输出功能,其实是定时器输出比较功能的一个特殊应用。即让定时器在某个事件触发后的一段时间产生指定脉宽的单脉冲信号。计数器的启动通常可由从模式控制器控制,可由比较输出模式或PWM输出模式来产生波形。通过置位OPM@TIMx_CR1来在下一个更新..._基于stm32的流量计每1l流量输出1个当量脉冲电路
文章浏览阅读119次。I am evaluating libraries for playing audio/video in Java. It does not need to be 100% Java; Java bindings to native libraries are perfectly OK. An external application that can be controlled from Jav..._win java 有没播放rtsp 更好的库
文章浏览阅读62次。Double dValue = 95.12345; int iValue = 10000; string strValue = "95.12345"; string result = ""; result = Convert.ToDouble(dValue).ToS..._c#中数据保留小数点后一位
文章浏览阅读1.8w次,点赞32次,收藏225次。2020计算机保研预推免|重大、北邮、浙大软院、大连理工、华东师范、同济预推免(按时间顺序)重庆大学北邮大连理工软件华东师范大学同济计算机其它所有大学申请通用:报名材料准备(Almost every school needs ):个人陈述/简历CV,获奖证明,中文成绩单,四六级成绩单面试准备(Almost every school asks):自我介绍(中英文/PPT自我陈述),英文问答,项目(竞赛/科研)的基本情况,专业知识、读研选择的研究方向相关问题保持手机通畅!!!时刻关注邮件_大连理工软件学院预推免
文章浏览阅读821次。Tendermint共识算法安全前言Tendermint是一种结合了PBFT和POS的共识算法。它具有奖惩制度,可以惩罚那些想要作恶的节点。即使引入了合适的奖惩机制,但是还是有安全漏洞可以钻,本篇收集Tendermint相关安全材料分析Tendermint共识算法存在的安全问题。Censorship Attack中文翻译成审查攻击,有点词不达意。censorship中的censor是马赛克..._共识算法安全威胁
文章浏览阅读172次。在过去的几百年里,交通运输行业经历了多次变革和革命,现在正处于交通运输领域人工智能取得重大突破的阶段。无论是通过自动驾驶汽车提高可靠性、路况监控提高安全性,还是通过交通流分析提高效率,人工智能都吸引了世界各地交通运输企业的目光。事实上,交通运输领域的许多人已经认识到AI的巨大潜力,预计到 2026 年全球市场将达到 38.7 亿美元。此类支出可以帮助公司利用计算机视觉和机器学习等先进技术来塑造交通运输的未来,从而提高乘客安全、减少道路事故并减少交通拥堵。_公路行业ai应用
数据处理流程包括数据采集、数据清洗和数据转换。数据采集将来自不同来源的数据存储在一个地方,数据清洗去除无效数据,数据转换使数据适合分析。
文章浏览阅读856次,点赞23次,收藏19次。为了确保中科数安的技术资产和知识产权得到妥善保护,防止开发人员拷贝源代码和源代码泄漏是至关重要的。以下是一系列综合方案,旨在加强源代码的安全性和机密性。
文章浏览阅读3.7k次。参考表结构CREATE TABLE `t_baby` (`baby_id` int(11) NOT NULL AUTO_INCREMENT,`user_id` int(11) NOT NULL,`nickname` varchar(64) DEFAULT NULL,`avatar` varchar(64) DEFAULT ‘‘,`sex` int(2) unsigned NOT NULL DEFA..._mysql on update
文章浏览阅读5.4k次。问题:1000瓶水,其中有一瓶是有毒的,一只老鼠喝下毒水会一天之后死亡,现在共有10只老鼠,怎么判断哪一瓶水是毒水?分析:2^10=1024,则可以考虑利用二进制求解解:给1000瓶水依次标号1至1000,将10只老鼠从右向左排成一列,第一瓶水让右边第1只老鼠喝,第2瓶水让第2只老鼠喝,第3瓶水让第1,2只老鼠喝,则第4瓶水让第3只老鼠喝,......第1000瓶水依次让第4,6,7,8,9,10_1000杯水里找一个毒水