我想使用 https://jsonplaceholder.typicode.com/ 将新数据伪造到服务器中假服务器。我正在尝试使用本教程发送数据 https://jsonplaceholder.typicode.com/guide.html#Create_a_resource .但是我怎么知道是否插入了数据呢？我是否通过在单击时调用 New() 函数的表单中设置提交按钮来正确插入？表单本身会转到它在 (add.html) 中显示的同一页面。
function New()
{
var userid = document.getElementById("new_userId").value;
var new_title = document.getElementById("new_title").value;
var userid = document.getElementById("new_body").value;
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
body: JSON.stringify({
title: new_title,
body: new_body,
userId: userid
}),
headers: {
"Content-type": "application/json; charset=UTF-8"
}
})
.then(response => response.json())
.then(json => console.log(json))
}<html>
<head>
<link rel="stylesheet" type="text/css" href ="style.css">
<meta http-equiv="Content-Type" charset="UTF-8" >
</head>
<body>
<h1>Please type in new item data:</h1><br>
<form id = "add_form" method = "POST" action = "add.html">
<label class = "add_label"><b> userId: </b></label>
<input type = "number" class = "add_input" id="new_userId" name="new_userId" value = "">
<br>
<label class = "add_label"><b> title: </b></label>
<input type = "text" class = "add_input" id="new_title" name="new_title" value = "">
<br>
<label class = "add_label"><b> body: </b></label>
<input type = "text" class = "add_input" id="new_body" name="new_body" value = "">
<button id = "add_btn2" onclick = "New()" type = "submit">Submit</button>
</form>
</body>
</html>谢谢!
更新: 谢谢大家的帮助，我在下面添加了一个固定且有效的代码。输入和标签仍然需要包装到表单中，但必须在 New(e) 函数中使用 e.PreventDefault()。
<html>
<head>
<meta http-equiv="Content-Type" charset="UTF-8">
</head>
<body>
<form>
<h1>Please type in new item data:</h1><br>
<label class="add_label"><b> userId: </b></label>
<input type="number" class="add_input" id="new_userId" name="new_userId" value="">
<br>
<label class="add_label"><b> title: </b></label>
<input type="text" class="add_input" id="new_title" name="new_title" value="">
<br>
<label class="add_label"><b> body: </b></label>
<input type="text" class="add_input" id="new_body" name="new_body" value="">
<button id="add_btn2" onclick = "New(event)">Submit</button>
</form>
<script>
function New(e) {
e.preventDefault()
var userid = document.getElementById("new_userId").value;
var new_title = document.getElementById("new_title").value;
var new_body = document.getElementById("new_body").value;
console.log("Input Data: " + userid + " " + new_title + " " + new_body);
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
body: JSON.stringify({
title: new_title,
body: new_body,
userId: userid
}),
headers: {
"Content-type": "application/json; charset=UTF-8"
}
})
.then(response => response.json())
.then(json => {
console.log('response: ' + JSON.stringify(json));
})
}
</script>
</body>
</html>最佳答案
问题是表单。
这是工作代码:
<html>
<head>
<meta http-equiv="Content-Type" charset="UTF-8">
</head>
<body>
<h1>Please type in new item data:</h1><br>
<label class="add_label"><b> userId: </b></label>
<input type="number" class="add_input" id="new_userId" name="new_userId" value="">
<br>
<label class="add_label"><b> title: </b></label>
<input type="text" class="add_input" id="new_title" name="new_title" value="">
<br>
<label class="add_label"><b> body: </b></label>
<input type="text" class="add_input" id="new_body" name="new_body" value="">
<button id="add_btn2" onclick="New()">Submit</button>
<script>
function New() {
var userid = document.getElementById("new_userId").value;
var new_title = document.getElementById("new_title").value;
var new_body = document.getElementById("new_body").value;
console.log("Input Data: " + userid + " " + new_title + " " + new_body);
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
body: JSON.stringify({
title: new_title,
body: new_body,
userId: userid
}),
headers: {
"Content-type": "application/json; charset=UTF-8"
}
})
.then(response => response.json())
.then(json => {
console.log('response: ' + JSON.stringify(json));
})
}
</script>
</body>
</html>检查控制台以查看响应
关于javascript - 如何将数据发布到 JsonPlaceholder 假服务器？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58535351/