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

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-*属性。