BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] JsonPlaceholderの偽サーバにデータをPOSTする方法は？

2022-02-28 14:32:32

質問

を使って、サーバーに新しいデータを挿入するように見せかけたい。 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>&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>

ありがとうございました。

アップデートを行いました。 ありがとうございます。入力とラベルはフォームにラップする必要がありますが、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>&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>

解決方法は？

問題は 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>

を確認します。 コンソール レスポンスを見るには

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します