Javascript$.get并不总是在点击时更新

Javascript $.get not always updating on click

本文关键字：更新 get Javascript      更新时间：2023-09-26

我想知道为什么当我点击按钮时，我的代码没有更新ajax调用。它只在我刷新页面后显示。下面的我的代码：

以下是完整的jquery/javascript代码：$（document）.ready（function（）｛$（"#savesubminbutton"）.live（'click'，function（）{

           $.post('save-sub-main.php',  $("#submainform").serialize(), function(data) {
              $('#submain_save_message').html(data);
            });
            $('#submain').hide();
            // Load data after submission
                $.get('getsubmain.php', { mainid: "<?php echo $_GET['id'];  ?>" },
                function(data) {
                  $('.submain_message').html(data);
                });

        });
    }); //end

这是HTML表单部分

<div id="submain">
    <form id="submainform" name="submainform" method="post" action="" enctype="multipart/form-data" >
    <table><input type="hidden" name="MAX_FILE_SIZE" value="1000000" />
    <!--<tr><td width="289" align="right">Jou naam:</td><td><input type="text" name="yourname" id="yourname" style="background-color:lightblue;" /></td></tr>
    <tr><td width="289" align="right">Jou e-posadres:</td><td><input type="text" name="email" id="email" style="background-color:lightblue;"/></td></tr>-->
    <tr><td width="289" align="right">Naam van die geskiedkundige figuur (bv. Jan van Riebeeck):</td><td><input type="text" name="name" id="name" /></td></tr>
    <tr><td width="289" align="right">Foto van die geskiedkundige figuur :</td><td><input id="file_upload" name="file_upload" type="file" /></td></tr>
    <tr><td width="289" align="right"><div id="filname"></div></td><td><input id="filename2" name="image" type="hidden" value=""  /></td></tr>
    <!--<tr><td width="289" align="right">Naam van jou inskrywing :</td><td><input type="text" name="title" id="title" /></td></tr>-->
    <tr><td width="289" align="right">Datum waarop die inskrywing gemaak is (bv. 1652):</td><td><input type="text" name="date" id="date" /></td></tr>
    <tr><td width="289" align="right">Status update (bv. Wat sien ek daar in die verte? Is dit 'n tafel?):</td><td><textarea name="message" id="message"></textarea></td></tr>
    <input type="hidden" name="mainid" value="<?php echo $_GET['id']; ?>" />
    <tr><td></td><td><div id="savesubmainbutton" style="color:blue"><input type="button" value="Save" /></div></td></tr>
    </table>
    </form>

请记住，您的ajax调用是异步的，因此在执行get之前，post没有返回数据-如图所示更改代码。

 $(document).ready(function() { 
// Save SubMain data
    $("#savesubmainbutton").live('click',function(){
       $.post('save-sub-main.php',  $("#submainform").serialize(), function(data) {
          $('#submain_save_message').html(data);
          $('#submain').hide();
        // Load data after submission
            $.get('getsubmain.php', { mainid: "<?php echo $_GET['id'];  ?>" },
            function(data) {
              $('.submain_message').html(data);
            });
        });


    });

})//结束

您的$.get不会在$.post的回调中被调用。因此，$.get正在运行，但由于数据尚未提交，它不会返回任何新数据。

如果您将$.get移动到回调内部，它应该按预期工作。

尽管不麻烦进行第二次ajax调用，而只是在$.post的返回数据中返回$.get的数据会更好、更高效。

如下所示，假设您将数据作为json对象返回，这样您就可以简单地为响应的两个不同部分提供两个变量。

  $.post('save-sub-main.php',  $("#submainform").serialize(), function(data) {
       $('#submain_save_message').html(data.save_message);
       $('#submain').hide();
       $('.submain_message').html(data.return_data);
     },'json');

Get请求可以由浏览器缓存，如果它们使用相同的参数，请参阅此处了解更多详细信息。

您可以使用POST或添加一个伪参数，比如ticks或current time，这些参数会有所不同，以强制不缓存GET。

一些观察结果。如果要替换默认的提交行为，最好确保取消单击事件，否则将发生表单的默认行为。

此外，post是异步的，因此您需要确保您想要执行的任何后续工作都是在回调函数中完成的。

相关文章：