代码之家 › 专栏 › 技术社区 › vytaute

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

rest json html php javascript

vytaute · 技术社区 · 5 年前

我想用 https://jsonplaceholder.typicode.com/ 假服务器。我试图用这个教程发送数据 https://jsonplaceholder.typicode.com/guide.html#Create_a_resource

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>&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>

<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>&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(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>

0 回复 | 直到 5 年前

saintlyzero 5 年前

问题是 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>

检查来看看反应

arisalsaila 5 年前

首先,您需要阻止表单提交,否则将刷新页面。你可以试试这个:

在形式上

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

在功能上

function New(e) { e.preventDefault() ...
如这里所述 JSONPlaceholder Guide json 对象基于您发送的表单数据。只要检查一下你的浏览器日志,看看回复是否和文档上说的一样。