Question

大家好，我有一个叫li的员工，从那里我有多名员工。现在，我正在用.each()一对一地向员工发送信息，每个电话都得到了多个响应。这是我的代码

        var salary="";
        var designation ="";
        var employee ="";
        $(document).on('click', '.assign',function () { 
            salary = $(this).attr('salary');
            designation = $(this).attr('desg'); 
        }); 
        $('#btnSave').click(function () {
            $('#employee-list li').each(function () {
                var employee = $(this).attr('value');   
            $.ajax({
                url: '{{ route('salary_policy')}}',
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                type: 'POST',
                data: {
                        employee_id : employee,
                        designation_id : designation,
                        salary : salary
                    },
                dataType: 'JSON',
                success:function(data){

                alert(data.success);
                }
            });
        });   
    });

问题：我如何一次派遣所有员工？

Answer 1

最简单的方法是将一个类添加到您“分配”的li名员工中。然后，您可以根据他们的信息创建一个数组，然后通过data属性在AJAX请求中将其发送到服务器，如下所示：

$(document).on('click', '.assign', function() {
  $(this).closest('li').toggleClass('assigned');
});

$('#btnSave').click(function() {
  var employeeData = $('#employee-list li.assigned').map(function() {
    return {
      employee_id: $(this).data('value'),
      designation_id: $(this).data('desg'),
      salary: $(this).data('salary'),
    }
  }).get();
  console.log(employeeData); // just for testing

  $.ajax({
    url: "{{ route('salary_policy')}}",
    headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    type: 'POST',
    data: employeeData,
    dataType: 'JSON',
    success: function(data) {
      console.log(data.success);
    }
  });
});

li {
  padding: 5px;
  border: 1px solid transparent;
}
li.assigned {
  color: #C00;
  border: 1px solid #C00;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="employee-list">
  <li data-value="1" data-salary="5" data-desg="foo">Lorem ipsum <button class="assign">Assign</button></li>
  <li data-value="2" data-salary="10" data-desg="bar">Dolor sit <button class="assign">Assign</button></li>
  <li data-value="3" data-salary="20" data-desg="fizz">Adipscing elit <button class="assign">Assign</button></li>
</ul>

<button id="btnSave">Save</button>

请注意HTML中data属性的使用。这是因为创建非标准属性，例如value，salary和desg，将使HTML无效，并可能导致呈现或JS问题。如果要在HTML中存储自定义元数据，请始终使用data-*属性。

如何使用一个ajax发送多个实例并在laravel中接收控制器调用

1 个答案: