24.form表单提交的六种方式

form表单是Web前端中常见的一种交互方式，它是用户向服务器提交数据的主要方式，而服务器也会通过这种方式向客户端发送数据。一个典型的Web应用程序可能会有多种方式来处理表单数据，下面我们将详细介绍六种form表单提交方式，包含使用方法和案例说明。

1. GET方法

GET方法是最常用的表单提交方法之一。当使用GET方法提交表单时，表单数据将作为URL的查询字符串附加到URL后面，然后发送到服务器端。它最常用于非敏感数据的查询、排序、过滤、分页等操作。

使用GET方法提交表单的方式很简单，只需要在form标签中设置method属性值为“get”，并设置表单的action属性为后台处理程序的地址即可。下面是一个简单的例子：

```

```

当用户在输入框中输入关键词，并点击搜索按钮时，浏览器会使用GET方法提交表单并请求指定的URL地址。服务器可以使用类似以下代码处理请求：

```

if request.method == 'GET':

keywords = request.GET.get('keywords', '')

# 过滤、排序等操作

return render(request, 'search_result.html', {'keywords': keywords, 'results': results})

```

2. POST方法

POST方法和GET方法类似，但是，它不会将表单数据附加到URL后面，而是将其放在HTTP请求的正文部分中，可以发送更多或更大的数据。POST方法最常用于敏感数据的提交，例如注册、登录、付款等操作。

使用POST方法提交表单同样简单，只需要在form标签中设置method属性值为“post”，并设置表单的action属性为后台处理程序的地址即可。下面是一个简单的例子：

```

```

当用户在输入框中输入用户名和密码，并点击登录按钮时，浏览器会使用POST方法提交表单并请求指定的URL地址。服务器可以使用类似以下代码处理请求：

```

if request.method == 'POST':

username = request.POST.get('username', '')

password = request.POST.get('password', '')

# 验证用户名和密码是否正确

if authenticated(username, password):

return redirect('/home')

else:

return redirect('/login?error=1')

```

其中，authenticated()函数表示用户身份认证的逻辑，可以根据实际情况进行编写。

3. PUT方法

PUT方法请用于向服务器提交更新数据的请求，它可以更新一个已存在的数据资源。例如，我们可以使用PUT方法来更新一个用户的个人信息或替换一篇文章的内容。

使用PUT方法提交表单时需要借助一些JavaScript代码实现，因为HTML中并没有提供原生的PUT方法。具体的实现方式包括两个步骤：

（1）在form标签中设置method属性值为“post”，并设置表单的action属性为后台处理程序的地址，并添加一个隐藏的input标签，其中包含一个名为“_method”的参数，其值为“PUT”。

（2）使用JavaScript代码监听表单的提交事件，在提交表单前通过Ajax方式发送PUT请求。下面是一个例子：

HTML代码：

```

```

JavaScript代码：

```

document.getElementById('user-form').addEventListener('submit', function(e) {

e.preventDefault();

var form = e.target;

var xhr = new XMLHttpRequest();

xhr.open('PUT', form.action, true);

xhr.setRequestHeader('Content-Type', 'application/json');

xhr.onreadystatechange = function() {

if (xhr.readyState === XMLHttpRequest.DONE) {

if (xhr.status === 200 || xhr.status === 204) {

// 处理成功的响应

} else {

// 处理失败的响应

}

}

};

xhr.send(JSON.stringify({

name: form.elements.name.value,

email: form.elements.email.value

}));

});

```

4. DELETE方法

DELETE方法请用于向服务器提交删除数据的请求，它可以删除一个已存在的数据资源。例如，我们可以使用DELETE方法来删除一个用户的个人信息或删除一篇文章。

使用DELETE方法提交表单时同样需要借助JavaScript代码实现，具体的实现方式和PUT方法类似，只需要将隐藏的input标签中的“_method”参数的值设置为“DELETE”。

HTML代码：

```

```

JavaScript代码：

```

document.getElementById('user-form').addEventListener('submit', function(e) {

e.preventDefault();

var form = e.target;

var xhr = new XMLHttpRequest();

xhr.open('DELETE', form.action, true);

xhr.onreadystatechange = function() {

if (xhr.readyState === XMLHttpRequest.DONE) {

if (xhr.status === 200 || xhr.status === 204) {

// 处理成功的响应

} else {

// 处理失败的响应

}

}

};

xhr.send();

});

```

5. AJAX方法

AJAX方法是一种异步的方式，可以实现在不刷新整个页面的情况下向服务器提交数据和获取响应。它通过JavaScript代码使用XMLHttpRequest对象来向服务器发送请求和接收响应，无需使用form表单。

使用AJAX方法提交数据需要先引入jQuery库，然后使用$.ajax()方法发送请求。下面是一个简单的例子：

HTML代码：

```

```

JavaScript代码：

```

function save() {

$.ajax({

url: '/user',

type: 'post',

data: {

name: $('#name').val(),

email: $('#email').val()

},

success: function(data) {

// 处理响应数据

},

error: function(xhr, status, error) {

// 处理错误消息

}

});

}

```

当用户点击保存按钮时，save()函数将通过AJAX方式发送POST请求，并将name和email参数放在请求体中发送到服务器。服务器可以使用类似上面提到的代码来处理请求。

6. Fetch方法

Fetch方法是JavaScript原生API，它也是一种异步的方式，可以实现向服务器提交数据和获取响应。它使用Promise对象来处理异步操作，代码相对于AJAX更为简洁易懂。

使用Fetch方法提交数据可以通过使用fetch()函数向指定的URL发送请求，然后使用.then()方法处理响应数据。下面是一个例子：

HTML代码：

```

```

JavaScript代码：

```

function save() {

fetch('/user', {

method: 'POST',

headers: {

'Content-Type': 'application/json'

},

body: JSON.stringify({

name: document.getElementById('name').value,

email: document.getElementById('email').value

})

})

.then(function(response) {

if (response.ok) {

return response.json();

} else {

throw new Error('Network response was not ok.');

}

})

.then(function(data) {

// 处理响应数据

})

.catch(function(error) {

// 处理错误消息

});

}

```

当用户点击保存按钮时，save()函数将通过Fetch方式发送POST请求，并将name和email参数放在请求体中发送到服务器。服务器可以使用类似上面提到的代码来处理请求。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/