Javascript 如何使用jquery ajax和node js在express framework中将数据从客户端传递到服务器？

问题是我什么时候打电话 server.js来保存详细信息，我需要将数据从client.js传递到server.js。但是，如果我传递一个JSON对象数组，服务器不理解数据，但如果它是单个JSON对象，则接收数据。 我试图在控制台中打印cart_items数组，它未定义

            //my client.js code
            var server_url = "http://127.0.0.1:9000";

            $(document).ready(function () {

                var cart_items = [{
                    id: '1',
                    item: 'rice',
                    cost: 25
                }, {
                    id: '2',
                    item: 'roti',
                    cost: 35
                }, {
                    id: '3',
                    item: 'curry',
                    cost: 40
                }]

                cart_items = JSON.stringify(cart_items);
                var menu_item = ['rice', 'roti', 'curry'];
                // $("body").append($newdiv1, [newdiv2, existingdiv1]);
                console.log(cart_items)
                for (let i = 0; i < 3; i++) {

                    console.log("jadsnkjn")
                    var $newInput = document.createElement("input");
                    $newInput.setAttribute('type', 'checkbox')
                    $newInput.setAttribute('class', 'optionIn')
                    $newInput.setAttribute('id', 'item' + i)

                    var $newLabel = document.createElement("label");
                    $newLabel.setAttribute('for', 'item' + i);
                    $('#item' + i).text(menu_item[0]);
                    $(".first_row").append($newInput, $newLabel);

                }



                $('.proceed_btn').on('click', function () {

                    $.ajax({
                        url: server_url + "/save",
                        type: "POST",

                        data: cart_items,
                        success: function (msg) {

                            alert("Local success callback.fggdfg" + msg);
                        },
                        error: function (jqXHR, status, err) {
                            alert("Local error callback.");
                        }
                    })
                })



            })


    ----------


            //my server.js code  
            var express = require('express')
        var bodyParser = require('body-parser')
        var server = express();
        var cors = require('cors');
        var mysql = require('mysql');
        var port = 9000;
        server.use(cors())
        server.use('/scripts', express.static(__dirname + '/scripts'))
        server.use('/css', express.static(__dirname + '/css'))
        server.use(express.static(__dirname))
        server.use(bodyParser.urlencoded({ extended: true }))
        server.use(bodyParser.json());


        //Saving the cart details in the database table order_details
        server.post('/save', function (req, res) {
            var error = 0;
            var status_code = 200;
            var status_message = "callback success";
            var cart_items = []
            cart_items = req.body;// I think I am missing somethings here I tried with cart_item = req.body.cart_items still undefined
            console.log(cart_items[0].id)//giving undefined

            //initiating database insertion
            //dbInsertion(cart_items);


            return res.status(status_code).send(status_message);
        })



        //inserting the order details in order_details table after successful payment
        function dbInsertion(cart_items) {
            var connectionObject = dbConnection();

            sql = "insert into order_details values ('" + cart_items[0].id + "','" + 908089 + "')";
            connectionObject.query(sql, function (err, result) {
                if (err) {
                    error = error + 1;
                    status_code = 404;
                    error_message = "Sorry data could not be entered something is wrong in the sql query syntax";
                    console.log("error in the sql query" + status_code)

                }
                else console.log("1 row inserted");


            })
            connectionObject.end();
        }

        //establishing the connection with database 
        function dbConnection() {
            var con =
                mysql.createConnection({
                    host: "localhost",
                    user: "root",
                    password: "root",
                    database: "tempdb"

                })
            con.connect(function (err) {
                if (err) throw err;
                console.log("connected!")
            })

            return con;
        }


        server.listen(port, function () {
            console.log("listening at" + port);
        })




    ----------




            // this is my index.html page

                <html>

                <head>
                    <title>
                        Eatback
                    </title>

                </head>

                <body>
                    <input type="text" id="key" name="key">
                    <input type="text" id="value" name="value">
                    <button id="button" class="btn btn-success">submit</button>
                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
                    <script src="scripts/client.js"></script>
                    <div id="new">

                    </div>
                </body>

                </html>

//my client.js代码
var server_url=”http://127.0.0.1:9000";
$（文档）.ready（函数（）{
var cart_项目=[{
id:'1'，
项目:"米",，
费用：25
}, {
id:'2'，
项目：“roti”，
费用：35
}, {
id:'3'，
项目：“咖喱”，
费用：40
}]
cart\u items=JSON.stringify（cart\u items）；
var菜单项=[‘米饭’、‘罗蒂’、‘咖喱’]；
//$（“正文”）.append（$newdiv1，[newdiv2，existingdiv1]）；
console.log（购物车项目）
for（设i=0；i<3；i++）{
console.log（“jadsnkjn”）
var$newInput=document.createElement（“输入”）；
$newInput.setAttribute（'type'，'checkbox'）
$newInput.setAttribute（'class'，'optionIn'）
$newInput.setAttribute（'id'，'item'+i）
var$newLabel=document.createElement（“标签”）；
$newLabel.setAttribute（'for'，'item'+i）；
$（'#项'+i）.text（菜单项[0]）；
$（“.first_row”）.append（$newInput，$newLabel）；
}
$（'.procedue_btn'）。在（'click'，函数（）{
$.ajax({
url:server_url+“/save”，
类型：“POST”，
数据：购物车项目，
成功：功能（msg）{
警报（“本地成功回调.fggdfg”+msg）；
},
错误：函数（jqXHR、状态、错误）{
警报（“本地错误回调”）；
}
})
})
})
----------
//myserver.js代码
var express=require（'express'）
var bodyParser=require（'body-parser'）
var server=express（）；
var cors=要求（“cors”）；
var mysql=require（'mysql'）；
var端口=9000；
server.use（cors（））
server.use（'/scripts'，express.static（\uu dirname+'/scripts'））
server.use（'/css'，express.static（uu dirname+'/css'））
server.use（express.static（_dirname））
use（bodyParser.urlencoded（{extended:true}））
use（bodyParser.json（））；
//在数据库表order\u details中保存购物车详细信息
server.post（'/save'，函数（req，res）{
var误差=0；
var状态_代码=200；
var status_message=“回调成功”；
var cart_items=[]
cart\u items=req.body；//我想我在这里遗漏了一些东西，我用cart\u item=req.body.cart\u项目尝试过，但仍然没有定义
console.log（购物车项目[0].id）//未定义
//启动数据库插入
//数据库插入（购物车项目）；
返回资源状态（状态代码）。发送（状态消息）；
})
//成功付款后在订单详情表中插入订单详情
函数dbInsertion（购物车项目）{
var connectionObject=dbConnection（）；
sql=“在订单中插入详细信息值（“+cart”项目[0].id+”，“+908089+”）；
查询（sql，函数（错误，结果）{
如果（错误）{
误差=误差+1；
状态代码=404；
error\u message=“抱歉，无法输入数据。sql查询语法有错误”；
log（“sql查询中的错误”+状态代码）
}
else console.log（“插入1行”）；
})
connectionObject.end（）；
}
//建立与数据库的连接
函数dbConnection（）{
var-con=
mysql.createConnection({
主机：“本地主机”，
用户：“根”，
密码：“root”，
数据库：“tempdb”
})
con.connect（功能（错误）{
如果（错误）抛出错误；
log（“已连接！”）
})
返回con；
}
侦听（端口、函数（）{
console.log（“在“+端口监听”）；
})
----------
//这是我的index.html页面
食客
提交

您的代码很好，只需删除以下行：

cart_items = JSON.stringify(cart_items);

并将数据作为对象发送：

data: { cart_items: cart_items },

无需将提交的数据转换为json字符串，如果这样做，则应将其解析为服务器中的对象：

var cart_items = JSON.parse(req.body);

---

答案是，在ajax调用数据段中，它应该是data:{cart_items:cart_items}，而不是data:cart_items

I删除了这行cart_items=JSON.stringify（cart_items）；尽管如此，它仍然显示为未定义，因为我正在传递一个对象数组，它显示了这一点，但是如果我只直接发送一个JSON对象，它正在工作，请尝试在ajax对象中使用：

数据：{cart\u items:cart\u items}，

，并使用它来获取您的

cart\u items

数组