如何更新block元素的样式并将参数传递给PHP function

我确信我把事情复杂化了，但我正试图用引用的HTML完成两件事。当用户选择一个选项时，如果leaderTable满足条件，我想将其显示样式从隐藏切换为可见（我已经成功地使用下面的JS完成了这一操作）

我还想将所选选项的值作为参数传递给一个PHP函数，该函数将设置一个我可以使用的$\u会话变量

据我所知，我必须使用AJAX请求将值传递给php脚本，但我不完全理解ajaxpost和GET

HTML

<select id="rate_type" name="rate_type">
<option value="">Select One</option>
<option value="1">Non-Supervisors</option>
<option value="2">Supervisors</option>
<option value="3">Manager</option>
<option value="4">Director</option>
<option value="5">Sales</option>
<option value="6">Executive</option>
</select>

选择一个
非监管者
主管
经理
经理
销售额
总经理

JS

<script>
window.onload = function() {
      var eSelect = document.getElementById('rate_type');
        var leaderTable = document.getElementById('leadership');

        eSelect.onchange = function() {
            if((eSelect.selectedIndex == 2) || (eSelect.selectedIndex == 3) || (eSelect.selectedIndex == 4) || (eSelect.selectedIndex == 5) || (eSelect.selectedIndex == 6)){

                leaderTable.style.display= 'block';


                } else {

                leaderTable.style.display = 'none';

            }

        }
    }

</script>

window.onload=函数（）{
var eSelect=document.getElementById（'rate_type'）；
var leaderTable=document.getElementById（'leadership'）；
eSelect.onchange=函数（）{
如果（（eSelect.selectedIndex==2）| |（eSelect.selectedIndex==3）| |（eSelect.selectedIndex==4）| |（eSelect.selectedIndex==5）| |（eSelect.selectedIndex==6））{
leaderTable.style.display='block'；
}否则{
leaderTable.style.display='none'；
}
}
}

首先，几乎没有人再编写“原始”JS了。使用JS库，让生活变得简单。我推荐jQuery。理解它需要几分钟，但它可以在中实现AJAX

关于AJAX POST和GET之间的区别，这对您来说并不重要。你可以做任何一个。在PHP脚本中，使用

$\u REQUEST[…]

查找参数，您将介绍这两种情况

最后，以下是一些想法：

如果需要立即将值传递给服务器，则必须使用AJAX

如果您不介意在向服务器传递值时刷新页面，可以跳过AJAX，通过在JS中更改window.location并在URL中包含参数来完成。AJAX使用简单，避免了刷新，因此更好

如果不需要立即将值传递给服务器，可以将其保存在JS中作为cookie（使用

document.cookie

），并在用户发出下一个请求时将其发送到服务器。然后在PHP中使用

$\u COOKIE[…]

---

首先，几乎没有人再写“原始”JS了。使用JS库，让生活变得简单。我推荐jQuery。理解它需要几分钟，但它可以在中实现AJAX

关于AJAX POST和GET之间的区别，这对您来说并不重要。你可以做任何一个。在PHP脚本中，使用

$\u REQUEST[…]

查找参数，您将介绍这两种情况

最后，以下是一些想法：

如果需要立即将值传递给服务器，则必须使用AJAX

如果您不介意在向服务器传递值时刷新页面，可以跳过AJAX，通过在JS中更改window.location并在URL中包含参数来完成。AJAX使用简单，避免了刷新，因此更好

如果不需要立即将值传递给服务器，可以将其保存在JS中作为cookie（使用

document.cookie

），并在用户发出下一个请求时将其发送到服务器。然后在PHP中使用

$\u COOKIE[…]

---

下面的代码将从google添加jQuerySRC，并在更改时向服务器发出ajax请求。有关更多信息，请参阅

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
        $('#rate_type').change(function() {
            if(($(this).val() == 2) || ($(this).val() == 3) || ($(this).val() == 4) || ($(this).val() == 5) || ($(this).val() == 6)){
                $('#leadership').show();
            } else {
                $('#leadership').hide();
            }

            // this is the shorthand post
            $.post(
                // the url
                '<?php echo $_SERVER['PHP_SELF'] ?>',
                // the request parameters to send
                {
                    rate_type: $('#rate_type').val(),
                    some_other_var: 'junk'
                },
                function(data) {
                    // do something here
                    console.log(data);
            });
        });
        // fire the change event on load if needed
        $('#rate_type').change();
});
</script>

$（文档）.ready（函数（）{
$（'#rate_type'）。更改（函数（）{
如果（$（this.val（）==2）| |（$（this.val（）==3）| |（$（this.val（）==4）| |（$（this.val（）==5）| |（$（this.val（）==6））{
$（“#领导力”）.show（）；
}否则{
$（“#领导力”）.hide（）；
}
//这是速记邮件
美元邮政(
//网址
'',
//要发送的请求参数
{
rate_type:$（“#rate_type”）.val（），
一些其他变量：“垃圾”
},
功能（数据）{
//在这里做点什么
控制台日志（数据）；
});
});
//如果需要，在加载时触发更改事件
$（“#rate_type”）.change（）；
});

下面的代码将从google添加jquery src，并在更改时向服务器发出ajax请求。有关更多信息，请参阅

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
        $('#rate_type').change(function() {
            if(($(this).val() == 2) || ($(this).val() == 3) || ($(this).val() == 4) || ($(this).val() == 5) || ($(this).val() == 6)){
                $('#leadership').show();
            } else {
                $('#leadership').hide();
            }

            // this is the shorthand post
            $.post(
                // the url
                '<?php echo $_SERVER['PHP_SELF'] ?>',
                // the request parameters to send
                {
                    rate_type: $('#rate_type').val(),
                    some_other_var: 'junk'
                },
                function(data) {
                    // do something here
                    console.log(data);
            });
        });
        // fire the change event on load if needed
        $('#rate_type').change();
});
</script>

$（文档）.ready（函数（）{
$（'#rate_type'）。更改（函数（）{
如果（$（this.val（）==2）| |（$（this.val（）==3）| |（$（this.val（）==4）| |（$（this.val（）==5）| |（$（this.val（）==6））{
$（“#领导力”）.show（）；
}否则{
$（“#领导力”）.hide（）；
}
//这是速记邮件
美元邮政(
//网址
'',
//要发送的请求参数
{
rate_type:$（“#rate_type”）.val（），
一些其他变量：“垃圾”
},
功能（数据）{
//在这里做点什么
控制台日志（数据）；
});
});
//如果需要，在加载时触发更改事件
$（“#rate_type”）.change（）；
});

您是否尝试过使用jquery？ajax请求与普通HTTP请求没有什么不同。GET指定URL中的参数，最适合在内容框架中获取动态内容，不应用于其他目的。POST更安全，可以发送更多数据。您仍然需要进行服务器端验证，如果您是AJAX新手，请使用jQueryHave您是否尝试过使用jquery？AJAX请求与普通HTTP请求没有什么不同。获取说明符