Javascript 使用 Fetch API 的 POST 请求？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39565706/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
POST Request with Fetch API?
提问by Rob
I know that with the new Fetch API (used here with ES2017's async/await) you can make a GET request like this:
我知道使用新的 Fetch API（此处与 ES2017 的async/ 一起使用await）您可以发出这样的 GET 请求：
async getData() {
try {
let response = await fetch('https://example.com/api');
let responseJson = await response.json();
console.log(responseJson);
} catch(error) {
console.error(error);
}
}
But how do you make a POST request?
但是如何发出 POST 请求呢？
回答by hellojebus
Long story short, Fetch also allows you to pass an object for a more personalized request:
长话短说，Fetch 还允许您传递一个对象来实现更个性化的请求：
fetch("http://example.com/api/endpoint/", {
method: "post",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
//make sure to serialize your JSON body
body: JSON.stringify({
name: myName,
password: myPassword
})
})
.then( (response) => {
//do something awesome that makes the world a better place
});
Check out the fetch documentation for even more goodies and gotchas:
查看 fetch 文档以获取更多好东西和陷阱：
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
Please note that since you're doing an async try/catch pattern, you'll just omit the then()function in my example ;)
请注意，由于您正在执行异步 try/catch 模式，因此您将then()在我的示例中省略该函数；)
回答by manas
if you want to make a simple post request without sending data as JSON.
如果您想在不将数据作为 JSON 发送的情况下进行简单的发布请求。
fetch("/url-to-post",
{
method: "POST",
// whatever data you want to post with a key-value pair
body: "name=manas&age=20",
headers:
{
"Content-Type": "application/x-www-form-urlencoded"
}
}).then((response) =>
{
// do something awesome that makes the world a better place
});
回答by Neil Bauers
Here is a complete example: After spending hours tinkering with incomplete code snippets I finally managed to post some json from javascript, pick it up using php on a server, added a data field and finally updated the original web page. Here is the HTML, the PHP and the JS. My thanks to everyone who posted the original code fragments collected here. Similar code is on-line here: https://www.nbest.co.uk/Fetch/index.php
这是一个完整的示例：在花了几个小时修补不完整的代码片段之后，我终于设法从 javascript 发布了一些 json，在服务器上使用 php 获取它，添加了一个数据字段，最后更新了原始网页。这是 HTML、PHP 和 JS。我感谢所有发布这里收集的原始代码片段的人。网上有类似的代码：https: //www.nbest.co.uk/Fetch/index.php
<!DOCTYPE HTML>
<!-- Save this to index.php and view this page in your browser -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript Fetch Example</title>
</head>
<body>
<h1>Javascript Fetch Example</h1>
<p>Save this to index.php and view this page in your browser.</p>
<button type="button" onclick="myButtonClick()">Press Me</button>
<p id="before">This is the JSON before the fetch.</p>
<p id="after">This is the JSON after the fetch.</p>
<script src="fetch.js"></script>
</body>
</html>
<!-- --------------------------------------------------------- -->
// Save this as fetch.js --------------------------------------------------------------------------
function success(json) {
document.getElementById('after').innerHTML = "AFTER: " + JSON.stringify(json);
console.log("AFTER: " + JSON.stringify(json));
} // ----------------------------------------------------------------------------------------------
function failure(error) {
document.getElementById('after').innerHTML = "ERROR: " + error;
console.log("ERROR: " + error);
} // ----------------------------------------------------------------------------------------------
function myButtonClick() {
var url = 'json.php';
var before = {foo: 'Hello World!'};
document.getElementById('before').innerHTML = "BEFORE: " + JSON.stringify(before);
console.log("BEFORE: " + JSON.stringify(before));
fetch(url, {
method: 'POST',
body: JSON.stringify(before),
headers:{
'Content-Type': 'application/json'
}
}).then(res => res.json())
.then(response => success(response))
.catch(error => failure(error));
} // ----------------------------------------------------------------------------------------------
<?php
// Save this to json.php ---------------------------------------
$contentType = isset($_SERVER["CONTENT_TYPE"]) ? trim($_SERVER["CONTENT_TYPE"]) : '';
if ($contentType === "application/json") {
$content = trim(file_get_contents("php://input"));
$decoded = json_decode($content, true);
$decoded['bar'] = "Hello World AGAIN!"; // Add some data to be returned.
$reply = json_encode($decoded);
}
header("Content-Type: application/json; charset=UTF-8");
echo $reply;
// -------------------------------------------------------------
?>
回答by leonheess
The best way to POST form data to a PHP-script is the Fetch API. Here is an example:
将表单数据 POST 到 PHP 脚本的最佳方式是Fetch API。下面是一个例子：
function postData() {
const form = document.getElementById('form');
let data = new FormData();
data.append('name', form.name.value);
fetch('../php/contact.php', {method: 'POST', body: data}).then(response => {
if (!response.ok){
throw new Error('Network response was not ok.');
}
}).catch((err) => {
console.log(err);
});
}<form id="form" action="javascript:postData()">
<input id="name" name="name" placeholder="Name" type="text" required>
<input type="submit" value="Submit">
</form>Here is a very basic example of a PHP-script that takes the data and sends an email:
这是一个非常基本的 PHP 脚本示例，它接收数据并发送电子邮件：
<?php
header('Content-type: text/html; charset=utf-8');
if (isset($_POST['name'])) {
$name = $_POST['name'];
}
$to = "[email protected]";
$subject = "New name submitted";
$body = "You received the following name: $name";
mail($to, $subject, $body);
回答by Tanner
Here is a solution for a POST request using node-fetch, with async/await.
这是使用 node-fetch 和 async/await 的 POST 请求的解决方案。
async function post(data) {
try {
// Create request to api service
const req = await fetch(`http://127.0.0.1/api`, {
method: 'POST',
headers: { 'Content-Type':'application/json' },
// format the data
body: JSON.stringify({
id: data.id,
foo: data.foo,
bar: data.bar
}),
});
const res = await req.json();
// Log success message
console.log(res);
}catch(err) {
console.error(`ERROR: err`);
}
}
// Call your function
post() // with your parameter ofCourse
