Я создал базовые c веб-приложения, в которых данные отправляются через параметры HTTP. Тем не менее, я пытаюсь отправить данные со стороны клиента, которая содержит массив (список ингредиентов для рецепта) и, в конечном итоге, надеюсь, пользователь загрузил изображение (но пока не беспокоится об этом). Для этого я знаю, что мне нужно использовать AJAX. Я потратил часы, пытаясь заставить его работать, но по какой-то причине не отправляется запрос POST. Пользовательские вводные данные довольно просты c, но вот фрагмент:
<label for="method"> Method </label>
<textarea id="method" name="method">method here</textarea>
</br>
<p> add ingredients </p>
<input name="ingredient" id="ingredient" placeholder="add ingredient">
<input name="quantity" id="quantity" placeholder="#"><button id="addIngBtn" type="button">Add</button><br>
<button type="submit">submit</button>
<p> Ingredients:</p>
<ul id="ingredientListUL">
Я использую JQUERY, чтобы позволить пользователям добавлять столько ингредиентов, сколько они хотят в список:
$(document).ready(() => {
$("#addIngBtn").click(() => {
let ingredient = $("#ingredient").val();
let quantity = $("#quantity").val();
$("#ingredient").val(""); //reset ingredient input
$("#quantity").val("");
$("ul").append(
"<li>" + ingredient + " - " + quantity + "</li>"
);
});
})
Ингредиенты встроены в массив, а затем добавлены в новый объект рецепта, который представляет собой данные, которые я хочу отправить на свой сервер:
var ingredients = [];
$("#ingredientListUL li").each((index, element) =>
ingredients.push($(element).text())
)
var recipe = {
name: $("#name").val(),
image: $("#image").val(),
oneLiner: $("#oneLiner").val(),
method: $("#method").val(),
ingredients: ingredients
}
Пока все хорошо. Я предполагаю, что я делаю что-то не так с этими следующими частями. Вот AJAX почтовый запрос:
$.ajax({
url: "http://localhost:5000/recipes",
type: "POST",
dataType: "json",
data: recipe,
contentType: "application/json",
complete: function () {
console.log("process complete");
},
success: function (data) {
console.log(data);
console.log("process success");
},
error: function () {
console.log(err);
}
})
А вот информация о моем сервере:
// express setup
const express = require("express");
const app = express();
const port = 5000;
// set templating engine to EJS
app.set('view engine', 'ejs');
// import route files
const recipeRoutes = require("./routes/recipes")
app.use("/recipes", recipeRoutes);
// body parser
const bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json())
//--
// BASIC ROUTES
//--
app.get("/", (req, res) => res.render("landing"));
// Port
app.listen(port, () => console.log(`Server starting on port ${port}!`));
Все маршруты хранятся в файле маршрутов рецептов, который содержит маршрут поста для этого request:
// default "/" route is really "/recipes" as defined in main server file.
router.post("/", (req, res) => {
console.log(req.body.recipe);
})
Проблема в том, что, по данным вкладки сети, кажется, что ничего не отправлено или не получено моим сервером. Даже когда я пытаюсь отправить что-то вроде:
$.post("http://localhost:5000/recipes", { test: "test" })
Что я делаю не так? Спасибо.