Question

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

这里是代码

age number(3)

当我删除Onchange =＆＃39; document.frmtopdevotees.submit（）＆＃39;然后页面停止刷新而不是数据更改。

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）的情况下触发服务器调用。

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

整个页面中只能有一个ID。你曾在几个地方使用'seldrp'。
如果你想要AJAX功能，你应该避免调用表单的submit（）函数。

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>";
?>

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

2 个答案: