使用 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-Request - 参数（在本例中，我们使用“slider”）。

有什么问题吗？

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 进行的。
• 查看我的评论，了解主页重定向后如何处理。