如何在PHP处理表单时显示图像或文本

How to display an image or text while PHP is processing a form

本文关键字：显示图 显示 图像 文本 表单 PHP 处理      更新时间：2023-09-26

我很确定以前有人问过这个问题，但我找不到这样的问题。

我想在提交表单时向用户显示图像或文本，表单通过$_POST发送值，并在同一页面中接收，以进行DBO插入和文件上传(move_uploaded_file(。

我不确定这是否可以用jQuery、JavaScript甚至PHP完成，所以我请求你能为我提供任何帮助

我尝试过的东西：

$(document).ready(function(){
  $("#btn").click(function(){
    $("#content").empty().html('<img src="waiting.gif">');
   });
);

有了这个，我可以在用户单击按钮表单(#btn(时显示图像，但我不知道如何停止它并将其"返回"到表单，也不知道如何在流程完成时显示消息。

我使用这个函数来包装jQuery的AJAX POST函数。

function POST(_url,_data,_container,success,anim) {
        var _loader = null
        var doAJAX = function() {
            $.post(_url,_data,success);
        };
        if(typeof anim===undefined) {
            doAJAX();
        } else if(_container!=null) {
            switch(anim) {
                case 'loading':
                    _loader = $("<div class='LoadingAnim' style='display:none;'></div>");
                    _container.empty();
                    _loader.appendTo(_container).fadeIn('fast',doAJAX);
                    break;
                case 'fade':
                    _container.fadeOut('fast',doAJAX);
                    break;
                case 'slide':
                    _container.slideUp('fast',doAJAX);
                    break;
            }
        }
    }

我添加了_container参数，它是用于保存内容的div的jQuery对象。可选的anim参数可以更改用于清除容器的动画。此外，加载图像是通过在清除容器后将div插入到容器中来实现的。该div有一个类，该类将其样式设置为具有动画加载图标，并在其父容器中正确居中。doAJAX函数过去更长，但我不得不删掉一些，因为它对答案没有用，这就是为什么它看起来不一定是空的。如果使用除"加载"之外的任何anim选项，请确保在success函数中将容器重置为可见。

使用类似于此

POST('some-script.php',{data: values},$('#containerToPrintTo'),function(data) {
     //Do some error checking or get the return from data and insert it.
     }, 'loading');

您需要AJAX。您可以使用jQuery，也可以手动执行。

如果你不想使用AJAX。。。那么您将无法检测表单何时已完全提交。但是，您可以显示同一页，并在回发后用您的"消息"替换表单。

希望能有所帮助。

如果您没有使用AJAX，并且有一个完整的页面回发，您不必担心清除等待的图像，因为整个页面都会刷新。

但在提交之前，需要注意不要"清空"或删除表单内容/值，并验证#btn是否确实提交了表单。

$("#btn").on('click', function(e){
    e.preventDefault();
    //TODO:
    //INSERT YOUR WAITING IMAGE, WHICH CAN BE AN OVERLAY ON THE FORM
    //GET FORM (USING ID/NAME) AND SUBMIT
});

function maskPage($) {
  var mask_div = document.createElement('div');
  $(mask_div).css({
    background: 'black',
    opacity: '0.7',
    width: '100%',
    height: '100%',
    position: 'absolute',
    top: 0,
    left: 0,
    display: 'none',
    zIndex: 100
  }).attr('id', 'page_mask');
  $('body').append(mask_div);    
}

 $(document).ready(function(){
      $("#btn").click(function(){
      if($('#page_mask').length === 0) {
        maskPage($);
       }
       // do your work 
       $('#page_mask').fadeIn('fast');
       });
    );

像这样安全地打电话。您可以播放div的背景和不透明度。

相关文章：