Question

＆＃13;

$("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
            }
        })
     }
 })

＆＃13;

<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>

＆＃13;

我有几个复选框，其值使用POST请求传递。如果选中了一个复选框，则该值将传递给POST请求。

但我已经有了传递POST请求的代码：

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中，以便查询所有内容。

因为现在发送了两个不同的请求，导致信息输出不正确。

Answer 1

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

试试这个：

$(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参数作为函数可以将其他数据发送到服务器

Official Documentation

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

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

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

Answer 2

看起来你想重用的ajax功能是DataTable的。使用其他插件使用的ajax函数不是一个好主意。

此处，您要重用的Ajax调用由DataTable函数使用。您可以创建一个发出ajax请求的总结函数，而不是重新使用它。每次如果要进行ajax请求，都可以使用指定的参数调用该函数。示例：

function customAjax(url,data,method,success_message,fail_message){
    $.ajax({
        url:url,
        data:data,
        method:method,
        success:function(response){
            alert(success_message);
        },
        error:function(response){
            alert(fail_message);
        }
    });
}

并致电：

customAjax("xyx.php","username=abc&password=ushfush","POST","Login Successfull","Something went wrong");

将两个请求集成到一个Javascript中

2 个答案: