Javascript Ajax在操作后加载新消息_Javascript_Jquery_Ajax

Javascript Ajax在操作后加载新消息

javascript jquery ajax

Javascript Ajax在操作后加载新消息,javascript,jquery,ajax,Javascript,Jquery,Ajax,好的，我编写了用于向数据库添加数据的ajax脚本。我的问题是，当我添加数据时，相同的消息保持不变，所以很难看到新操作是否完成。是在显示消息后隐藏消息，并在下一个ajax操作后显示新消息的任何方法。我的代码是 function change_data(id){ var data = document.getElementById('update'+id).innerText; var new_data = prompt(data,'Unesite novi podatak!').t

好的，我编写了用于向数据库添加数据的ajax脚本。我的问题是，当我添加数据时，相同的消息保持不变，所以很难看到新操作是否完成。是在显示消息后隐藏消息，并在下一个ajax操作后显示新消息的任何方法。我的代码是

function change_data(id){

    var data = document.getElementById('update'+id).innerText;

  var new_data = prompt(data,'Unesite novi podatak!').trim();

 if(new_data !=='' && new_data !== null){
    $.ajax({
    url: "<?php echo base_url().'admin/crud/changes'?>",
    type: 'post',
    data: {'id' : id, 'new_data':new_data },
    success: function(resp){
          if(resp==""){

         $('#warning').html('Podatak je azuriran');

         $('#update'+id).html(new_data);

      }
    }
    });
}

您可以将其隐藏在成功回调函数中：-

if(new_data !=='' && new_data !== null){

    $('#warning').html('Podatak je azuriran');

    $.ajax({
    url: "<?php echo base_url().'admin/crud/changes'?>",
    type: 'post',
    data: {'id' : id, 'new_data':new_data },
    success: function(resp){
          if(resp==""){

         $('#warning').html('');

         $('#update'+id).html(new_data);

      }
    }
    });

设置超时功能如下

$('#warning').html('Podatak je azuriran');
setTimeout(function() {
    $('#warning').html('');
    $('#warning').hide('');
}, 2000);

其中2000是要执行此功能的毫秒数

我将使用fadeOut，这是jquery的一部分，如下所示：抱歉，没有实际的ajax调用，它将使元素在毫秒数内淡出，即此代码块中的1000，或链接演示中的2000

<html>
<head>
    <title></title>
    <script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#Button').click(function () {
                $('#MessageOutput').show();
                $('#MessageOutput').html("Sending data..");
                // Do ajax call

                // In "Success":
                $('#MessageOutput').html("Data transfer done");
                $('#MessageOutput').fadeOut(1000);
                //$('#MessageOutput').delay(2000).fadeOut(1000);
                //$('#MessageOutput').delay(2000).hide(0); 
                // Note: In the last example: you must supply a 
                // 0 as an argument for .hide(), otherwise hide is not animated, and won't
                // be delayed by .delay (it will just hide it immediately
            });
        });
    </script>
</head>
<body>
    <button id="Button">asdasd</button>
    <div id="MessageOutput">

    </div>
</body>
</html>

您可以使用jquery延迟和淡出功能

$('#warning').html('Podatak je azuriran').delay(3000).fadeOut(300)

再次调用该函数后，可以将警告div设为空也可以在3或5秒后填充警告div时清空警告div

使用javascript函数setTimeout

尝试调用fadeIn first使div可见（如果尚未可见）$'warning'.html'Podatak je azuriran'.fadeIn'slow'.delay3000.fadeOut300

$('#warning').html('Podatak je azuriran').delay(3000).fadeOut(300)