Dojo，xhrPost 不适用于在对话框中以编程方式创建的表单答案

【问题标题】：Dojo, xhrPost does not work with programmatically created form in a dialogDojo，xhrPost 不适用于在对话框中以编程方式创建的表单
【发布时间】：2013-12-02 18:36:37
【问题描述】：

我正在对话框中“以编程方式”创建一个表单，当 dom 准备好时，它会正确显示。单击“登录”按钮，正确触发了 POST 请求（我正在检查 chrome 调试器）但是，似乎 POST 请求不包含任何表单数据。响应中没有 usernameF 和 passwordF 参数。如果我尝试将 xhrPost 与先前（即静态）实例化的表单（HTML，就像网上找到的所有示例一样）一起使用，则问题不存在。什么原因？

代码如下：

require([
    "dijit/Dialog",
    "dijit/form/Form",
    "dijit/form/TextBox",
    "dijit/form/Button",
    "dojo/domReady!",
], function(Dialog, Form, TextBox, Button)
{
    var form = new Form({id: "loginformF"});

    var usernameF = new TextBox({
        id: "usernameF",
        placeHolder: "Username"
    });
    usernameF.placeAt(form.containerNode);

    var passwordF = new TextBox({
        id: "passwordF",
        placeHolder: "Password",
        type: 'password'
    });
    passwordF.placeAt(form.containerNode);

    new Button({
        id: "login",
        label: "Login",
        onClick: function(event) {

            //chiamata ajax
            dojo.xhrPost({
                url: "login.php",
                form: form.containerNode,
                load: function(data) {
                    console.log("Message posted.");
                },
                error: function(error) {
                    console.log("Message posted.");
                }
            });
            console.log("Message being sent...");
        }
    }).placeAt(form.containerNode);

    //crea il dialog
    var dia = new Dialog({
        content: form,
        title: "Dialog with form"
    });
    //form.startup();
    dia.show();
});

这是从 Chrome 调试器获取的请求/响应的转储，您可以看到没有“表单数据”部分：

Request URL:http://localhost/cv.dojo/login.php
Request Method:POST
Status Code:200 OK
Request Headersview source
Accept:*/*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:it,en-US;q=0.8,en;q=0.6
Connection:keep-alive
Content-Length:0
Content-Type:application/x-www-form-urlencoded
Host:localhost
Origin:http://localhost
Referer:http://localhost/cv.dojo/?
User-Agent:Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.67 Safari/537.36
X-Requested-With:XMLHttpRequest
Response Headersview source
Connection:Keep-Alive
Content-Length:10
Content-Type:text/html
Date:Mon, 02 Dec 2013 18:31:38 GMT
Keep-Alive:timeout=5, max=96
Server:Apache/2.4.4 (Win32) OpenSSL/0.9.8y PHP/5.4.19
X-Powered-By:PHP/5.4.19

我希望在回复中找到这样的部分：

Form Dataview sourceview URL encoded
usernameF:blablablablabla
passwordF:blablablablabla

怎么了？

【问题讨论】：

标签： javascript ajax forms dojo http-post

【解决方案1】：

该死！ :) 明白了！

我只是忘记了输入字段中的“名称”参数。

这里是更正后的代码，看看

姓名：“用户名F”，

和

名称：“密码F”，

require([
    "dijit/Dialog",
    "dijit/form/Form",
    "dijit/form/TextBox",
    "dijit/form/Button",
    "dojo/domReady!",
], function(Dialog, Form, TextBox, Button)
{
    var form = new Form({id: "loginformF"});

    var usernameF = new TextBox({
        id: "usernameF",
        name:"usernameF",
        placeHolder: "Username"
    });
    usernameF.placeAt(form.containerNode);

    var passwordF = new TextBox({
        id: "passwordF",
        name:"passwordF",
        placeHolder: "Password",
        type: 'password'
    });
    passwordF.placeAt(form.containerNode);

    new Button({
        id: "login",
        label: "Login",
        onClick: function(event) {

            //chiamata ajax
            dojo.xhrPost({
                url: "login.php",
                form: form.containerNode,
                load: function(data) {
                    console.log("Message posted.");
                },
                error: function(error) {
                    console.log("Message posted.");
                }
            });
            console.log("Message being sent...");
        }
    }).placeAt(form.containerNode);

    //crea il dialog
    var dia = new Dialog({
        content: form,
        title: "Dialog with form"
    });
    //form.startup();
    dia.show();
});

还是谢谢。

【讨论】：