Question

我确定我过度复杂，但我试图用引用的HTML完成两件事。当用户选择一个选项时，如果符合标准，我想将leaderTable的显示样式从hidden切换为可见（这是我已成功完成后续的JS）

我还想将所选选项的值作为参数传递给PHP函数，该函数将设置我可以使用的$ _SESSION变量。

根据我的理解，我必须使用AJAX请求将值传递给php脚本，但我不完全理解AJAX POST vs 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>

Answer 1

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

关于AJAX POST和GET之间的区别，对您来说无关紧要。你可以做任何一个。在PHP脚本中使用$_REQUEST[..]查找参数，您将涵盖这两种情况。

最后，这里有一些想法：

如果您需要立即将值传达给服务器，则必须使用AJAX
如果您不介意在将值传递给服务器时刷新页面，则可以跳过AJAX并通过更改JS中的window.location并在URL中包含参数来执行此操作。 AJAX易于使用并且避免了刷新，所以它更好..
如果您不需要立即将值传递给服务器，可以将其作为cookie保存在JS中（使用document.cookie），它将在用户发出的下一个请求时到达服务器。然后使用$_COOKIE[..]

Answer 2

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

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

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

2 个答案: