动态地将值传递给数据对象

【问题标题】：Dynamically pass in values to the data object动态地将值传递给数据对象
【发布时间】：2021-06-25 19:13:34
【问题描述】：

目前，我获取一个 id 的值并将其传递到我的数据对象中以发送到服务器。

const field_value = $('#id_field').val();
const scores_value = $('#id_scores').val();
$.ajax({
    data: {'Fields':field_value, 'Scores': scores_value},
});

我想动态实现这一点，以防我添加更多表单，这样它就可以自动更新，而无需我更改任何代码。

我尝试使用 jquery 的 each 方法来访问该类。

$(".class").each(function() {
    const get_updated_value = $(this).val();
});

这会动态获取值，但我无法将返回的值传递给数据对象。

【问题讨论】：

get_updated_value 仅在 .each 调用的函数内部定义 - 您无法从该函数外部访问它。

标签： javascript jquery ajax each

【解决方案1】：

如果每个带有 '.class' 的元素都有自己的 id，你可以将这些 id 作为数据对象的键：

var updated_values = {};

$(".class").each(function() {
    updated_values[$(this).attr('id')] = $(this).val();
});

$.ajax({
    data: updated_values,
});

工作示例：

function update() {
    var updated_values = {};
  
    $(".input").each(function() {
        updated_values[$(this).attr('id')] = $(this).val();
    });
  
    console.log(updated_values);
}

input {
    display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
    <input type="text" placeholder="My task" id="field" class="input">
    <input type="text" placeholder="My date" id="scores" class="input">
    <input type="text" placeholder="My time" id="something_new" class="input">
    <input type="button" value="Update" onclick=update() id="save">
</div>

【讨论】：