使用AJAX

Question

首先感谢您花时间阅读我的问题。我知道（在写这个话题的时候告诉我）这个问题已被问了很多次。但我的情况略有不同。我有一个使用dropdown menu的工作 AJAX脚本。但我想将dropdown转换为radio button menu。

脚本（我在互联网上找到）也用于分页，所以，如果可能的话，我希望保持脚本完好无损。并且只更改var sortBy = $('#sortBy').val;部分。因为这个剧本对我来说就像一个魅力。

我一直在阅读来自其他SO用户的各种提示/答案，但我似乎无法让它发挥作用。任何帮助将不胜感激。

这是AJAX脚本：

function searchFilter(page_num) {
    page_num = page_num?page_num:0;
    var keywords = $('#keywords').val();
    var sortBy = $('#sortBy').val();
    $.ajax({
        type: 'POST',
        url: '/getData.php',
        data:'page='+page_num+'&keywords='+keywords+'&sortBy='+sortBy,
        beforeSend: function () {
            $('.loading-overlay').show();
        },
        success: function (html) {
            $('#posts_content').html(html);
            $('.loading-overlay').fadeOut("slow");
        }
    });
}

HTML：

<select id="sortBy" onchange="searchFilter()">
    <option value="">Sort By</option>
    <option value="asc">Ascending</option>
    <option value="desc">Descending</option>
</select>

最后但没有租用getData.php：

if(isset($_POST['page'])){
    //Include pagination class file
    include('navigation.php');

    //Include database configuration file
    include('server.php');

    $start = !empty($_POST['page'])?$_POST['page']:0;
    $limit = 6;

    //set conditions for search
    $whereSQL = $orderSQL = '';
    $keywords = $_POST['keywords'];
    $sortBy = $_POST['sortBy'];
    if(!empty($keywords)){
        $whereSQL = "WHERE title LIKE '%".$keywords."%'";
    }
    if(!empty($sortBy)){
        $orderSQL = " ORDER BY id ".$sortBy;
    }else{
        $orderSQL = " ORDER BY id DESC ";
    }

    //get number of rows
    $queryNum = $db->query("SELECT COUNT(*) as postNum FROM MirrorWebProductsExpanded WHERE cat = '1' ".$orderSQL);

我尝试使用以下HTML将var sortBy = $('#sortBy').val();更改为van sortBy = $('input[name=select]:checked');：

<input type="radio"  name="select" value=""/>Radio 1
<input type="radio"  name="select" value="1"/>Radio 2
<input type="radio"  name="select" value="2"/>Radio 3

但这不起作用。它只是选择单选按钮而已。我尝试过使用alert函数：

$(function() {
    $(document).on('change', '[name="select"]' , function(){
    var val = $('[name="select"]:checked').val();
    alert(val);
});

但是再一次，没有警告......任何帮助，关于如何通过AJAX发送单选按钮值。再次感谢！

Answer 1

您需要使用'[name="select"]'而不是$(function() { $(document).on('change', 'input[name="select"]', function() { searchFilter($(this).val()); }); });，这是您的错误，请参阅您的代码工作

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="select" value="1" />Radio 1
<input type="radio" name="select" value="2" />Radio 2
<input type="radio" name="select" value="3" />Radio 3

param

修改

理想的方法是将另一个searchfilter()添加到您的函数page_num以及sortBy说param并查看您的函数，似乎page_num可以是可选的让我们将param移到最后，并在开头添加一个名为sortBy的新searchfiletr(sortBy)，这样您可以调用page_num这样的函数，如果您不想通过function searchFilter(sortBy,page_num) { page_num = page_num?page_num:0; var keywords = $('#keywords').val(); $.ajax({ type: 'POST', url: '/getData.php', data:'page='+page_num+'&keywords='+keywords+'&sortBy='+sortBy, beforeSend: function () { $('.loading-overlay').show(); }, success: function (html) { $('#posts_content').html(html); $('.loading-overlay').fadeOut("slow"); } }); } 。

你的功能将像这样looik

array_push($this->$show_types, $show);

Answer 2

你几乎钉了它。只是一个小小的变化：

 <input type="radio" class="dummy"  name="select" value=""/>Radio 1
 <input type="radio" class="dummy" name="select" value="1"/>Radio 2
 <input type="radio" class="dummy" name="select" value="2"/>Radio 3

我在您的无线电中添加了虚拟类，这就是JQuery的样子

<script >
    $(function () {
        $('.dummy').change(function () {
            var val = $(this).val();
            alert(val);
        });
    });
</script>

经过测试和工作。

 $(function () {
            $('.dummy').change(function () {
                var val = $(this).val();
                alert(val);
            });
        });
    

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" class="dummy"  name="select" value=""/>Radio 1
     <input type="radio" class="dummy" name="select" value="1"/>Radio 2
     <input type="radio" class="dummy" name="select" value="2"/>Radio 3