javascript - JS工兵: posting data to server (the right way ?)

Question

如何使用 Sapper JS lib 正确地将数据发布到服务器？

说:我有一个“board-editor”页面，我可以在其中从用 SVG 编写的六 Angular 形网格中选择/取消选择图 block ，并在存储数组中添加/减去十六进制坐标。

然后用户填写一个表单，其中包括:名称、作者和版本...单击保存按钮将 POST 表单数据和存储中的数组。服务器的工作是将板定义存储在“static/boards/repository/[name].json”文件中。

如今，网上很少有关于正确使用 Sapper/Svelte 处理 POSTing 数据问题的详细信息。

如何进行？谢谢回复!

编辑:

为了避免重新发布整个页面，这意味着丢失应用程序状态，我考虑使用内部带有表单的 IFRAME....但是如何在 IFRAME 中初始化 sapper 的副本以确保我可以使用this.fetch() 方法在里面？

Answer 1

我用 Sapper + Svelte 做网站，真的很棒!在我的联系表单组件中，数据被发送到服务器。这就是没有 iframe 的情况。发送和接收的数据都是JSON格式。

在客户端(组件):

var data = { ...my contact JSON data... }
var url = '/process/contact' // associated script = /src/routes/process/contact.js

fetch(url, {
  method: 'POST',
  body: JSON.stringify(data),
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(r => {
  r.json()
    .then(function(result) {
      // The data is posted: do something with the result...
    })
})
.catch(err => {
  // POST error: do something...
  console.log('POST error', err.message)
})

在服务器端:

script =/src/routes/process/contact.js

export async function post(req, res, next) {
  /* Initializes */
  res.setHeader('Content-Type', 'application/json')
  /* Retrieves the data */
  var data = req.body
  // Do something with the data...
  /* Returns the result */
  return res.end(JSON.stringify({ success: true }))
}

希望对您有所帮助!