我想使用https://jsonplaceholder.typicode.com/伪造服务器来伪造向服务器中插入新数据。我正在尝试使用本教程https://jsonplaceholder.typicode.com/guide.html#Create_a_resource发送数据。但是我如何知道是否插入了数据?我是否通过在单击时调用New()函数的形式具有提交按钮来正确地插入?表单本身会转到(add.html)中显示表单的同一页面。
predict(b3)
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))
}
谢谢!
更新: 谢谢大家的帮助,我在下面添加了一个固定且有效的代码。输入和标签stil需要包装成表格,但是e.PreventDefault()必须在New(e)函数中使用。
<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>
答案 0 :(得分:1)
首先,您需要阻止提交表单,否则将刷新页面。您可以尝试以下方法:
表格
...
<button id = "add_btn2" onclick = "New(event)" type = "submit">Submit</button>
...
功能
function New(e) {
e.preventDefault()
...
如此处JSONPlaceholder Guide所述,将不会真正创建资源。成功的请求将根据您发送的表单数据返回一个json
对象。只需检查您的浏览器日志,检查响应是否与文档中所说的一样。
答案 1 :(得分:1)
问题是form
。
这是工作代码:
<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>
检查控制台以查看响应