Я хочу подделать новую вставку данных на сервер, используя 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>
Спасибо!
ОБНОВЛЕНИЕ: Спасибо всем за помощь, я добавляю исправленный и рабочий код ниже. Ввод и метки все еще должны быть заключены в форму, но e.PreventDefault () должен использоваться в функции New (e).
<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>