使用 jQuery AJAX 检索数据而不在 php 中重新加载页面

Question

我尝试在单击选择选项时停止刷新页面，但是当我停止刷新页面时，无法获取数据。

这里是代码

echo "<form name='frmtopdevotees' method='post' action='topuser_load.php'>
                <h4>select month  <select id='seldrp' name='themonth' OnChange ='document.frmtopdevotees.submit()'>     


                        $optionsmonths
                </select> 
                <select name='topdevotees' id='seldrp' OnChange ='document.frmtopdevotees.submit()'>
                        <option value=10 $M10>Top 10</option>
                        <option value=20 $M20>Top 20</option>
                        <option value=50 $M50>Top 50</option>
                        <option value=100 $M100>Top 100</option>
                </select>   </h4>               
        </form>";
?>

<script>
    $('frmtopdevotees').submit(function (e) {
        e.preventDefault();
        return false;
    });

    $('themonth').onchange(function () {
        $.ajax({
            var value = $('themonth').val();
                    type: 'post',
            data: {
                topdevotees: topdevotees,
                themonth: themonth
            },
            url: "topuser_load.php?topdevotees=" + topdevotees + "&themonth=" + themonth,
            success: function (response) {
                $('themonth').append(response);

            }
        });
    });

</script>

当我删除 Onchange = 'document.frmtopdevotees.submit()' 然后页面停止刷新但不更改数据。

Answer 1

在 ajax 中将 name 更改为 id，

$('#seldrp').onchange(function(){
   ^     ^
// ajax here                          
});

而且你在 ajax 中有语法错误。

   var themonth = $('#seldrp').val();
   var topdevotee = $('#topdevotees').val();//topdevotess should be the id of 2nd select box.
   $.ajax({            
        type: 'post',
        data: {
            topdevotees: topdevotees,
            themonth: themonth
        },
        async:false,// this line for waiting for the ajax response.
        url: "topuser_load.php?topdevotees=" + topdevotees + "&themonth=" + themonth,
        success: function (response) {
            $('themonth').append(response);
            $('#frmtopdevotees').submit();

        }
    });

Answer 2

从您的代码中，我可以理解的是，只要您的任何一个选择选项发生更改，您都希望触发服务器调用而不刷新页面 (AJAX)。

发布的代码中有错误。以下是我的观察 -

1. 整个页面只能有一个 ID。您已经在几个地方使用了“seldrp”。

2. 如果你想要 AJAX 功能，你应该避免调用表单的 submit() 函数。

3. AJAX 语法错误应该如下 -

   $.ajax({
       url : "topuser_load.php?topdevotees=" + topdevotees + "&themonth=" + themonth,
       method: "post",
       data: {
           topdevotees: topdevotees,
           themonth: themonth
       }, // can even put this in variable and JSON stringify it
       success: function (response) {
           $('themonth').append(response);
   
       }
   });
   

现在进入解决方案部分： 我会这样做 - 1. 只听 JQUERY 中的选择变化 2. 一旦触发了选择更改，就会进行 AJAX 调用并返回响应。 修改后的代码是-

<script>

    $('select').on('change', function (e) {
        var month = $('#seldrp1').val();
        var topdevotee = $('#seldrp2').val();

        // call ajax here -

        $.ajax({
            url: "topuser_load.php?topdevotees=" + topdevotee + "&themonth=" + month,
            method: "post",
            data : JSON.stringify({
                topdevotees: topdevotee,
                themonth: month
            }),
            success : function(response){
                $('themonth').append(response);
            },
            error : function(err){
                // handle error here
            }
        });

    });

</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
echo "<form name='frmtopdevotees'>
    <h4>select month  <select id='seldrp1' name='themonth'>

        $optionsmonths
    </select>
        <select name='topdevotees' id='seldrp2'>
            <option value=10 $M10>Top 10</option>
            <option value=20 $M20>Top 20</option>
            <option value=50 $M50>Top 50</option>
            <option value=100 $M100>Top 100</option>
        </select>   </h4>
</form>";
?>