Question

我正在使用Django 1.5和Dojo 1.8。我试图让Dojo在单击按钮时将表单提交回Django视图。

这是我的Django视图：

def report(request, report_id, report_url=None, template='report_parameters.html'):
    if request.method == 'POST':
        form = ReportParametersForm(request.POST)
        if form.is_valid():
            report_params = form.save()
            html = "Success!"
            return HttpResponse(html)
    else:
        form = ReportParametersForm()
        return render(request,template, {
            'form': form,
            'report_url': report_url,
            'report_id': report_id,
        })

这是html页面：

    <div id="report_body">
        <form data-dojo-type="dijit/form/Form" id="parameters_form" data-dojo-id="parameters_form">
            {% csrf_token %}
            <table>
                {{ form.as_table }}
            </table>
            <p><button id="submit_parameters" dojoType="dijit.form.Button" type="submit">Submit</button></p>
        </form>
    </div>
    <script type="dojo/on" data-dojo-event="submit" data-dojo-args="e">
        e.preventDefault();
        require(["dojo/dom", "dojo/request", "dojo/dom-form"], function(dom, request, domForm){
            on(dom.byId("submit_parameters"), "click", function() {
                console.log("Dojo Post");
                request.xhr("/report_parameters/report_id/report_url/", {
                    method: "post",
                    handleAs: "json",
                    data: domForm.toJson("parameters_form"),
                }).then(
                    function(response){
                        alert(response);
                        dom.byId("report_body").innerHTML = "Report!";
                    },
                    function(error){
                        dom.byId("report_body").innerHTML = "<div class=\"error\">"+error+"<div>";
                    }
                );
            });
        });
    </script>

当我点击Submit按钮时，我想向网址发送POST请求，传递我在表单中的数据。但是，现在当我点击Submit时，页面会重新加载一个类似于以下内容的网址：/?csrfmiddlewaretoken=Y9gaNMFRWZNXMbJ2L3Ev7A5iKPGTuWeF&param_1=0&param2=0/report_parameters/report_id/report_url/。我没有看到应该出现在我的控制台中的Dojo Post。如何提交表单？

Answer 1

This fiddle似乎做你想做的事。

主要差异似乎是：

<form>实际上是<div>。 Dojo documentation for Form的reasons why this is done for IE链接。{/ li>
所有相关事件脚本都在<div>。
删除on(dom.byId("submit_parameters")...代码，因为已经存在声明性提交事件处理程序。

HTML code：

<div id="report_body"></div>
<div data-dojo-type="dijit/form/Form" id="parameters_form" data-dojo-id="parameters_form" encType="multipart/form-data" action="" method="">
    <input name="dummy" value="dummy">
    <script type="dojo/on" data-dojo-event="submit" data-dojo-args="e">
        console.log("submit");
        e.preventDefault();
        require(["dojo/dom", "dojo/request/xhr", "dojo/dom-form"], function(dom, xhr, domForm) {
            console.log("Dojo Post");
            var url = "/report_parameters/report_id/report_url/";
            var data = domForm.toJson("parameters_form");
            // overwrite url and data for jsfiddle
            url = "/echo/json/";
            data = {
                json: data
            };
            xhr(url, {
                method: "post",
                handleAs: "json",
                data: data,
            }).then(function(response) {
                alert(JSON.stringify(response, null, 2));
                dom.byId("report_body").innerHTML = "Report!";
            }, function(error) {
                dom.byId("report_body").innerHTML = "<div class=\"error\">" + error + "<div>";
            });
        });
    </script>
    <button data-dojo-type="dijit/form/Button" id="submit_button" type="submit" name="submitButton" value="Submit">Submit</button>
</div>

JS代码：

require(["dojo/parser", "dijit/registry", "dijit/form/Form", "dijit/form/Button", "dijit/form/ValidationTextBox", "dijit/form/DateTextBox", "dojo/domReady!"], function (parser, registry) {
    parser.parse().then(function () {
        console.log("parsed");
        console.log(registry.byId("parameters_form"));
        console.log(registry.byId("submit_button"));
    });
});

Answer 2

我不得不稍微修改上面的内容。这最终对我有用：

    <div id="report_body"></div>
    <form data-dojo-type="dijit/form/Form" id="parameters_form" data-dojo-id="parameters_form" encType="multipart/form-data" action="" method="POST">
        {% csrf_token %}
        <table>
            {{ form.as_table }}
        </table>
        <script type="dojo/on" data-dojo-event="submit" data-dojo-args="e">
            e.preventDefault();
            require(["dojo/dom", "dojo/request/xhr", "dojo/dom-form"], function(dom, xhr, domForm){
                var url = "/report_parameters/report_id/report_url/"
                var data = domForm.toObject("parameters_form")
                xhr(url, {
                    method: "post",
                    data: data,
                }).then(
                    function(response){
                        alert(response);
                        dom.byId("report_body").innerHTML = "Report!";
                    },
                    function(error){
                        dom.byId("report_body").innerHTML = error;
                    }
                );
            });
        </script>
        <p><button id="submit_parameters" dojoType="dijit/form/Button" type="submit" name="submitButton" value="Submit">Submit</button></p>
    </form>

使用<div>或<form>标记将整个内容包装好。

使用Dojo提交表单时遇到问题

2 个答案: