如何使用JQuery将值数组插入到数据库中

How to insert an array of values into your database using JQuery

本文关键字：插入 数据库 数组 何使用 JQuery      更新时间：2023-09-26

我在html页面上设置了几天（星期一、星期二…）的复选框，我想将它们添加到我的数据库中。我需要将它们添加到DaysWorked，这是一个字符串数组。这是我到目前为止的代码

var newUser = {
        'username': $('#addUser fieldset input#inputUserName').val(),
        'password': $('#addUser fieldset input#inputUserPassword').val(),
        'email': $('#addUser fieldset input#inputUserEmail').val(),
        'fname': $('#addUser fieldset input#inputUserFname').val(),
        'sname': $('#addUser fieldset input#inputUserSname').val(),
        'JobType': $('#addUser fieldset select#inputUserJobType').val(),
        'ShiftType': $('#addUser fieldset select#inputUserShiftType').val(),
        'DaysWorked': $('#addUser fieldset input#inputUserMonday').val(),
        'DaysWorked': $('#addUser fieldset input#inputUserTuesday').val(),
        'DaysWorked': $('#addUser fieldset input#inputUserWendsday').val(),
        'DaysWorked': $('#addUser fieldset input#inputUserThursday').val(),
        'DaysWorked': $('#addUser fieldset input#inputUserFriday').val(),
        'DaysWorked': $('#addUser fieldset input#inputUserSaturday').val(),
        'DaysWorked': $('#addUser fieldset input#inputUserSunday' ).val(),
        'HoursPerWeek': $('#addUser fieldset input#inputUserHoursPerWeek').val()
    }

我知道我所有的其他代码都能工作，但问题是，我只是不知道如何将日期添加到对象newUser的数组中。

我想，这对你有用：

var newUser = {
    'username': $('#addUser fieldset input#inputUserName').val(),
    'password': $('#addUser fieldset input#inputUserPassword').val(),
    'email': $('#addUser fieldset input#inputUserEmail').val(),
    'fname': $('#addUser fieldset input#inputUserFname').val(),
    'sname': $('#addUser fieldset input#inputUserSname').val(),
    'JobType': $('#addUser fieldset select#inputUserJobType').val(),
    'ShiftType': $('#addUser fieldset select#inputUserShiftType').val(),
    'DaysWorked': [
           $('#addUser fieldset input#inputUserMonday').val(),
           $('#addUser fieldset input#inputUserTuesday').val(),
           $('#addUser fieldset input#inputUserWendsday').val(),
           $('#addUser fieldset input#inputUserThursday').val(),
           $('#addUser fieldset input#inputUserFriday').val(),
           $('#addUser fieldset input#inputUserSaturday').val(),
           $('#addUser fieldset input#inputUserSunday' ).val()
     ],
    'HoursPerWeek': $('#addUser fieldset input#inputUserHoursPerWeek').val()
}

具有选择器缓存的解决方案：

var fieldset = $('#addUser fieldset');
var newUser = 
{
  'username': fieldset.find('input#inputUserName').val(),
  'password': fieldset.find('input#inputUserPassword').val(),
  'email': fieldset.find('input#inputUserEmail').val(),
  'fname': fieldset.find('input#inputUserFname').val(),
  'sname': fieldset.find('input#inputUserSname').val(),
  'JobType': fieldset.find('select#inputUserJobType').val(),
  'ShiftType': fieldset.find('fieldset select#inputUserShiftType').val(),
  'DaysWorked': 
   [
      fieldset.find('input#inputUserMonday').val(),
      fieldset.find('input#inputUserTuesday').val(),
      fieldset.find('input#inputUserWendsday').val(),
      fieldset.find('input#inputUserThursday').val(),
      fieldset.find('input#inputUserFriday').val(),
      fieldset.find('input#inputUserSaturday').val(),
      fieldset.find('input#inputUserSunday' ).val()
   ],
  'HoursPerWeek': fieldset.find('input#inputUserHoursPerWeek').val()
};

假设您的输入是唯一命名的，那么input#也是冗余的，并且可以更改为输入id，例如#inputUserName，这是对元素的更快查找。

这个过程最好移到对象散列中，这样它就更像OCP了。然后，您可以迭代对象散列键，并使用每个值作为返回newUser散列值的策略。

为什么不使用类似的东西：`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> </title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
    <input type="text" class="input-set" id="x">
    <input type="text" class="input-set" id="y">
    <input type="text" class="input-set" id="z">
    <input type="submit" class="go">
    <script>
        jQuery(document).ready(function($) {
            $('.go').click(function() {
                var allInputs = $('.input-set');
                daysWorked = []
                allInputs.each(function(index, el) {
                    daysWorked.push($(el).val());
                });
                console.log(daysWorked)
            });
        });
    </script>
</body>
</html>

`

您正在从输入中获取所有值，并将其放入数组中。然后你可以把它作为一个档案发送。

var newUser = {
    'username': $('#addUser fieldset input#inputUserName').val(),
    'password': $('#addUser fieldset input#inputUserPassword').val(),
    'email': $('#addUser fieldset input#inputUserEmail').val(),
    'fname': $('#addUser fieldset input#inputUserFname').val(),
    'sname': $('#addUser fieldset input#inputUserSname').val(),
    'JobType': $('#addUser fieldset select#inputUserJobType').val(),
    'ShiftType': $('#addUser fieldset select#inputUserShiftType').val(),
    'DaysWorked': daysWorked,
    'HoursPerWeek': $('#addUser fieldset input#inputUserHoursPerWeek').val()
}
相关文章：