Question

我很确定以前曾经问过，但我找不到这样的东西。

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

我不确定是否可以使用jQuery，JavaScript甚至PHP来完成，所以我要求你提供任何帮助。

我尝试过的事情：

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

有了这个，我可以在用户点击按钮表单（#btn）时显示图像，但我不知道如何阻止它并将其“返回”返回到表单或如何显示消息时这个过程已经完成。

Answer 1

我使用这个函数来包装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');

Answer 2

您需要AJAX。您可以使用jQuery或手动执行此操作。

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

希望它有所帮助。

Answer 3

如果你没有使用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
});

Answer 4

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的背景和不透明度。

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

4 个答案: