返回

javascript-请求。body server在POST上记录空对象

发布时间:2022-06-12 11:53:56 202
# 前端

我很难实现将onclick数据直接存储到DB的函数。我正在使用jQuery。ajax直接向API发送请求。服务器日志返回一个空的req。正文:

{}
POST /api/pins 500 14.888 ms - 69

目标是将点击数据存储到DB中,我使用的是一个交互式地图开源库FapleJS。

这将在地图上创建一个由jquery函数调用的标记:

const createPins = () => {
  let markArr = [];
  window.map.on("click", (event) => {
    let marker = new L.marker([event.latlng.lat, event.latlng.lng]);
    window.map.addLayer(marker);
    markArr.push(marker);
    marker.bindPopup(renderPins()).openPopup();
    console.log(markArr);

    $(".pin-form").on("submit", function (e) {
      e.preventDefault();

      let content =
        $(this).serialize() +
        `&latitude=${event.latlng.lat}&longitude=${event.latlng.lng}`;
      console.log(content); 

      return $.post(`/api/pins`, (data) => {
        console.log(data);
        window.markers.push(marker);
        // marker.closePopup();
        // marker.unbindPopup();
        marker.bindPopup(data.content);
        console.log(data.content);
      });
    });
  });

单击打开一个表单:

const renderPins = () => {  const $pinForm = `

  <div class="pin-form-container">

  <form class="pin-form">

    <label for="title"> Pin Name:</label><br>

    <input type="text" name="title" id="name" placeholder="New Pin"/><br>

    <input type="textarea" name="description" placeholder="description"/><br>

    <input type="text" name="image_url" id="image" placeholder="image url" /><br>

    <button class="submit" type="submit">submit</button>

  </form>

</div>

    `;

  return $pinForm;

};


使用的路线

// POST add pin
  router.post("/", (req, res) => {
    const { owner_id, title, description, latitude, longitude, image_url } =
      req.body;
    console.log(req.body);
    const queryString = `
    INSERT INTO pins (
      owner_id, title, descripion, latitude, longitude, image_url)
      VALUES
      ($1, $2, $3, $4, $5, $6)
      RETURNING *;`;
    db.query(queryString, [
      owner_id,
      title,
      description,
      latitude,
      longitude,
      image_url,
    ])
      .then((data) => {
        const pins = data.rows[0];
        console.log(`/api/pins/:`, data);
        console.log(`/api/pins/:`, pins);
        res.json(pins);
      })
      .catch((err) => {
        res.status(500).json({ error: err.message });
      });
  });
特别声明:以上内容(图片及文字)均为互联网收集或者用户上传发布,本站仅提供信息存储服务!如有侵权或有涉及法律问题请联系我们。
举报
评论区(0)
按点赞数排序
用户头像