关于ajax请求和普通form请求冲突所引出的表单提交问题

最新推荐文章于 2022-04-17 23:38:10 发布

myllxy

最新推荐文章于 2022-04-17 23:38:10 发布

阅读量927

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_39327985/article/details/103652557

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一.<input type=‘button‘ value=“提交“>和<button type=‘button‘ value=“提交“>

他们不能用于提交表单，通常都用于修饰按钮的样式来使用

注意后者是h5的标签，提供了更为强大的功能和更丰富的内容。<button>与</button>标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像，

并且

1.InternetExplorer的默认类型是"button"，而其他浏览器中（包括W3C规范）的默认值是"submit"。

2.InternetExplorer将提交<button>与<button/>之间的文本，而其他浏览器将提交value属性的内容。请在HTML表单中使用input元素来创建按钮。

二.<button type=‘submit’ value=‘提交’>和<input type=‘submit’ value=‘提交’>这两个按钮可以提交表单.

但是注意这个提交表单的行为可以在自定义的某些规范不成立之后被阻止，比如：

/*
意思就是如果你的表单元素不符合某个要求(必须为空)，就给form的onsubmit属性赋值为false，
便可以阻止表单提交操作
*/ 
你的表单id对应的dom对象.onsubmit=function abc()
	{
		if (你的表单中的元素id对应的dom对象.value=="") {
		        alert("请输入用户名");
				return false;
			}else{
				return true;
			}
	}

比如这个例子，form表单提交后就会刷新页面：

我们阻止它提交：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="div1">
			<p id="p1">啊</p>
		</div>
		<form id="form1">
			<input id="input1"></input>
			<button onclick="testButton()">测试</button>
		</form>
	</body>
</html>
<script>
	function testButton() {
		var div1 = document.getElementById("div1");
		var p2 = document.createElement('p');
		p2.innerText = "a";
		div1.appendChild(p2);
		var form1 = document.getElementById("form1");
		document.getElementById("form1").onsubmit = function abc() {
			return false;
		}
	}
</script>

也可以这样：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="div1">
			<p id="p1">啊</p>
		</div>
		<form id="form1">
			<input id="input1"></input>
			<button type="button" onclick="testButton()">测试</button>
		</form>
	</body>
</html>
<script>
	function testButton() {
		var div1 = document.getElementById("div1");
		var p2 = document.createElement('p');
		p2.innerText = "a";
		div1.appendChild(p2);
	}
</script>

注意阻止浏览器默认行为可不止 return false，还有event.preventDefault()

两者特征与区别：关于js中return false、event.preventDefault()和event.stopPropagation()

三.ajax请求和普通请求

这两个请求不要同时使用要冲突

myllxy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于ajax请求和普通form请求冲突所引出的表单提交问题

一.<input type=‘button‘value=“提交“>和<button type=‘button‘value=“提交“>他们不能用于提交表单，通常都用于修饰按钮的样式来使用注意后者是h5的标签，提供了更为强大的功能和更丰富的内容。<button>与</button>标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容...
复制链接

扫一扫