JS，form表单提交的方法

JavaScript（JS）作为一种客户端脚本语言，被广泛应用于web开发。在web开发中，表单是一种常见的数据收集和提交方式。本文将会介绍JS form表单提交的方法，包括基本用法，各种提交方式的区别和示例。

一、基本用法

通常来说，我们可以使用HTML的

```

这是一个简单的表单，包含了两个输入项和一个提交按钮，以及其它一些标记属性。当我们提交表单时，浏览器会向服务器发送一个HTTP请求，并在发送请求前对表单数据进行编码。

在JS中提交表单，我们可以使用form元素的submit()方法或者直接修改form元素的属性来执行提交操作。

1.使用submit()方法

通过JavaScript代码获取form元素的引用，然后调用submit()方法，即可提交表单：

```javascript

var form = document.getElementById("myForm");

form.submit();

```

上述代码中，我们首先获取了表单元素myForm的引用，然后调用了该元素的submit()方法。调用该方法后，浏览器将自动提交表单数据。

除此之外，submit()方法还可以接收一个参数，用于指定提交表单数据的方式。例如：

```javascript

form.submit("POST");

```

上述代码指定使用POST方式提交表单数据。

2.修改form元素属性

直接修改form元素的action和method属性，然后调用submit()方法，即可提交表单。如下所示：

```javascript

var form = document.getElementById("myForm");

form.action = "/submit";

form.method = "POST";

form.submit();

```

上述代码中，我们使用JavaScript代码修改了表单元素myForm的action和method属性，然后再调用了submit()方法。

二、各种提交方式的区别

提交表单数据的方式一般有四种：GET、POST、PUT、DELETE。虽然这些方式都可以用于提交表单数据，但其实它们在数据传输和数据处理方面有不同的特点。

1.GET

GET方式是HTTP协议中最常见的一种请求方式，它通常用于从服务器上获取数据。使用GET方式提交表单时，表单数据将追加在URL的查询字符串中，并且可以通过浏览器的地址栏来查看和修改数据。由于URL有长度限制，因此GET方式不能用于提交大量数据。

使用GET方式提交表单时，可以通过以下方式来提交表单数据：

```javascript

var form = document.getElementById("myForm");

form.action = "/submit";

form.method = "GET";

form.submit();

```

2.POST

POST方式是HTTP协议中最常见的一种请求方式，它通常用于向服务器提交数据。与GET方式不同，POST方式将表单数据存放在HTTP请求体中，并且不会将表单数据追加在URL的查询字符串中。

使用POST方式提交表单时，可以通过以下方式来提交表单数据：

```javascript

var form = document.getElementById("myForm");

form.action = "/submit";

form.method = "POST";

form.submit();

```

3.PUT

PUT方式是HTTP协议中一种比较少用的请求方式，它通常用于更新或者创建资源。与POST方式类似，PUT方式也是将表单数据存放在HTTP请求体中。

使用PUT方式提交表单时，可以通过以下方式来提交表单数据：

```javascript

var form = document.getElementById("myForm");

form.action = "/submit";

form.method = "PUT";

form.submit();

```

4.DELETE

DELETE方式是HTTP协议中一种比较少用的请求方式，它通常用于删除资源。与POST方式类似，DELETE方式也是将表单数据存放在HTTP请求体中。

使用DELETE方式提交表单时，可以通过以下方式来提交表单数据：

```javascript

var form = document.getElementById("myForm");

form.action = "/submit";

form.method = "DELETE";

form.submit();

```

三、示例

下面我们以POST方式提交表单数据为例，给出一个完整的示例代码。首先是HTML代码：

```html

```

然后是JavaScript代码：

```javascript

var form = document.getElementById("myForm");

var result = document.getElementById("result");

var submitBtn = document.getElementById("submit-btn");

submitBtn.addEventListener("click", function() {

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {

if (xhr.readyState === 4) {

if (xhr.status === 200) {

result.innerText = "Success";

} else {

result.innerText = "Error";

}

}

};

xhr.open("POST", "/submit");

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

xhr.send("name=" + encodeURIComponent(form.name.value) + "&email=" + encodeURIComponent(form.email.value));

});

```

上述代码中，我们首先获取了表单元素myForm的引用、提交按钮submit-btn的引用和用于显示结果的div元素result的引用。然后为submit-btn元素添加了一个点击事件的处理函数，用于提交表单数据。

在提交表单数据时，我们通过XMLHttpRequest对象发送了一个POST请求，并在请求头部指定了Content-Type为application/x-www-form-urlencoded，表示提交的数据将是URL编码格式的键值对。然后在请求体中追加了需要提交的表单数据。

最后，在XMLHttpRequest对象的onreadystatechange事件处理函数中，我们检查了HTTP响应状态和HTTP响应码，并根据结果更新了显示结果的div元素。

总结

本文介绍了JS form表单提交的方法，包括基本用法、各种提交方式的区别和示例。提交表单是Web开发中非常常见的操作，掌握这些提交表单的方法对于提高Web开发效率具有重要的意义。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/