Php 使用Post/blockUI/ajaxform的Ajax提交表单

我有一个表单（三组复选框），用户可以在其中选择设备，然后选择要在其上运行的命令。在检查用户希望运行哪些设备和命令后，他们单击“继续”按钮

现在，我只是让表单数据通过POST发送到另一个PHP页面，在那里信息被解码。然后，从数据库中提取设备的信息，并将其作为参数插入到使用PHPs EXEC命令运行的TCL脚本中。脚本大约需要15秒才能返回

但是，我不必加载另一个页面，而是希望使用JS$.blockUI（）阻止该页面，提交表单，等待脚本返回，然后在表单以前所在的位置显示返回的内容。然后，显然解除了对UI的阻塞

我正在为我的项目使用Zend框架。我有以下资料：

声明格式：

<form name="runcommands" action="/commands/execute/" method="post">

三个不同的复选框组（这是一个动态生成的表单）：

“$command
”；
“$command
”；
“$hostname
”；

我的javascript/ajax知识非常有限。这是我在JS中做的第一件事。该站点的其余部分几乎都是纯PHP/HTML。以下是我为JS所做的尝试。显然，它不起作用

<script type="text/javascript">
        // Globals
        // prepare the form when the DOM is ready 

        var formd = ""; 

        $(document).ready(function() { 
            //$('#messageCenter').hide();

            //Form Ajax
            var options = { 
                beforeSubmit: beforeSubmit,  // pre-submit callback 
                success: showResponse  // post-submit callback 
            }; 
            $('#runcommands').ajaxForm(options); // bind form using 'ajaxForm' 

            $.ajax({
                type: "post",
                url: "/commands/execute/",
                data: {
                    formd: formd,
                    serverResponse: data.message
                },
                complete: finishAjax
            });
            $.unblockUI();

        }); 

        function finishAjax (data) {
            var ret = data.responseText;
            alert(ret);
        }

        function beforeSubmit (formData, jqForm, options) { 
            formd = $.param(formData); 
            $.blockUI();
            return true; 
        } 

        function showResponse(responseText, statusText, xhr, $form)  { 
            ret = responseText;
            alert(ret);
        } 

    </script>

//全球的
//当DOM就绪时准备表单
var formd=“”；
$（文档）.ready（函数（）{
//$（'#messageCenter'）.hide（）；
//表单Ajax
变量选项={
beforeSubmit:beforeSubmit，//预提交回调
成功：showResponse//post-submit回调
}; 
$（'#runcommands'）.ajaxForm（选项）；//使用'ajaxForm'绑定表单
$.ajax({
类型：“post”，
url:“/commands/execute/”，
数据：{
formd:formd，
serverResponse:data.message
},
完成：finishAjax
});
$.unbui（）；
}); 
函数finishAjax（数据）{
var ret=data.responseText；
警报（ret）；
}
函数beforeSubmit（formData、jqForm、options）{
formd=$.param（formData）；
$.blockUI（）；
返回true；
} 
函数showResponse（responseText，statusText，xhr，$form）{
ret=响应文本；
警报（ret）；
} 

在我的executephp页面中，我现在只回显脚本的输出。用另一种方式做会更好吗

感谢任何人的意见。我被困住了，不知道从这里到哪里去

Kevin有两种解决方案：

解决方案一：
目前，解除阻塞被称为Ajax请求的启动，但您要做的是在返回响应后执行。将取消阻止添加到完整功能：

<script type="text/javascript">
    // Globals
    // prepare the form when the DOM is ready 

    var formd = ""; 

    $(document).ready(function() { 
        //$('#messageCenter').hide();

        //Form Ajax
        var options = { 
            beforeSubmit: beforeSubmit,  // pre-submit callback 
            success: showResponse  // post-submit callback 
        }; 
        $('#runcommands').ajaxForm(options); // bind form using 'ajaxForm' 

        $.ajax({
            type: "post",
            url: "/commands/execute/",
            data: {
                formd: formd,
                serverResponse: data.message
            },
            complete: finishAjax
        });
    }); 

    function finishAjax (data) {
        var ret = data.responseText;
        alert(ret);
        $.unblockUI();
    }

    function beforeSubmit (formData, jqForm, options) { 
        formd = $.param(formData); 
        $.blockUI();
        return true; 
    } 

    function showResponse(responseText, statusText, xhr, $form)  { 
        ret = responseText;
        alert(ret);
    } 

</script>

两种解决方案：

解决方案一：
目前，解除阻塞被称为Ajax请求的启动，但您要做的是在返回响应后执行。将取消阻止添加到完整功能：

<script type="text/javascript">
    // Globals
    // prepare the form when the DOM is ready 

    var formd = ""; 

    $(document).ready(function() { 
        //$('#messageCenter').hide();

        //Form Ajax
        var options = { 
            beforeSubmit: beforeSubmit,  // pre-submit callback 
            success: showResponse  // post-submit callback 
        }; 
        $('#runcommands').ajaxForm(options); // bind form using 'ajaxForm' 

        $.ajax({
            type: "post",
            url: "/commands/execute/",
            data: {
                formd: formd,
                serverResponse: data.message
            },
            complete: finishAjax
        });
    }); 

    function finishAjax (data) {
        var ret = data.responseText;
        alert(ret);
        $.unblockUI();
    }

    function beforeSubmit (formData, jqForm, options) { 
        formd = $.param(formData); 
        $.blockUI();
        return true; 
    } 

    function showResponse(responseText, statusText, xhr, $form)  { 
        ret = responseText;
        alert(ret);
    } 

</script>

 $.ajax({
        type: "post",
        url: "/commands/execute/",
        async: false,
        data: {
            formd: formd,
            serverResponse: data.message
        },
        complete: finishAjax
    });