如何将数据发布到JsonPlaceholder假服务器?

时间:2019-10-24 06:27:29

标签: javascript html json rest

我想使用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>&nbsp;userId:&nbsp; </b></label>
	<input type = "number" class = "add_input" id="new_userId" name="new_userId" value = "">
	<br>
	<label class = "add_label"><b>&nbsp;title:&nbsp;</b></label>
	<input type = "text" class = "add_input" id="new_title" name="new_title" value = "">
	<br>	
	<label class = "add_label"><b>&nbsp;body:&nbsp;</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>

2 个答案:

答案 0 :(得分:1)

  1. 首先,您需要阻止提交表单,否则将刷新页面。您可以尝试以下方法:

    表格

    ... <button id = "add_btn2" onclick = "New(event)" type = "submit">Submit</button> ...

    功能

    function New(e) { e.preventDefault() ...

  2. 如此处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>&nbsp;userId:&nbsp; </b></label>
  <input type="number" class="add_input" id="new_userId" name="new_userId" value="">
  <br>
  <label class="add_label"><b>&nbsp;title:&nbsp;</b></label>
  <input type="text" class="add_input" id="new_title" name="new_title" value="">
  <br>
  <label class="add_label"><b>&nbsp;body:&nbsp;</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>

检查控制台以查看响应