极客教程JavaScript 以POST请求方式提交表单
许多Web开发人员面临的挑战是在没有表单可用或适当的情况下使用JavaScript POST请求模拟表单提交的功能。该问题需要找到一种方法来使用JavaScript复制表单提交的行为，目标是准确地向服务器发送数据并接收响应。
在HTML中提交表单时，用户输入的数据通过POST请求发送到服务器。然后，服务器处理数据并做出相应的响应。
在JavaScript中，可以像表单提交一样发送POST请求到服务器以提交数据。当您需要发送数据到服务器而又不需要用户手动提交表单时，这可能尤其有用。
要在JavaScript中发送POST请求，通常需要指定数据将被发送到的端点，以及需要发送的数据。
解决方案JavaScript代码： 我们将创建一个JavaScript函数，该函数创建一个隐藏的表单，默认设置方法为“post”，将动作设置为给定路径，并根据给定的参数对象填充表单。最后，它将将表单附加到文档主体并提交它。
示例1： 创建一个名为 index.html 的文件，我们将创建一个简单的界面，其中包含一个按钮。在这个示例中，我们将点击按钮，并使用POST请求向服务器发送数据
index.html
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Send Data</title>
<style>
div {
display: flex;
justify-content: center;
margin-top: 5%;
}
button {
padding: 0.6em 1em;
border: 4px solid #fa725a;
transition: ease-in-out 0.3s;
background-color: transparent;
color: #fa725a;
font-weight: bolder;
font-size: 16px;
cursor: pointer;
}
button:hover {
transform: scale(1.2) rotate(10deg);
background-color: #fa725a;
color: white;
}
</style>
</head>
<body>
<div>
<button id="send_data">Send Data !</button>
</div>
<script>
const send_button = document.getElementById
("send_data");
function postData(path, params, method) {
// Create form
const hidden_form = document.createElement('form');
// Set method to post by default
hidden_form.method = method || 'post';
// Set path
hidden_form.action = path;
for (const key in params) {
if (params.hasOwnProperty(key)) {
const hidden_input = document.createElement
('input');
hidden_input.type = 'hidden';
hidden_input.name = key;
hidden_input.value = params[key];
hidden_form.appendChild(hidden_input);
}
}
document.body.appendChild(hidden_form);
hidden_form.submit();
}
send_button.addEventListener('click', () => {
// Call postData function
postData('https://...com/posts',
{ title: 'foo', body: 'bar', userId: 1 });
});
</script>
</body>
</html>
输出：
示例2： 在这个例子中，我们将一个数组作为一个值发送，具体如下所述：
{
title: 'fruits',
names: ['Apple','Banana','Mango'],
basketId: 1
}
index.html
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Send Data</title>
<style>
div {
display: flex;
justify-content: center;
margin-top: 5%;
}
button {
padding: 0.6em 1em;
border: 4px solid #fa725a;
transition: ease-in-out 0.3s;
background-color: transparent;
color: #fa725a;
font-weight: bolder;
font-size: 16px;
cursor: pointer;
}
button:hover {
transform: scale(1.2) rotate(10deg);
background-color: #fa725a;
color: white;
}
</style>
</head>
<body>
<div>
<button id="send_data">Send Data !</button>
</div>
<script>
const send_button = document.getElementById
("send_data");
function post(path, params, method) {
//Create form
const hidden_form = document.createElement('form');
// Set method to post by default
hidden_form.method = method || 'post';
// Set path
hidden_form.action = path;
for (const key in params) {
if (params.hasOwnProperty(key)) {
const hidden_input = document.createElement
('input');
hidden_input.type = 'hidden';
hidden_input.name = key;
hidden_input.value = params[key];
hidden_form.appendChild(hidden_input);
}
}
document.body.appendChild(hidden_form);
hidden_form.submit();
}
send_button.addEventListener('click', () => {
// Call postData function
post('https://...com/posts',
{
title: 'fruits',
names: ['Apple', 'Banana', 'Mango'],
basketId: 1
});
});
</script>
</body>
</html>
输出：
