AJAX 将变量从范围滑块传递到 PHP 查询答案

【问题标题】：AJAX to pass variable from range slider into PHP queryAJAX 将变量从范围滑块传递到 PHP 查询
【发布时间】：2020-09-30 10:19:34
【问题描述】：

我正在尝试将 javascript 变量从范围滑块传递到 php 查询中。

因此，当用户将范围滑块滑动到“44”时，我的 wordpress 主题的首页会显示所有标记为“44”的帖子。

我想在不刷新的情况下执行此操作，因此决定尝试 AJAX，我对 AJAX 还很陌生，并且努力想知道哪里出了问题。

所以我的范围滑块：

<input id="ex2" type="range" min="0" max="360" step="1" />

在我的 script.js 中：

var slider = document.getElementById("ex2");

slider.onchange = function() {
   
var id = $(this).val();

$.ajax({
type: "POST",
dataType: "json",
url: "http://localhost/wordpress/wp-admin/admin-ajax.php", 
data: {
    action:'get_data', 
    id: id
},

success:function(data) {
alert("result: " + data);
}
});
};

然后我通过我的functions.php页面反弹这个值..也许我可以避免并直接进入我的首页？我的functions.php页面中的代码：

 function get_data() {

    echo $_POST['id'];
    wp_die();  //die();
}

add_action( 'wp_ajax_nopriv_get_data', 'get_data' );
add_action( 'wp_ajax_get_data', 'get_data' );

然后尝试在 front-page.php 上输入我的 php 查询：

<?php

$slider   = $_POST['id'];

$query    = new WP_Query( array( 'tag' => $slider ) );

if ( $query->have_posts() ) :

while ( $query->have_posts() ) : $query->the_post();?>

    <?php the_content();?>

<?php endwhile; endif;?>

我对 PHP 和 AJAX 非常陌生，不完全了解 post 或 echo 函数，如果有人可以帮助我编写代码，那就太棒了。

谢谢！

【问题讨论】：

当你昨天问这个问题时，我们已经对此进行了扩展讨论 - Dificulty recalling range slider variable from an Ajax post to use within php query on front-page of wordpress site
我已经尝试在那里向您解释，您当前的方法没有多大意义，但我看到您在这里再次尝试同样的事情。
嘿，你并没有真正解释任何替代方案，或者清楚地向我解释为什么我正在尝试的东西没有意义。我看到其他问题试图实现类似的事情，从我的研究来看，使用 AJAX 似乎是最好的可能性，但我是新手，知道我可能犯了很大的错误，但我正在寻找一些关于如何编写的指导代码正确，昨天你只是引用我自己的话来强调我不知道我在做什么。我不知道我在做什么，这就是为什么我在这里问问题。我昨天就在聊天室里！
是的，我做过。首先，我向您解释过，您通过 AJAX 发送的 POST 参数在您之后请求首页时将不可用，因为这是两个不同的独立请求。通过chat.stackoverflow.com/transcript/message/50569445#50569445 ff.，我还为您提供了可供选择的方法。如果你现在证明，这些解释显然被你置若罔闻，这并不能完全激励我现在再次处理你的问题。
但是通过表单提交范围滑块值需要刷新页面？我想避免。如何使用 $_POST 将其传递到我的 php 中？

标签： javascript php jquery ajax wordpress

【解决方案1】：

它与页面刷新一起使用，但可以使用 POST 参数，不需要 scripts.js 或 functions.php 中的任何额外代码，只需在我的首页和范围滑块上（在我的页脚）：

我的范围滑块代码：

<form action="http://localhost/wordpress/" method="POST">
<input id="ex2" name="ex2" onchange="this.form.submit()" 
type="range" min="0" max="360" step="1" />
</form>

在我的首页：

<?php

$slider = $_POST['ex2'];

$query    = new WP_Query( array( 'tag' => $slider ) );

if ( $query->have_posts() ) :

while ( $query->have_posts() ) : $query->the_post();?>

    <?php the_content();?>

<?php endwhile; endif;?>

并且正在工作！

【讨论】：

【解决方案2】：

试试这样的东西...

<script src="jquery.js"></script>
<form action="#" method="POST">
<input id="ex2" name="ex2" onchange="this.form.submit()" 
type="range" min="0" max="360" step="1" />
</form>
<script>
var slider = document.getElementById("ex2");
slider.onchange = function() {
    var id = $(this).val();
    var Url = "http://localhost/test2.php?func=myFunc";
    $.ajax({
        type: "POST",
        dataType: "json",
        url: Url,
        data: {
            id: id
        },
        success:function(data) {
        // alert("result: " + data);
        console.log(data);
        }
    });
};
</script>

test2.php

<?php
function myFunc($id)
{
    echo $id;
}
if(isset($_GET['func']) && function_exists($_GET['func'])){
    if($_GET['func'] == 'myFunc') { 
        if(isset($_POST['id'])){
            $_GET['func']($_POST['id']);
        }
    }
}
?>

【讨论】：