使用Dojo提交表單時遇到問題

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請求的URL傳送數據我有我的形式。但是，現在，當我點擊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。
• 所有相關的事件腳本都在表格<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")); 
    }); 
}); 

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>標籤來包裝整個事情爲我工作。