0

我正在使用 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按钮时，我想向POSTurl 发送一个请求，传递我在表单中的数据。但是，现在当我单击 时Submit，页面会重新加载一个看起来像这样的 url /?csrfmiddlewaretoken=Y9gaNMFRWZNXMbJ2L3Ev7A5iKPGTuWeF&param_1=0&param2=0/report_parameters/report_id/report_url/：. 我没有看到Dojo Post应该出现在我的控制台中的那个。如何让我的表格提交？

4

2 回答 2

0

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

    <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>or<form>标签来包装整个东西对我有用。

于 2013-04-17T20:04:36.127 回答
0

这个小提琴似乎做你想做的事。

主要区别似乎是：

  • <form>实际上是一个<div>. Form的Dojo 文档链接到为 IE 执行此操作的原因。
  • 所有相关的事件脚本都在表单<div>中。
  • 删除on(dom.byId("submit_parameters")...代码，因为已经有一个声明性提交事件处理程序。

HTML 代码：

<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"));
    });
});
于 2013-04-17T11:03:48.697 回答