如何将数组中的每个字符串对象作为 ajax post 数据发送

Question

我有动态生成的文本框，当 posted 时，每个值都必须存储在 JSON 数组中。我将所有值推送到一个数组，当我 post 它时，数组中的这些值被读取为我 JavaScript 服务器文件中 JSON 数组中的一个对象。

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

// 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>

如何将数组中的每个字符串对象作为 ajax post 数据发送

How to send each string object in an array as ajax post data

html

javascript

ajax

ejs

mongodb