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 });
});
});
特别声明:以上内容(图片及文字)均为互联网收集或者用户上传发布,本站仅提供信息存储服务!如有侵权或有涉及法律问题请联系我们。
举报