自己一些心得体会:
1:form 表单提交后进行后台处理程序,没有直接返回值,只能进行后台处理,Form标签里的所有数据全部提交到后台
ajax 表单提交,是可以局部提交,具有ajax的所有属性。。。
引用:
上述两种提交方式的区别和适用场景说明
情况一:提交并刷新当前页面,或者提交后跳转到其他页面。
情况二:提交数据并展示后台返回的处理信息。
情况一比较适合采用FORM提交的方式处理,简单方便,还可以使用HTML5新添加的一些基本验证。情况二比较适合采用Ajax提交的方式处理,在success函数中对返回的信息做一些需要的操作处理,不过需要通过js对用户输入做取出操作,通过参数传递给后台处理。
根据不同的情况选择不同的处理方式,一般FORM提交处理的方式比较多的使用,Ajax更多的使用在动态加载更多元素。
FORM和Ajax使用的最大区别是:FORM需要刷新页面,而Ajax可以在不刷新页面的情况下执行数据请求或者提交数据等操作,如果需要在Ajax提交成功后刷新页面,可以调用window对象的location属性的load()方法重新加载当前文档。
---------------------
这两种方法主要的区别是ajaxForm不能主动提交form,函数只是为提交表单做准备需要以submit来触发提交。
而ajaxSubmit会主动提交表单,同时可以在点击其他按钮时也可以触发提交,不一定是submit按钮。
>
2:表单提交 代码
form表单提交方式:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>form表单提交方式</title>
</head>
<body>
<form action="demo_form.asp" method="post">
<input type="text" name="firstname" value="Mickey">
<input type="submit" value="提交">
</form>
</body>
</html>
//================== JS方法================================
<script>
①
<form action="demo_form.asp" method="post">
使用submit按钮提交表单 <input type="submit"/>
$("form").submit(function () {
var first = $("input[name='firstname']").val();
if (first == "" || first == null || first == undefined) {
alert("first");
return false;/*阻止表单提交*/
} else if (last == "" || last == null || last == undefined) {
alert("last");
return false;/*阻止表单提交*/
} else {
alert("提交");
return true;
}
})
提交表单数据会被发送到名为demo_form.asp的页面。submit提交表单,表单直接被提交了,可以进行验证
②
使用 onsubmit="return function()"方法进行提交验证
<form id="Form" action="" method="post" onsubmit="return checkForm();">
function checkForm () {
var first = $("input[name='firstname']").val();
if (first == "" || first == null || first == undefined) {
alert("first不能为空");
return false;/*阻止表单提交*/
} else if (last == "" || last == null || last == undefined) {
alert("last不能为空");
return false;
} else {
alert("提交")
return true;
}
}
③*
<form id="Form" action="" method="post" >使用button按钮提交表单
<input id="tj" type="button" value="提交" onclick="checkForm();">
function checkForm () {
var first = $("input[name='firstname']").val();
var last = $("input[name='lastname']").val();
if (first == "" || first == null || first == undefined) {
alert("first");
return false;/*阻止表单提交*/
} else if (last == "" || last == null || last == undefined) {
alert("last");
return false;
} else {
alert("提交")
$("#Form").submit();
}
}
注释:
onsubmit直接写false表单还是会被提交。
表单的onsubmit事件句柄(比如:onsubmit="return false")不会执行。 不能保证由其一定会被HTML用户代理调用。
如果一个表单空间(比如一个submit类型的按钮)的name 或者id值为"submit",则它将覆盖表单的submit方法。
④
<form id="Form" action="" method="post" onsubmit="return checkForm();">
<button type="button" onclick="subForm();">js提交</button>
利用js进行表单提交,form表单标记,将form表单中的某个元素设置点击事件,点击时调用js函数,再用js:如 $("#id").submit();等方法提交表单。
function checkForm () {
var first = $("input[name='firstname']").val();
var last = $("input[name='lastname']").val();
if (first == "" || first == null || first == undefined) {
alert("first不能为空");
return false;/*阻止表单提交*/
} else if (last == "" || last == null || last == undefined) {
alert("last不能为空");
return false;
} else {
alert("提交")
return true;
}
}
function subForm(){
$("#Form").submit();
}
⑤
<input type="image" src=""> 图片提交表单,将input的属性设置为image时,点击图片也可触发form表单的提交
<form id="Form" action="" method="post" onsubmit="return checkForm();">
<input type="image" src="btn.png" style="width: 50px;height: 50px">
function checkForm() {
var first = $("input[name='firstname']").val();
var last = $("input[name='lastname']").val();
if (first == "" || first == null || first == undefined) {
alert("first不能为空");
return false;
/*阻止表单提交*/
} else if (last == "" || last == null || last == undefined) {
alert("last不能为空");
return false;
} else {
alert("提交")
return true;
}
}
</script>
</body>
</html>