JavaScript:将数据发送到Web服务器

本文详细介绍了如何使用JavaScript的fetch API向服务器发送数据,包括表单数据、JSON格式数据以及自定义键值对。通过FormData对象和JSON.stringify()方法,可以实现异步POST请求,从而与服务器进行数据交互。
摘要由CSDN通过智能技术生成

发送数据:基础

        向服务器发送数据通常是通过 HTTP 的 post 方法完成的。在这种情况下,请求正文包含要发发送的数据。数据格式取决于服务器的期望。它可以是:

  • 键值对,例如直接提交表单时。
  • Json 格式:可以用于更多结构化数据。

将表单数据发送到服务器

         如果 Web 服务器需要直接的表单数据,您可以使用 JavaScript 的 FormData 对象来封装要发送的信息。下面是一个示例的表单,用于选择最强壮的动物以及处理表单提交的JS代码。

<html>
 <head>
 </head>
 <body>
	<h2>Which one is the strongest?</h2>
	<form>
    <p>
        <input type="radio" name="strongest" id="elephant" value="ELE" checked>
        <label for="elephant">The elephant</label>
        <br>
        <input type="radio" name="strongest" id="rhinoceros" value="RHI">
        <label for="rhinoceros">The rhinoceros</label>
        <br>
        <input type="radio" name="strongest" id="hippopotamus" value="HIP">
        <label for="hippopotamus">The hippopotamus</label>
        <br>
    </p>
    <p>
        <label for="name">Your name</label>:
        <input type="text" name="name" id="name" required>
    </p>
    <input type="submit" value="Vote">
	</form>
	<p id="result"></p>
  
  </body>
</html>
// Handle form submission
document.querySelector("form").addEventListener("submit", e => {
  // Cancel default behavior of sending a synchronous POST request
  e.preventDefault();
  // Create a FormData object, passing the form as a parameter
  const formData = new FormData(e.target);
  // Send form data to the server with an asynchronous POST request
  fetch("https://thejsway-server.herokuapp.com/animals", {
    method: "POST",
    body: formData
  })
    .then(response => response.text())
    .then(result => {
      document.getElementById("result").textContent = result;
    })
    .catch(err => {
      console.error(err.message);
    });
});

页面显示:

         事件监听器首先禁用默认的表单提交行为,即向 POST 服务器发送同步 HTTP 请求。相反,FormData 对象是用表单本身(e.target表达式)作为参数来创建的。所有表单字段都会自动添加为该对象中的键值对。

        一旦表单字段封装在 FormData 对象中,就会使用前面看到的 fetch() 方法向https://thejswayserver发送异步请求。fetch() 调用的第二个参数将HTTP方法设置为 POST 并将表单数据添加到请求的正文中。

        最后,当服务器响应异步请求时,页面的 result 元素会更新。

        该FormData 对象也可以独立于任何形式使用,将自定义键值对发送到服务器。这是一个非常基本的表单示例,仅包含一个按钮。

        当用户点击按钮时,自定义数据被添加到 FromData 对象中,并通过异步 POST请求发送到服务器。

<html>
 <head>
 </head>
 <body>
	<button id="buyButton">Buy a new t-shirt</button>
	<p id="result"></p>
 </body>
</html>
document.getElementById("buyButton").addEventListener("click", () => {
    // Create a new, empty FormData object
    const formData = new FormData();
    // Fill the object with key/value pairs
    formData.append("size", "L");
    formData.append("color", "blue");
    // Send data to the server
    fetch("https://thejsway-server.herokuapp.com/tshirt", {
      method: "POST",
      body: formData
    })
    .then(response => response.text())
    .then(result => {
      document.getElementById("result").textContent = result;
    })
    .catch(err => {
      console.error(err.message);
    });
});

将Json数据发送到服务器

        

// Create an array containing two objects
const cars = [
  {
    model: "Peugeot",
    color: "blue",
    registration: 2012,
    checkups: [2015, 2017]
  },
  {
    model: "Citroën",
    color: "white",
    registration: 1999,
    checkups: [2003, 2005, 2007, 2009, 2011, 2013]
  }
];

// Send this array as JSON data to the server
fetch("https://thejsway-server.herokuapp.com/api/cars", {
  method: "POST",
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json"
  },
  body: JSON.stringify(cars)
})
  .then(response => response.text())
  .then(result => {
    console.log(result);
  })
  .catch(err => {
    console.error(err.message);
  });

输出结果:

         fetch() 调用的第二个参数设置为要使用的HTTP方法 POST,更新请求标头以指示数据格式为JSON,并将JavaScript 数据的 JSON表示添加到请求体中。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值