jQuery双滑块Ajax传值至PHP时参数丢失问题求助

我懂你的问题啦——每次滑动第二个滑块时，第一个滑块的数值就没传到PHP里，导致后端只能拿到当前滑动的那个值，另一个直接丢了对吧？这是因为你现在的代码里，每次发送Ajax时只传了当前滑块的数值，甚至还误用了不存在的ui2变量，根本没拿到另一个滑块的值。

问题根源 #

1. 滑动第一个滑块时，你写了sliderVal2: ui2.value2，但ui2这个变量根本不存在，每个滑块的slide事件里的ui只对应当前滑动的那个滑块。
2. 滑动第二个滑块时，同样没主动获取第一个滑块的当前值，而且输入框赋值用了错误的val2()和slider("value2")，jQuery UI的单个滑块（range: "max"）只有value属性，没有value2。

修改后的完整代码 #

html_file.php

<script>
$(function() {
    // 初始化第一个滑块（level）
    $("#slider-range-max").slider({
        range: "max",
        min: 1,
        max: 25,
        value: 1,
        slide: function(event, ui) {
            $("#amount").val(ui.value);
            sendSliderValues(); // 调用统一的发送函数
        }
    });
    $("#amount").val($("#slider-range-max").slider("value"));

    // 初始化第二个滑块（quality）
    $("#slider-range-max2").slider({
        range: "max",
        min: 1,
        max: 4,
        value: 1,
        slide: function(event, ui) {
            $("#amount2").val(ui.value); // 修正val2为val
            sendSliderValues(); // 调用统一的发送函数
        }
    });
    $("#amount2").val($("#slider-range-max2").slider("value")); // 修正value2为value
});

// 统一的Ajax发送函数，获取两个滑块的当前值再发送
function sendSliderValues() {
    let levelVal = $("#slider-range-max").slider("value");
    let qualityVal = $("#slider-range-max2").slider("value");
    
    $.ajax({
        method: "POST",
        url: "php_file.php",
        data: { sliderVal: levelVal, sliderVal2: qualityVal }
    }).done(function(data) {
        $("#content").html(data);
    });
}
</script>

<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
<div id="slider-range-max"></div>

<input type="text" id="amount2" readonly style="border:0; color:#f6931f; font-weight:bold;">
<div id="slider-range-max2"></div>

<div id='content'></div>

php_file.php

<?php
// 增加isset判断，避免未定义变量报错
$str = isset($_POST['sliderVal']) ? $_POST['sliderVal'] : 1;
$quality = isset($_POST['sliderVal2']) ? $_POST['sliderVal2'] : 1;

$str2 = file_get_contents('https://example.com/stats/258?level='. $str .'&breedId=5&qualityId='. $quality .'&locale=de_DE');
$json = json_decode($str2, true);
$n = $json['health'] ?? 'N/A'; // 增加空值判断，防止json解析失败或health字段不存在

echo '<div class="profile-font2">', $n, '</div>';
?>

关键修改点 #

• 把两个滑块的Ajax发送逻辑抽成了统一的sendSliderValues函数，每次滑动任意滑块时，都会主动获取两个滑块的当前值，再一起传到后端，这样就不会丢失任何一个值了。
• 修正了输入框赋值的错误：把val2()改成了正确的val()，把slider("value2")改成了slider("value")。
• PHP里增加了isset和空值判断，避免因为前端没传值导致的报错，让代码更健壮。

现在你再滑动任意一个滑块，后端都能同时拿到level和quality的数值，就像你想要的level=6、quality=2的场景，完全没问题啦！

内容的提问来源于stack exchange，提问作者user9783837