将两个请求集成到一个Javascript中 [英] Integrate two requests into one Javascript

问题描述

$("input[type='checkbox']").on("change",function(){
    if($(this).is(":checked")){
        $.ajax({
            url: portfolio_data_url,
            type: 'POST',
            data: "id="+$(this).val(),
            success:function(r){
            // succcess call
            }
        })
     }
 })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form>
    <div><input type="checkbox"  value="0" checked>All</div>
    <div><input type="checkbox"  value="1">AppID</div>  
    <div><input type="checkbox"  value="2">Vendor</div>
</form>

我有几个复选框，这些复选框的值是使用POST请求传递的.如果选中一个复选框，则该值将传递到POST请求.

I have several checkboxes whose values are passed using a POST request. If one checkbox is selected, the value is passed to the POST request.

但是我已经有传递POST请求的代码:

But I already have code that passes POST requests:

list.js

$(function () {   
    var table = $("#portfolio").DataTable({
        "ajax": {
            "url": portfolio_data_url,
            "type": "POST"
        },    
        lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],    
        "stateSave": true,
        "processing": true,
        "serverSide": true,
        "deferRender": true,
        "language": datatables_language,    
        "order": [[ $(".portfolio thead th").index($(".portfolio thead .appid")), "desc" ]],    
        "columnDefs": [
            {
                "searchable": false,
                "orderable": false,
                "targets": "no-sort"
            }
        ]
    })
});

如何将代码集成到list.js中，使所有内容都可以与一个查询一起使用.

How can I integrate the code into the list.js for everything to go with one query.

因为现在发送了两个不同的请求，这些请求导致错误的信息输出.

Because now two different requests are sent which lead to incorrect output of information.

推荐答案

您可以使用.DataTable函数在一个请求中发送复选框检查值，如下所示:

You can use .DataTable function to send checkboxes checked value in one request like below:

尝试一下:

$(function () {   
    var table = $("#portfolio").DataTable({
        "ajax": {
            "url": portfolio_data_url,
            "type": "POST",
            "data": function(d){
                var ids = $('input:checkbox:checked').map(function(){
                        return this.value; 
                }).get();
                d.ids = ids; 
            }
        },    
        lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],    
        "stateSave": true,
        "processing": true,
        "serverSide": true,
        "deferRender": true,
        "language": datatables_language,    
        "order": [[ $(".portfolio thead th").index($(".portfolio thead .appid")), "desc" ]],    
        "columnDefs": [
            {
                "searchable": false,
                "orderable": false,
                "targets": "no-sort"
            }
        ]
    })
});

在Datatable中，使用data参数作为功能可以将其他数据发送到服务器

In Datatable Using the data parameter as a function allows the additional data to send to server

官方文档

注意:，您将获得选中的复选框值作为数组，您可以在.get()之后使用.join(',')将值作为逗号分隔的字符串发送，以便直接在查询中使用

Note: You will get checked checkboxes value as an array, You can use .join(',') after .get() to send values as comma separated string to use directly in query

此外，当用户选中任何复选框时，我们可以刷新数据表ajax以发送更新的选中复选框，如下所示:

Also, when user check any checkbox then we can refresh datatable ajax to send updated checked checkboxes like below:

$("input[type='checkbox']").on("change",function(){
  table.ajax.reload();
});

这篇关于将两个请求集成到一个Javascript中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！