0

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

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

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

我尝试过的事情：

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

#btn有了这个，我可以在用户单击按钮表单（

4

4 回答 4

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');
于 2013-05-16T00:11:34.977 回答
0

如果你没有使用 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
});
于 2013-05-16T00:23:46.883 回答
0 
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的背景和不透明度。

于 2013-05-16T02:37:44.837 回答
0

你需要AJAX。您可以使用jQuery或手动操作。

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

希望能帮助到你。

于 2013-05-16T00:12:17.460 回答