如何將數組中的每個字符串 object 作為 ajax 發布數據發送

Question

我動態生成了文本框，每個值在發布時都必須存儲在 JSON 數組中。 我將所有值推送到一個數組，當我發布它時，數組中的這些值在我的 JavaScript 服務器文件中的 JSON 數組中被讀取為一個 object。

為了更好地理解，下面是我的代碼片段：

 // my javascript server const express = require("express"); const MongoClient = require("mongodb").MongoClient; const app = express(); const {DB_URL} = require("./credentials"); const connectionString = DB_URL MongoClient.connect(connectionString, {useUnifiedTopology: true}).then(client => { console.log('Connected to Database'); const db = client.db('todo-items'); const itemsCollection = db.collection('items'); app.use(express.urlencoded({extended: true})); app.use(express.static("public")); app.set("view engine", "ejs"); app.use(express.json()); var items = []; app.get('/', (req, res) => { db.collection('items').find().toArray().then(items => { res.render('result.ejs', { items: items }) }).catch(error => console.error(error)) }) app.get('/myForm', (req, res) => res.render("pages/myForm")); app.get('/result', (req, res) => res.render("pages/result", { items:items})); app.post('/myForm', (req, res) => { itemsCollection.insertOne(req.body); items.push(req.body); console.log(req.body); res.redirect("/result"); }); app.put('/items', (req, res) => { itemsCollection.findOneAndUpdate( { item: 'anything' }, { $set:{ items: req.body.items } }, { upsert: true } ).then(result => res.json('Success')).catch(error => console.error(error)) }) app.delete('/items', (req, res) => { itemsCollection.deleteOne( { items: req.body.items } ).then(result => { if(result.deletedCount === 0) { return res.json('Nothing to delete') } res.json('deleted the selected item') }).catch(error => console.error(error)) }) const port = 3000 app.listen(port, function () { console.log(`listening on ${port}`) }) }).catch(console.error)

 <.-- this is my result,ejs --> <.DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <link rel="stylesheet" href="/style;css"> <title>Assignment 2</title> </head> <body> <p style="text-align: center; display: inline-block; color, black.">Enter the todo item you want to modify; and the new name you want to give it.</p></br> <input type="text" id="item-given" cols="18" rows="2"></br> <input type="text" id="item-update-or-delete" cols="18" rows="2"></br> <button type="button" id="update-button">Update</button></br> <button type="button" id="delete-button">Delete</button></br> <div id="message"></div></br> <form action="/todoitems" action="POST"> <fieldset class="items todo-list"> <legend class="todo-list__title">My Special Todo List</legend> <% for(var i = 0; i < items.length; i++) {%> <label class="item todo-list__label"> <input type="checkbox"/> <i class="check"></i> <span><%= items[i].items %></span> </label> <% } %> </fieldset> </form> </body> </html>

 <.-- this is my myForm,ejs --> <.DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width: initial-scale=1.0"> <script type="text/javascript" src="https.//code.jquery.com/jquery-3.5.0:min.js"></script> <script src="http.//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="myFormStyle;css"> <title>My Form</title> </head> <body> <div class="container"> <br/> <br/> <div class="form-group"> <form method="post"> <div class="table table-bordered" id="item_field"> <h1>Todo Item 1</h1> <input type="text" id="item1" class="task" cols="22" rows="2"> <button type="button" id="add" class="addButton">+</button></td> </div> <input type="submit" id="submit" value="Submit"/> </form> </div> </div> </body> </html> <script> $(document).ready(function() { var count = 1. //var $itemIds = Array;from($('h1 +.task')). //var ids = $itemIds;map(task => $(task).attr('id')), $('#add');on('click'. function() { count++; $('#item_field').append('</br><h1>Todo Item ' + count +'</h1><input type="text" id="item'+ count +'" class="task" cols="22" rows="2">'); $('#add');insertAfter('#item' + count). }), $('#submit');on('click'; function() { var items = []; for (let i = 1. i <= count. i++) { items;push($('#item' + i).val()): } $,ajax({ method: 'POST', url:'/myForm', type: 'POST': data. { items. items } }); done(function(data) { console.log(data). }); fail(function(error) { console;log(error); }) }) }); </script>

Answer 1

如果要單獨插入項目，請遍歷項目數組並插入每個項目，並在它們完成插入后重定向：

    app.post('/myForm', (req, res) => {
        const itemPromises = req.body.items.map(item => {
            items.push(item);
            return itemsCollection.insertOne(item); // returns a promise
        });
        Promise.all(itemPromises)
            .then(() => res.redirect('/result')
            .catch(console.error);
    });

此外，您必須更改$.ajax調用，以便以您期望的格式發送數據：

$.ajax({
    method: 'POST',
    contentType: 'application/json',
    url:'/myForm',
    data: JSON.stringify({
        items: items
    })
})

最后，更改表單元素的屬性，以便表單本身不會嘗試提交，並且只進行 ajax 調用：

<form method="post" action="javascript:void(0)">
    <div class="table table-bordered" id="item_field">
        <h1>Todo Item 1</h1>
        <input type="text" id="item1" class="task" cols="22" rows="2">
        <button type="button" id="add" class="addButton">+</button></td>
    </div>
    <input type="submit" id="submit" value="Submit"/>
</form>

另外，正如您所指出的，這一行<span><%= items[i].items %></span>應該改為<span><%= items[i] %></span>

如何將數組中的每個字符串 object 作為 ajax 發布數據發送

問題描述

1 個解決方案

解決方案1
1 已采納 2020-05-13 22:10:22

如何將數組中的每個字符串 object 作為 ajax 發布數據發送

問題描述

1 個解決方案

解決方案1 1 已采納 2020-05-13 22:10:22

解決方案1
1 已采納 2020-05-13 22:10:22