【问题标题】:php - reload current page after dropdown onchange actionphp - 在下拉 onchange 操作后重新加载当前页面
【发布时间】:2016-09-29 12:24:45
【问题描述】:

我的头文件中有一个下拉元素。下拉列表包含我希望我网站上的用户从中选择的 2 种货币:

<div class = "currencyswitcher">
 <span class = "currencylabel"><strong>Currency Switcher</strong> </span>
<form method="post" id="switchcurrency" name = "switchcurrency">
    <select name = "currency" id = "currency" >
        <option value = "USD"> USD </option>
        <option value = "KES"> KES </option>
    </select>

</form>
</div>

这是由一个 ajax 脚本处理的,它将所选元素发布到另一个文件:

<script>
$(document).ready(function() {
    var url = "<?php echo file2.php;?>";
    $('#currency').change( function() {
       $.ajax({ 
           data: $('#switchcurrency').serialize(), 
           type: "POST",
           url: url, 
           success: function(response) { 
               alert(response);

           }
       });
    });  

}); 
</script>

现在,在我的 file2.php 中,我想从下拉列表中传递值并将其附加到我所在页面的 url,即如果我在页面 sitename.php/page1 上,然后从下拉,页面刷新到 sitename.php/page1?currency=USD 如果我在 sitename.php/page2 上,在选择时,页面刷新到 sitename.php/page2?currency=KES 等等...

这是我的 file2.php(ajax 发布到的文件)

if(isset($_POST["currency"]))
{
    $key = key($_POST);
    $value = $_POST["currency"];

    $params = array_merge($_GET, array($key => $value));
    $new_query_string = http_build_query($params);

    $url = (empty($_SERVER['HTTPS'])?"http://":"https://") . $_SERVER['REQUEST_URI'] . "?" . $new_query_string;
    var_dump($url);
}

从上面我的转储返回我的标题页的 url,即

var_dump($url); = mysiteurl/header.php?currency=USD

所以这是我的问题:我在标题中的下拉列表(因此在我网站中的所有页面上调用),我如何强制执行它,以便在选择一个选项时,我正在刷新的当前页面具有选定的选项附加到网址?

【问题讨论】:

    标签: php ajax drop-down-menu


    【解决方案1】:

    在您的 ajax 中使用 .done 回调来处理更改 window.location.href 属性(您只需附加您的货币参数键/值对):

    $(document).ready(function() {
        var url = "<?php echo file2.php;?>";
        $('#currency').change( function() {
           $.ajax({ 
               data: $('#currency').serialize(), 
               type: "POST",
               url: url, 
               success: function(response) { 
                   alert(response);
               }
           }).done(function() {
               window.location.href = window.location.href + "?currency="+$('#switchcurrency').val();
           });;
        });  
    }); 
    

    进一步阅读:

    http://api.jquery.com/jquery.ajax/

    https://developer.mozilla.org/en-US/docs/Web/API/Window/location

    【讨论】:

    • 虽然这里有一点遗漏,但效果很好:window.location.href = window.location.href + "?currency="+$('#switchcurrency').val();应该是:window.location.href = window.location.href + "?currency="+$('#currency').val();
    • 我可能错过了另外一件小事,当我在这样的页面上时会发生什么:mysiteurl.php/?someparameter。如果我从下拉列表中选择,我会得到这个:mysiteurl.php/?someparameter?currency=USD 而不是 mysiteurl.php/?someparameter&currency=USD。这方面有什么建议吗?
    • 修复了代码中select的id。对于另一个问题,您可以使用window.location objects 属性(上面链接)来确定 url 中是否已经有 GET 参数......所以你需要做出决定并添加一个条件来处理你如何附加你的货币参数(带 ? 或 &)
    【解决方案2】:

    试试这个

    <script>
    $(document).ready(function() {
        var url = "<?php echo file2.php;?>";
        $('#currency').change( function() {
           $.ajax({ 
               data: $('#switchcurrency').serialize(), 
               type: "POST",
               url: url, 
               success: function(response) { 
                     //Choose one!!
    
                   // similar behavior as an HTTP redirect
                      window.location.replace(response);
    
                  // similar behavior as clicking on a link
                     window.location.href = response;
    
               }
           });
        });  
    
    }); 
    </script>
    
    
    
     if(isset($_POST["currency"]))
    {
        $key = key($_POST);
        $value = $_POST["currency"];
    
        $params = array_merge($_GET, array($key => $value));
        $new_query_string = http_build_query($params);
    
        $url = (empty($_SERVER['HTTPS'])?"http://":"https://") . $_SERVER['REQUEST_URI'] . "?" . $new_query_string;
        exit($url);
    }
    

    【讨论】:

    • 感谢您的回答,但这会将我重定向到标题页面,正如我在问题中所说的那样
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-02-22
    • 1970-01-01
    • 1970-01-01
    • 2012-09-02
    • 2014-03-25
    相关资源
    最近更新 更多