表单的字段值使用Dojo进行Ajax调用

时间:2012-08-05 18:10:31

标签: ajax json dojo

我有一个这样的表格(来自小部件模板):

   '<div>' +
    '  <form data-dojo-type="dijit.form.Form" data-dojo-attach-point="form" method="POST"> ' +
    '    <label for="${id}_workspace">Workspace name</label>  ' +
    '    <input name="workspace" id="${id}_workspace" data-dojo-attach-point="workspace" data-dojo-type="app.ValidationWorkspace" />' +
    '    <label for="${id}_password1">Password</label>  ' +
    '    <input name="password[0]" id="${id}_password1" data-dojo-attach-point="password1" data-dojo-type="app.ValidationPassword" />' +
    '    <label for="${id}_password1">Confirm password</label>  ' +
    '    <input name="password[1]" id="${id}_password2" data-dojo-attach-point="password2" data-dojo-type="app.ValidationPassword" />' +
    '    <input type="submit" data-dojo-attach-point="button" data-dojo-type="app.BusyButton" label="Create!" />' +
    '  </form>' +
    '</div>',

在代码中,我写道:

        data = {};
        data.workspace = that.workspace.get('value');
        data.password = [];
        data.password[0] = that.password1.get('value');
        data.password[1] = that.password2.get('value');

        // Store the data 
        g.stores.workspacesAnon.put(data).then(
          function(res){
            console.log("Jsonrest put(data) returned OK: " + json.toJson(res) );
            that.button.cancel();
          }
        );

两个实际问题:

  1. 如果我使用that.form.value.email而不是that.password1.get('value'),有时会将过时的值提交给表单(!)。例如,如果我在password2字段中键入内容并立即点击输入,那么实际提交是否发生在Dojo中的预期?它怎么会发生?

  2. 是否有更好的方法来获取表单的值,以便'password [0]'和'password [1]'自动成为一个数组等?

2 个答案:

答案 0 :(得分:1)

dijit.form下的每个小部件都会确保使用其值更新具有正确名称的一个表单元素,即使这些值类似于过滤选择单击或日历中的日期。

话虽如此,我们知道一个常见的form.submit()将按预期工作。

然而,在作为AJAX请求进行提交时,我们需要循环其值的表单元素并使其成为json键值对象。

你很容易,dojo.xhrPost在内部执行此操作,如下所示:

dojo.xhrPost ( {
   url: 'submiturl.sapi',
   form: dojo.byId('myFormDomId')
} )

对于更高级别的控制,您可以使用dojo.formToJsondijit.form.Form.getValues - 例如这两个变种

var values = dojo.formToJson(dojo.byId('myFormDomId'));
// OR
var values = dijit.byId('myFormDijitId').getValues();
// mod or mixin your custom values, examplewise
values = dojo.mixin(values, {   anotherVariable: 'sentAsPostParam'   });

dojo.xhrPost ( {
    url: 'submitUrl.sapi',
    content : values
} );

关于你的第一个问题1)
如果验证程序附加到窗口小部件电子邮件 - 并且验证呈现为无效,则不会相应地设置输入元素。设置值在1 - keyup事件或2 - onblur事件后完成。要确保发送正确的值,请使用dijit.form.Form.validate(看你已经扩展了表单dojoType),就像这样

var formWidget = dijit.byId('myFormDijitId');
if(formWidget.validate()) {  // loops all form widgets and 'sums' up their validators
   dojo.xhrPost( { url: 'submiturl.sapi', content: formWidget.getValues() } );
}

编辑:

专门用于在项目中创建嵌套数组,OP需要JsonRest存储 - 通过精确的相同名称调用输入元素是必要的,例如

<input name="password" 
                        id="${id}_password1" data-dojo-attach-point="password1" data-dojo-type="app.ValidationPassword" />
<input name="password" 
                        id="${id}_password2" data-dojo-attach-point="password2" data-dojo-type="app.ValidationPassword" />

另外,在本机表单元素上使用dojo.formToJson,就像这样(验证后 来断言设置的值):

    g.stores.workspacesAnon.put(
       dojo.formToJson(widgetReference.form.domNode)
    ).then( ... );

答案 1 :(得分:0)

您可以使用dojo.xhrPost()指定您的表单,请参阅this link并查看示例1,它会发送dojo.byId(“myform”)。我猜你可以这样调用它而不用担心如何将这些参数传递给服务器。这应该可以解决发送过时参数的问题。

如果您对此有任何意见。

运气,