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

Posted 2023-03-05

【中文标题】使用 jQuery AJAX 检索数据而不在 php 中重新加载页面

【英文标题】：Retrieving Data with jQuery AJAX Without Reloading Page in php

【发布时间】：2016-02-23 18:02:50

【问题描述】：

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

这里是代码

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()' 然后页面停止刷新但不更改数据。

【问题讨论】：

到目前为止你尝试了什么..？

欢迎来到 *** 请阅读此***.com/help/how-to-ask

请用代码解释您的问题。

如何停止刷新页面并在点击时获取数据。

topuser_load.php 代码在这里

【参考方案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();

        
    );

【讨论】：

在选择中删除这个OnChange ='document.frmtopdevotees.submit()'

并在 ajax 成功添加这个，$('#frmtopdevotees').submit();

我将在选择更改时删除，但无法检索数据。

成功：$('#frmtopdevotees').submit() function (response) $('themonth').append(response);错误是意外的令牌函数

您必须点击错误功能而不是成功功能。也许这就是为什么什么都没有显示。

【参考方案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>";
?>

【讨论】：

是的，只要您的任何一个选择选项发生变化，我都想触发服务器调用而不刷新页面 (AJAX)。

你可以试试上面的sn-p。

他们没有检索数据。

你能告诉我你的ajax响应是成功还是错误。

drive.google.com/open?id=0B1M801htMZ1ORkYwbnFXZ0pPX2s 这是 2 页代码....