JS中type=”button”和type=”submit”的区别

首先我们需要了解这两个type属性的含义以及它们在JavaScript中的作用。

type="button"：该按钮不会提交表单，它只是一个普通的按钮，可以在点击按钮时执行JavaScript代码。

type="submit"：该按钮会提交表单并刷新页面，用于将表单数据传递给服务器。

因此，这两个type属性的最大区别是是否会将表单数据提交至服务器。

我们来看下面两个简单的示例：

1. Type="button"

HTML代码：

<button type="button" onclick="alert('Hello World!')">点击我</button>

在这个例子中，type="button"表示这是一个普通的按钮，不会提交表单。当我们点击该按钮时，会弹出一个包含“Hello World!”的警告框。

1. Type="submit"

HTML代码：

<form action="/process-form" method="post">
  <input type="text" name="username" placeholder="请输入用户名">
  <button type="submit">提交</button>
</form>

在这个例子中，type="submit"表示当我们点击按钮时会提交表单至服务器。表单数据会被传递至服务器的"/process-form"路径，其中包括名为"username"的文本框输入的内容。注意，这里的按钮必须包含在一个

标签中。

希望这两个示例可以帮助你更好地理解type="button"和type="submit"的区别。