使用AJAX将值从范围滑块传递到wordpress网站首页的PHP

Question

所以我在整个网站的页脚有一个范围滑块：

<input id="ex1" type="range" min="0" max="60" step="1" />
<div id='mydiv'>test</div>

在slideStop上，我重定向到我的主页：

$(document).ready(function(){
$('#ex1').on('change', function () {
if (document.location.href.indexOf('category') > -1)
{ 
window.location.href = 'http://localhost/wordpress/'; 
}
var id = $(this).val();
$.ajax({
type: "post",
dataType: "json",
url: "/wp-admin/admin-ajax.php", 
data: {
action:'get_data', 
id: id
},
success:function(data) {
$('#mydiv').html(data);
}
});
});
});

我想把范围滑块的值传递到wordpress首页的php中。这是代码：

<?php
$query = new WP_Query( array( 'tag' => ' ***INSERT RANGE SLIDER VALUE HERE*** ' ) );
if ( $query->have_posts() ) :
while ( $query->have_posts() ) : $query->the_post();?>
<?php the_content();?>
<?php endwhile; endif;?>

因此，如果范围滑块停止在44，主页将显示所有标记为"44"的帖子。

我以前没有使用过AJAX，很难理解从哪里开始。

谢谢！

Answer 1

简单的方法是传递var ass url参数。在您的首页上，只需阅读此参数并将其设置为查询的参数。你只需要更改文件中的某些部分。

在以下部分更改js:

window.location.href = "http://localhost/wordpress?slider=12";

这里没有魔法，只需在你的url中添加任何参数，在这个例子中：12。

---

在您的php文件中：

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

只需我们为您的url参数发送一个GET请求(在本例中，我们使用"滑块"(。

有什么问题吗？

Answer 2

尝试使用此代码-

$(document).ready(function(){
$("#ex1").change(function() {  
var field = $(this).val();
$.ajax({
url:"ajax-action-file.php",
method:"POST",
data:{value:field},
success:function(data) {
$('#Response-Div').html(data);
}
});
});

Answer 3

这将在用户交互后向div输出滑块的当前值。

HTML

<input id='ex1' type='range' min='0' max='60' step='1'>
<div id='mydiv'></div>

JS(jQuery 3.4.1

$("#ex1").change(function() {  
var id = $('#ex1').val();
$.ajax({
url:"myserverfile.php",
method:"POST",
data:{id:id},
dataType:"text",
success:function(data) {
$('#mydiv').html(data);
}
});
});

• 我已经测试了这个代码
  
• 我在这里没有包含任何PHP，因为我所做的只是通过['id']的POST索引回显滑块的值，但它证明了通信是通过AJAX实现的
• 查看我的评论，了解如何在主页重定向后处理问题