AJAX排序，而顺序值在一个变量内

Question

没有找到任何堆栈

我的排序方法是:

if($_GET['f1']=='ASC')
{
$order = ' ORDER BY clients.name ASC ';
$f1 = '<button type="button" class="btn btn-link btn-sm f1" id="DESC"><i class="bi bi-sort-alpha-down-alt"></i></button>';
}
elseif($_GET['f1']=='DESC')
{
$order = ' ORDER BY clients.name DESC ';
$f1 = '<button type="button" class="btn btn-link btn-sm f1" id="ASC"><i class="bi bi-sort-alpha-down"></i></button>';
}
else
{
$f1 = '<button type="button" class="btn btn-link btn-sm f1" id="ASC"><i class="bi bi-sort-alpha-down"></i></button>';
}

与f2, f3和f4的逻辑相同

我的f1 AJAX是这样的:

$(document).on("click",".f1",function(){

let id = $(this).attr('id');

$.ajax({
method:'GET',
url:'ajax.php?x=clients',
data:{f1:id},
success:function(response){
$('#data').html(response);
}
})
})

一切工作正常，但我想使排序的所有方法(f1,f2,f3,f4)使用一个ajax函数

请告知最好的制作方法，而不需要完全修改任何方法

Answer 1

我认为你可以通过一些小的改变来做到这一点:

• 使所有搜索按钮都有一个共同的类，并将搜索类型和方向存储为数据属性(不要像那样使用id="ASC"，因为id在HTML文档中必须是唯一的，显然你可能会在4个方法中使用多个这样的id)。
• 处理单击单个类，并获取所单击按钮的数据属性，以确定要放入AJAX调用的设置。
例如:

<button type="button" class="btn btn-link btn-sm sort" data-sort="clients" data-direction="DESC">

和

<button type="button" class="btn btn-link btn-sm sort-btn" data-field="surname" data-direction="ASC">

然后在JS中:.

$(document).on("click",".sort",function(){

let direction = $(this).data('direction');
let field = $(this).data('field');

$.ajax({
method:'GET',
url:'ajax.php',
data: {"field": field, "direction": direction},
success:function(response){
$('#data').html(response);
}
})
});

显然，你应该修改你的PHP寻找$_GET['field'] and$_GET['direction'] '，以匹配AJAX参数名称(我觉得这些比"x"容易理解得多)。和"f1"，这是相当没有意义的，但你可以不同意，如果你愿意，把它们改回来)。

Answer 2

class可以在发送数据前使用通配符

$("[class^='f']").on('click', function() {
let id = $(this).attr('id'); //get id
let cls = $(this).attr('class'); // get f1,f2 as class name
// On ajax call
$.ajax({
method: 'GET',
url: 'ajax.php?x=clients',
data: {
cls: id
},
success: function(response) {
$('#data').html(response);
}
});
});