为什么我的 Dojo 表单中的 xhrpost 不会被调用？答案

【问题标题】：Why my xhrpost in a Dojo Form won't get call?为什么我的 Dojo 表单中的 xhrpost 不会被调用？
【发布时间】：2011-11-16 09:26:36
【问题描述】：

亲爱的社区，你好。

这两天我遇到了一些问题，我无法解决。问题是我有一个这样定义的 Dojo 表单：

<div id="reportBulananDialog" jsId="reportBulananDialog" dojoType="dijit.Dialog" title="Laporan Bulanan" draggable="true">
        <div dojoType="dijit.form.Form" id="reportBulananForm" jsId="reportBulananForm" action="action/display_reportBulanan.php" method="post">
...

script.js 文件中的连接调用以这种方式定义：

dojo.connect(mnuLaporanBulanan, "onClick", null, function(e) {
        dijit.byId("reportBulananDialog").show();
    });
 dojo.connect(reportBulananForm, "onSubmit", null, doReportBulananForm);
    dojo.connect(reportBulananCancel, "onClick", null, function(e) {
        reportBulananDialog.hide();
    });

您可以看到我将 onSubmit 事件连接到这样定义的函数doReportBulananForm：

function doReportBulananForm()
{   
    alert('test1');
    dojo.xhrPost({
        form: this.domNode,
        handleAs: "json",
        load: function(data) {
            alert("after call: " + data);
            if(data.success) {
                reportBulananDialog.hide();
                okDialog.set("title","Menampilkan report");
                okDialogMsg.innerHTML = "Report";
                okDialog.show();
            }
            else {
                okDialog.set("title","Error creating group");
                okDialogMsg.innerHTML = data.error;
                okDialog.show();
            }
        },
        error: function(error) {
            okDialog.set("title","Error creating group");
            okDialogMsg.innerHTML = error;
            okDialog.show();
            alert("error " + data);
        }
    });
    alert('test2');
}

问题是，应用程序总是将应用程序流重定向到文件action/display_reportBulanan.php，而不是处理它的 json 输出..

这很混乱，我做错了什么？

谢谢，埃科

【问题讨论】：

标签： dojo

【解决方案1】：

我认为您必须阻止默认表单提交。在您的 onSubmit 处理程序中，改为执行此操作：

function doReportBulananForm(evt)
{   
    evt.preventDefault();
    alert('test1');
    // The rest of your code goes here
}

您还可以在连接中为您的函数调用添加一个事件参数：

dojo.connect(reportBulananForm, "onSubmit", null, doReportBulananForm(evt));

详情请看本页：http://dojotoolkit.org/reference-guide/quickstart/events.html

【讨论】：

谢谢@Philippe！是的，我省略了 evt 作为doReportBulanan 的参数。但在dojo.connect 中，我认为没有必要使用参数声明doReportBulananForm。我把它作为以前的电话。

【解决方案2】：

您需要禁用默认表单提交。您可以在 doReportBulananForm 函数中返回 false 或使用以下代码：

function doReportBulananForm(e) {
    dojo.stopEvent(e);
}

有关详细信息，请参阅道场的测试用例。见http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/form/test_Form_onsubmit.html

【讨论】：

谢谢@AlexCheng。但我发现 Philippe 的答案更接近我现有的代码。