Dojo를 사용하여 양식을 제출하는 데 문제가 있습니다.

Question

Django 1.5 및 Dojo 1.8을 사용하고 있습니다. Dojo가 단추를 클릭 할 때 장고보기로 양식을 제출하도록하려고합니다. 나는 Submit 버튼을 클릭하면

<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> 

, 나는 데이터를 전달하는 URL에 POST 요청을 보낼 : 여기

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 페이지입니다 : 여기

내 장고이다 나는 나의 형태로있다. 그러나 지금 바로 Submit을 클릭하면 다음과 같은 URL로 페이지가 다시로드됩니다. /?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> 태그를 사용.