如何在 jquery 中创建多维数组/对象并通过 AJAX post 传递

2024-04-21

我正在创建一个订单表单,其中包含用户可以购买的订单项目表。输入使用数据属性来存储商品名称和每件价格,如下所示:

<input type="text" class="input-small quantity-input" data-pid="<?php echo $p['id']; ?>" data-min="<?php echo $p['min_qty']; ?>" data-max="<?php echo $p['max_qty']; ?>" data-price="<?php echo $p['price']; ?>" data-name="<?php echo $p['product_name']; ?>" placeholder="quantity...">

除了如何迭代每个数量输入项并将其添加到可以通过 AJAX Post 发送的多维数组之外,我已经弄清楚了所有事情。我目前有以下代码,但是当我对 $_POST 值执行 print_r 时,它会显示:不允许的关键字符:新鲜罗非鱼片

    $("#ccform").validate({
  rules: {
    firstName: { required: true },
    lastName: { required: true },
    email: {
        required: true,
        email: true,
    },
    cardNumber: { required: true },
    expMonth: { required: true },
    expYear: { required: true },
    cvv: { required: true },
    address: { required: true },
    city: { required: true },
    state: { required: true },
    zipcode: { required: true },
    phone: { required: true },
  },
  submitHandler: function() {
      var siteUrl = $('#siteUrl').val();
      var orderItems = [];
        $('.quantity-input').each(function(){
            var orderItem = $(this).attr('data-name');
            var priceEach = $(this).attr('data-price');
            var qty = $(this).val();
            if(qty != '') {
                obj = {};
                obj[orderItem] = orderItem;
                obj[priceEach] = priceEach;
                obj[qty] = qty;
                orderItems.push(obj);
            }
        });

        var pickupLocation = $('input[name="pickup"]:checked').val();
        var pickupPrice = $('#hidePickupPrice').val();
        var subtotal = $('#hideSubtotal').val();
        var tax = $('#hideTax').val();
        var total = $('#hideTotal').val();

        var firstName = $('#firstName').val();
        var lastName = $('#lastName').val();
        var email = $('#email').val();
        var cardNumber = $('#cardNumber').val();
        var expMonth = $('#expMonth').val();
        var expYear = $('#expYear').val();
        var cvv = $('#cvv').val();
        var address = $('#address').val();
        var address2 = $('#address2').val();
        var city = $('#city').val();
        var state = $('#state').val();
        var zipcode = $('#zipcode').val();
        var phone = $('#phone').val();

        $.ajax({
             type: "POST",
             url: siteUrl + "frontend/pay",
             data: ({ 'orderItems': orderItems, 'pickupLocation': pickupLocation, 'pickupPrice': pickupPrice, 'subtotal': subtotal, 'tax': tax, 'total': total, 'firstName': firstName, 'lastName': lastName, 'email': email, 'cardNumber': cardNumber, 'expMonth': expMonth, 'expYear': expYear, 'cvv': cvv, 'address': address, 'address2': address2, 'city': city, 'state': state, 'zipcode': zipcode, 'phone': phone}),
             success: function(data) {
                 alert('done!');
             }
        });
    },
});

我通常不太了解 Jquery,所以这可能只是 jquery 对象格式化的菜鸟问题。另外,我正在使用 Codeigniter 作为 PHP 框架。你可以在这里看到现场版本 http://422clients.com/f2f/app

澄清一下,这是我需要帮助的代码区域。它不是创建多维对象/数组:

var orderItems = [];
        $('.quantity-input').each(function(){
            var orderItem = $(this).attr('data-name');
            var priceEach = $(this).attr('data-price');
            var qty = $(this).val();
            if(qty != '') {
                obj = {};
                obj[orderItem] = orderItem;
                obj[priceEach] = priceEach;
                obj[qty] = qty;
                orderItems.push(obj);
            }
        });

您需要引用您的密钥:

obj['orderItem'] = orderItem;
obj['priceEach'] = priceEach;
obj['qty'] = qty;

或者使用点符号:

obj.orderItem = orderItem;
obj.priceEach = priceEach;
obj.qty = qty;

如果没有引号/点符号,就像这样说:

obj['Fresh Tilapia Filets'] = 'Fresh Tilapia Filets';
obj['$2.99'] = '$2.99';
obj[10] = 10;

因为它评估具有相同名称的变量。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 jquery 中创建多维数组/对象并通过 AJAX post 传递 的相关文章

  • Google App Engine:修改云运行环境

    我正在尝试部署一个使用自定义 Node js 服务器的 Next js 应用程序 我想将自定义构建变量注入应用程序 next config js const NODE ENV process env NODE ENV const envTy
  • 如何抑制窗口鼠标滚轮滚动...?

    我正在开发嵌入页面中的画布应用程序 我有它 因此您可以使用鼠标滚轮放大绘图 但不幸的是 这会滚动页面 因为它是文章的一部分 当我在 dom 元素上滚动鼠标滚轮时 是否可以阻止鼠标滚轮在窗口上滚动 附加鼠标滚轮 不是 Gecko DOMMou
  • Node.js:如何在检索数据(块)时关闭响应/请求

    我正在用 node js 构建一个应用程序 它加载多个页面并分析内容 因为 node js 发送块 所以我可以分析这些块 如果一个块包含例如索引 nofollow 我想关闭该连接并继续其余部分 var host example com to
  • 标签获取 href 值

    我有以下 html div class threeimages a img alt Australia src Images Services 20button tcm7 9688 gif a div class text h2 a hre
  • jquery.validate 中是否有一个函数可以像重置表单一样重置单个字段?

    我想调用 jquery 函数来手动删除单个字段中的错误并重置错误标记 是否有一个函数可以执行此操作 类似于 resetForm 函数 您可以执行以下操作来验证单个字段 your field valid 也许它会对某人有所帮助 Thanks
  • jQuery Mobile 表单验证

    我有一个移动网站 除了验证之外一切都工作正常 基本上我希望从用户那里获取值 然后在单独的页面 process php 上处理它们 但是 在这样做之前 我需要检查以确保字段已填充 我已经研究了几种方法来做到这一点 但似乎没有一种有效 我现在有
  • 在 webpack 2.x 中使用 autoprefixer 和 postcss

    如何使用autoprefixer使用 webpack 2 x 以前 它曾经是这样的 module loaders test scss loader style css sass postcss postcss gt return autop
  • 提交表单并重定向页面

    我在 SO 上看到了很多与此相关的其他问题 但没有一个对我有用 我正在尝试提交POST表单 然后将用户重定向到另一个页面 但我无法同时实现这两种情况 我可以获取重定向或帖子 但不能同时获取两者 这是我现在所拥有的
  • Grails 在 javascript 内的 GSP 站点中使用 grails var

    我有一个在 GSP 文件中的 javascript 代码中使用 grails 变量值的问题 例如 我有一个会话值session getAttribute selectedValue 我想在 javascript 代码部分使用这个值 我现在的
  • Electron - 为什么在关闭事件时将 BrowserWindow 实例设置为 null

    The 电子文档 https electronjs org docs api browser window 提供以下代码示例来创建新窗口 const BrowserWindow require electron let win new Br
  • 如何使用tampermonkey模拟react应用程序中的点击?

    我正在尝试使用 Tampermonkey 脚本模拟对 React 元素的点击 不幸的是 由于 React 有自己的影子 DOM 所以天真的方法使用document querySelector 不工作 我遇到了一些需要修改 React 组件本
  • 使用 JQuery 更改元素的顺序

    有人知道我做错了什么吗 我正在尝试更改某些图像的显示顺序 我希望每次按下按钮时图像都会向右 向左移动一个位置 这是我尝试过的 但没有运气 任何帮助或见解将不胜感激 rightShift click function img hide var
  • 如何判断 jquery 对话框是否打开? [复制]

    这个问题在这里已经有答案了 寻找通用案例解决方案来确定当前是否打开任何 jquery 对话框 有多个 试过 ui dialog content dialog isOpen true ui dialog dialog isOpen true
  • jQuery 获取元素内的鼠标位置

    我希望制作一个控件 用户可以在 div 内单击 然后拖动鼠标 然后松开鼠标以指示他们想要的内容有多长 这是针对日历控件的 因此用户将指示特定事件的时间长度 看起来最好的方法是在父 div 上注册一个 mousedown 事件 而父 div
  • 为 illustrator 导出脚本以保存为 web jpg

    任何人都可以帮我为 illustrator CC2017 编写一个脚本 将文件以 JPG 格式导出到网络 旧版 然后保存文件并关闭 我有 700 个文件 每个文件有 2 个画板 单击 文件 gt 导出 gt 另存为 Web 旧版 然后右键文
  • 有没有办法阻止 prettier / prettier-now 将函数参数分解为新行

    当使用 prettier prettier now 在保存时进行格式化时 当一个函数包装另一个函数时 它会中断到一个新行 我想知道是否有办法阻止这种行为 例如 期望的输出 app get campgrounds id catchAsync
  • 条件在反应本机生产中失败,但在开发中有效

    我创建了一个反应本机应用程序 我需要通过它进行比较 如果属实 就会执行死刑 问题是 该条件适用于 React Native 开发模式 而不适用于 React Native 生产版本 我使用 firebase 作为数据库 也使用 redux
  • Jquery 验证不能正确验证数字?

    我在使用 jquery 非侵入式验证验证数字时遇到问题 我使用的版本是 ASP NET MVC 3 jQuery 1 9 1 jQuery 用户界面 1 10 1 JQuery 验证 1 11 0 我试图验证的输入是
  • jQuery 对象相等

    如何确定两个 jQuery 对象是否相等 我希望能够在数组中搜索特定的 jQuery 对象 inArray jqobj my array 1 alert deviceTypeRoot deviceTypeRoot False alert d
  • Spring Rest 和 Jsonp

    我正在尝试让我的 Spring Rest 控制器返回jsonp但我没有快乐 如果我想返回 json 但我有返回的要求 完全相同的代码可以正常工作jsonp我添加了一个转换器 我在网上找到了用于执行 jsonp 转换的源代码 我正在使用 Sp

随机推荐